Preview

Code

                                                        
                                                        
                                                            <usln-checkbox
                                                           label-text="Check me"
                                                           is-checked="true"
                                                        >
                                                        </usln-checkbox>
                                                        
                                                            

Guidelines

Checkboxes belong to the family of selectors and are used to select one or more options available in a list. The component is ready for use in Portal and Editor, but currently not in Player.

Use this component:

• in form UIs or standalone settings,
• for filtering views or items (e.g., in batch action contexts),
• for multi-selection in dropdowns, where a multi-select item type employs a checkbox.

Checkboxes versus radio buttons

Checkboxes are used to select one or more options from a list of mutually non-exclusive ones. Radio buttons allow users to select multiple only a single option.

Checkboxes versus dropdowns

Checkboxes display options on the first level, therefore can be preferred over dropdowns, as they save users a click and increase visibility. Dropdowns are preferrable in case of lists with many options (generally, more than 3). Please note that for dropdowns to support multi-selection, you have to use the multi-select item type.

Checkboxes versus toggles

Toggles indicate a binary choice between two states: on and off (active and inactive), most commonly when enabling a setting. Toggles are also generally used for a single, immediately effective action. Checkboxes should be used when selecting at least one option if two or more are available, or when the users move through a longer flow (such as filling out a form).

Usage

Form element

Checkboxes are most commonly used in form UIs. They can't be used without a text abel.

Behaviour

Pre-selection of options

• A checkbox can take a pre-selected state, when the selected option is a reasonable default (or an optimal choice for the user), or when the functionality would break without a pre-selection.
• If all options are equal and none is preferred, pre-selection isn't necessary.
• Pre-selection should be avoided in contexts where it could potentially introduce bias, such as certain types of forms or surveys.

Selection

• Change of state to "selected" is instant. However, applying the selection usually requires confirmation, such as clicking a "Submit" button.
• The entire component (checkmark icon and the label) should be clickable.

Sorting

Options can be sorted according to:

• most to least common choice
• lowest to highest risk
• simplest to most complex choice

Alphabetical sorting should be used when the other options are not applicable.

Error display

When a required selection was not performed, error text should be displayed directly below the list of options. The options themselves should take the error state.

Content

• Use labels that are short, direct, unambiguous and unchanging.
• Avoid offering more than 5 options.
• Capitalise the label, do not use full stops.
• For items with descriptions, the latter should be capitalised and end with a full stop. Keep the descriptions as short as possible (single-line description is ideal). Otherwise, consider other options of conveying the information, such as intro text or a message box.
• If a text label overflows its container, it should be wrapped. Avoid labels wrapping into more than 2 lines.

Do's and dont's

Variants

Default

The correct variant for most cases.

With description

To be used when all selection options require an additional explanation for the user to accomplish their action.