Checkbox, Radio, Toggle

VIEW IN CLAY

Checkboxes, radios and toggles provide users with different selection and activation tools.

Checkbox

checkbox


A checkbox is a component that lets the user select the value that is written in its corresponding text label. A user can select multiple checkboxes from a group at the same time.

Note: although we have visually defined the checkbox, we use the native checkbox as it is easier to identify by the end user using different web browsers.

States

StateDefinition
checkbox onOn
checkbox offOff
checkbox on disabledOn disabled
checkbox off disabledOff disabled
checkbox variable for multiple selectionCheckbox Variable for multiple selection

Checkbox group

Checkboxes are commonly grouped in forms to provide a set of options.

checkbox list metricscheckbox list metrics

Dos and Don'ts

Capitalize the checkbox's label.

Checkbox text is capitalized

Do

Checkbox text is not capitalized

Don't



Use checkboxes for multiple choices in a set of options.

List of checkboxes to select options

Do

list of switches to select options

Don't



Use checkboxes when more than one option can be selected.

List of checkboxes to select options

Do

List of switches to select options

Don't


Radio

radio


A radio is a component that lets the user select the value that is written in its corresponding text label. Unlike checkboxes, a user can only select one radio button from a group at a time.

Note: although we have visually defined the radio, we use the native radio button since it is easier to identify across different web browsers.

States

StateDefinition
radio onOn
radio offOff
radio on disabledOn disabled
radio off disabledOff disabled

Radio Group

Radios are commonly grouped in forms to provide a set of options.

radio list metricsradio list metrics

It's common to have to split a long list of options into several columns to reduce space. Deciding when to use one column or several columns can be difficult. The benefits of each approach are shown below:

  • One column:
    • It is always easier and faster to read, as the eye doesn’t have to jump.
    • Use it when you have long descriptions.
  • Splitting into several columns: * It reduces space.
    • Make sure to have multiple options and to have at least six elements per column, otherwise there is no real benefit.

radio group example with 2 columns, 6 elements per column and radio group example with 3 columns, 6 elements per column

Radio vs Dropdown Menu

It can be difficult to decide whether to use a radio or a dropdown menu when users need to choose one option from a list of options. Although there is no strict rule to follow in these cases, we have provided some general guidelines below that you can consider when making this decision.

Radios:

  • When the number of options is small
  • When options require lengthy descriptions
  • Radio buttons are always listed vertically.
  • When the number of options is large, or has the potential to become large
  • Options should be of the same nature (e.g. a list of branches, or a list of people).

Dos and Don'ts

Capitalize a radio button's label.

Radio text is capitalized

Do

radio text is not capitalized

Don't



Use radios when only one option can be selected.

radio group with one option selected

Do

radio group with two options selected

Don't


Toggle

switch default state


A toggle is an interface element that, by its activation or deactivation, provokes an immediate action on the screen.

States

A switch can be in one of four different states:

StateDefinition
switch onOn
switch offOff
switch on disabledOn disabled
switch off disabledOff disabled

Dos and Don'ts

  1. Capitalize a toggle switch's label.
Radio text is capitalized

Do

radio text is not capitalized

Don't



  1. Use toogles for activation.
Switch list one activated

Do

Radio group one activated

Don't



  1. Use checkboxes instead of toggles in confirmation messages.
Checkbox to accept terms of use

Do

Switch to accept terms of use

Don't



Variations

Toggle with data attributes

This type of toggle has labels, title label or other support label, that reflect its value. The label can be positioned at the top, right, bottom, or left, and its value should always reflect the toggle's state. Keeping labels in sync with the toggle's value improves the accessibility for your users.

Toggle with icon

Toggle can also have an icon inside the toggle circle to help identify the action. This variation can also have data attributes as the previous variation explains.

toggle with icon

Menu