Selection Controls

Selection controls present a way for users to select or enable options. There are several types of selection controls available in elementary OS:

  • Checkboxes present a way for users to select multiple items from a set.

  • Comboboxes and Radio buttons present a way for users to select a single option from a set.

  • Linked buttons present a compact way for users to select options that can be described by an icon or with only one or two words.

  • Switches present a way for users to toggle certain features or behaviors "on" or "off".

Checkboxes

Checkboxes

Use checkboxes when users are making a selection of items. If you have a single option, avoid using a checkbox and use a switch instead.

Make sure that users can toggle the state of the checkbox by clicking on the label associated with the checkbox.

Labels associated with checkboxes should usually be nouns or nounal phrases.

Comboboxes

Comboboxes

Use a combobox (also called a dropdown) when:

  • Users are selecting only a single item from a set and

  • The set is too long to show all available options at once

Linked Buttons

Linked Buttons

Use linked buttons when:

  • All options can be described by an icon or with only one or two words and

  • You think users should see all available options at once.

Linked buttons can be used to select multiple related options like "Bold", "Italic", and "Underline", or they can be used to select a single mutually exclusive option (also called a mode button) like Grid, List, or Column view.

Linked buttons should never contain colored icons. Only 16px symbolic icons OR text. Do not mix icons and text.

Radio Buttons

Radio Buttons

Use radio buttons when:

  • Users are selecting only a single item from a set and

  • You think users should see all available options at once.

Switches

Use a switch when users are toggling certain features or behaviors "on" or "off".

Don't use switches to select related items as part of a list, instead use a checkbox. Think of switches as acting on independent services and checkboxes as including objects in a list. This is an important distinction to make.

When possible, directly call out the service you are acting on. Do not use words that describe the state that the widget is describing like "Enable Multitouch", "Use Multitouch", or "Disable Multitouch". This can create a confusing situation logically. Instead, simply use the noun and write "Multitouch".

Mode Switches

As of elementary OS 5 Juno, mode switches are a new switch-based widget that communicate switching between two distinct states. For example, switching between a photo or video mode in a camera. The switch is drawn smaller and inline with the provided symbolic icons. Tooltip hints can also be provided when hovering the icons.

Use a mode switch when you have two distinct and opposing states that you are switching between that can be effectively communicated via an icon. If you need text or more than two states, use a Mode Button instead.

Last updated

Made with ❤️ by contributors from all over the world