LogoLogo
  • Introduction
  • Design Philosophy
    • What Design Is Not
    • Concision
    • Accessible Configuration
    • Minimal Documentation
  • User Workflow
    • First Launch Experience
    • Normal Launch
    • Always Provide an Undo
    • Always Saved
    • Closing
    • Background Tasks
  • App Launcher
  • Widgets
    • Creating Layouts
    • Providing Feedback
    • Selection Controls
    • Avoid Widgets That Do Nothing
    • Interactive Widgets
      • Welcome Screen
      • Button
      • Search Entry
      • Notebook
    • Containers
  • Reference
    • Iconography
    • Text
  • HIG Style Guide
Powered by GitBook

Links

  • Homepage
  • Support
  • Developer
  • Blog

Other Docs

  • Developer Guide
  • Contributor Guide

Made with ❤️ by contributors from all over the world

On this page
  • Checkboxes
  • Comboboxes
  • Linked Buttons
  • Radio Buttons
  • Switches
  • Mode Switches

Was this helpful?

Edit on GitHub
Export as PDF
  1. Widgets

Selection Controls

PreviousProviding FeedbackNextAvoid Widgets That Do Nothing

Last updated 4 years ago

Was this helpful?

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

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

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

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.

Comboboxes
Linked Buttons
Radio Buttons
Switches
Mode Switches

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

See also: by UX Movement

3 Ways to Make Checkboxes, Radio Buttons Easier to Click
Mode Button