Create front-end style guides in minutes

Try for free See features

18 patterns found for tag forms

This pattern demonstrates using Angular Material with your patterns. Angular Material is both a UI Component framework and a reference implementation of Google's Material Design Spec...

Created: Janne Lammi, Aug. 20, 2016

Angular Material Sign-in Form

</>

Indicating clearly required or optional fields on a form tells the user what needs to be filled in to complete the form. If most of the form fields are optional, use text or asterisk (*) next to e...

Created: Janne Lammi, Oct. 8, 2011

Required Form Fields

</>

This pattern contains typography guidance for Patternry. You can use this pattern as a basis when creating a typography part of your company style guide. Just sign up if you haven&#8217;t already,...

Created: Janne Lammi, Oct. 9, 2013

Typography

</>
horizontal-module-tabs

Horizontal Module Tabs separates content into different panes, and the panes can be viewed one at a time. Tabs are arranged horizontally above (sometimes below) the content, and the selected tab i...

Created: Janne Lammi, Aug. 23, 2010

Horizontal Module Tabs

feedback-messages

Messages are a way to provide feedback to users. Success messages tell people they have successfully completed a task, for example submitted a form. Error messages let people know that something...

Created: Janne Lammi, March 25, 2012

Feedback Messages

</>
dynamic-input-hints

Dynamic Input Hints are instructional texts or examples that are shown when a user clicks or tabs to an input field. Showing input hints only when people feel they need them keeps the form simple...

Created: Janne Lammi, April 6, 2011

Dynamic Input Hints

input-prompt

Input Prompt is an info text placed inside a text box. It guides the user on how the text field should be filled or how it can be used. The input prompt inside a text field will disappear if click...

Created: Janne Lammi, March 20, 2011

Input Prompt

always-visible-input-hints

Always visible input hints are info texts or examples guiding users to fill in empty text fields correctly. They should be placed close to the text field (usually below or on the right side of it)...

Created: Janne Lammi, March 20, 2011

Always Visible Input Hints

invite

Offering users a way to invite their friends to start using your website is a good way to get more users to your site. Invite feature is also necessary for online collaboration tools, because peop...

Created: Johannes Hocksell, Jan. 26, 2011

Invite

inline-edit

Inline edit allows the user to edit text directly in the page without requiring going to a separate page. It makes the interaction more direct and intuitive as the user can edit the text in the sa...

Created: Janne Lammi, Sept. 26, 2010

Inline Edit

primary-secondary-actions

Match the visual presentation of actions to their importance to minimize the risk for potential errors and help people complete a form as quickly as possible. Primary actions are actions such as “...

Created: Janne Lammi, Sept. 12, 2010

Primary & Secondary Actions

input-controls

A special pattern describing basic input controls (Text box, checkbox, radio button, and drop-down list) in Web applications. Source: http://jannel.wufoo.com/forms/form-controls/ Different types...

Created: Janne Lammi, Sept. 9, 2010

Input Controls

vertical-module-tabs

Vertical Module Tabs separates content into different panes, and the panes can be viewed one at a time. This pattern can also be used to show selection-dependent inputs on a form (show initial que...

Created: Janne Lammi, June 8, 2010

Vertical Module Tabs

undo

People tend to make mistakes when interacting with applications. Making one mistake can throw away hours of work. Therefore users should be have an option to easily undo their actions and get thei...

Created: Janne Lammi, July 8, 2010

Undo

spotlight-effect

Highlighting (a.k.a., spotlighting) is an effective but subtle way to draw attention to a change in the interface. For instance, instead of showing a message telling people that their item was add...

Created: Janne Lammi, July 8, 2010

Spotlight Effect