Inputs

Radio Buttons

Use a radio button group to provide users with a short (<5 items) list of choices from which they must select one.

Because radio buttons cannot be deselected, one of the options should always be selected by default. Select the most desired or frequently selected option as the default value.

If users need to be able to not select any option, use checkboxes instead. Also consider using a single checkbox, instead of “Yes” and “No” radio buttons, for Boolean toggles.

Use the "Cards" style to give your choices more visual prominence and your users a larger click target.

The "Compact" layout option should only be used for radio button groups containing short choice labels that are not likely to wrap onto the next line, such as "Yes", "No", or "Maybe". When using the "Compact" layout, labels with text longer than 2 lines will be truncated. For long labels, use the "Stacked" layout.

Examples of radio buttons with the "Standard" style using both "Stacked" and "Compact" layouts

Examples of radio buttons with the "Cards" style using both "Stacked" and "Compact" layouts

Checkboxes

Use a checkbox group to provide users with a short (<5 items) list of choices from which none, one, or many items may be selected.

Use a single checkbox to provide users with a Boolean toggle. Always include a choice label.

Use the "Cards" style to give your choices more visual prominence and your users a larger click target.

The "Compact" layout option should only be used for checkbox groups containing short choice labels that are not likely to wrap onto the next line, such as "Yes", "No", or "Maybe". When using the "Compact" layout, labels with text longer than 2 lines will be truncated. For long labels, use the "Stacked" layout.

Two examples of checkboxes with the "Standard" style. The first is a "Stacked" layout showing subscription options and the second is a "Compact" layout showing recommendation options.

Two examples of checkboxes with the "Cards" style. The first is a "Stacked" layout showing subscription options and the second is a "Compact" layout showing terms and conditions agreement options.

Use a dropdown to provide users with moderately-long lists of choices from which one or many may be selected, depending on configuration.

Use radio or checkbox groups for shorter lists, so all choices can easily be seen by the user.

Sort dropdown lists in a logical order, such as alphabetical.

Use pickers when browsing through a longer list is impractical.

Paragraph Fields

Select the appropriate paragraph height ("Short", "Medium", or "Tall") based on the expected length of user responses.

Use the "Short" paragraph height in editable grids to align paragraphs with dropdown, number, and text inputs in adjacent columns.

Instruction Text

Use instructions to display important content that is essential to completing the task.

If the content should always be visible, use instructions as opposed to a help tooltip or placeholder.

Consider using instructions when a field label becomes too lengthy.

Help Tooltips

Consider using a help tooltip instead of instructions for content that does not need be to read each time a user views the form.

For example, a help tooltip is appropriate for showing instructions that are most useful to new users.

Placeholder Text

Use placeholder text to describe the correct input format or provide a brief hint to assist with value input.

Placeholder text should not replace field labels.

DO

DON'T

Picker Placeholder Text

Use placeholder text for picker components to provide a distinction from regular text inputs.

In general, use sentence case capitalization and keep the message as short as possible.

DO

DON'T

Alignment

Use left alignment for inputs (in left-to-right languages).

DO

DON'T

Open in Github Built: Thu, Feb 23, 2023 (02:59:22 PM)

On This Page

FEEDBACK