Create front-end style guides in minutes

Try for free See features

18 patterns found for tag forms

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)...

Written by: Janne Lammi

Always Visible Input Hints

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...

Written by: Janne Lammi

Angular Material Sign-in Form

</>
autocomplete

Autocomplete helps the user to provide valid answers. As the user types into a text box, a list of matching answers is shown in a drop-down menu below the text box. The user can then choose the co...

Written by: Janne Lammi

Autocomplete

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...

Written by: Janne Lammi

Dynamic Input Hints

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...

Written by: Janne Lammi

Feedback Messages

</>
good-defaults

Good defaults pattern is about helping users to answer questions on the form by providing good default values. This pattern saves the users work and reduces the possibility of input errors. Trave...

Written by: Janne Lammi

Good Defaults

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...

Written by: Janne Lammi

Horizontal Module Tabs

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...

Written by: Janne Lammi

Inline Edit

inline-input-adder

Inline Input Adder minimizes the amount of input fields by allowing the user to add more fields when needed. As the additional input fields are not shown until requested by the user, the user inte...

Written by: Janne Lammi

Inline Input Adder

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...

Written by: Janne Lammi

Input Controls

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...

Written by: Janne Lammi

Input Prompt

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...

Written by: Johannes Hocksell

Invite

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 “...

Written by: Janne Lammi

Primary & Secondary Actions

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...

Written by: Janne Lammi

Required Form Fields

</>
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...

Written by: Janne Lammi

Spotlight Effect