Selecting

There are two ways to select things… single-select, and multi-select.

  • Single-select allows users to select one item only from a set of mutually exclusive ones. Typically, one option is defined as the default selection.
  • Multi-select allows users to select as many items as needed.

Selecting is reserved for choosing an option. If you’re looking to perform an action, you’ll need a button.

See the Pen Selecting by Harmony Design (@harmonydesign) on CodePen.

Web

When to Use

Single-select

  • Select Drop Down is used when the user needs to select from a few or a large number of values (examples: selecting a customer or payment type). For cases with many options, use the drop down with Type Ahead.
  • Radio Buttons are useful when you want the user to choose from a few choices that you want to display up front. Common cases include choosing gender, marital status, or full-time/part-time.
  • The Toggle buttons can be used to select from a few options (example: choosing a payment type or timeframe like day, week, month, year).
  • Checkboxes may be used to toggle a single option or preference (example: the “Let customers pay online” option on an invoice).
  • A Switch can also be used to toggle a single option or preference.

Multi-select

  • Checkboxes are used to select multiple items at once.

Appearance & Behavior

Select Drop Down

selectdropdown

Default / Hover / Expanded / Expanded Hover / Selected

Select Drop Down with Type Ahead

selectdropdown-typeahead

Default / Hover / Typing / Expanded / Expanded Hover / Selected

Radio Buttons

Disabled / Default / Hover / Selected / Selected with label

Disabled / Default / Hover / Selected / Selected with label

Checkboxes

Disabled / Default / Hover / Selected / Selected with label

Disabled / Default / Hover / Selected / Selected with label

Segmented Controls

Active and Hover / Default

Active and Hover / Default

Switch

Switch: Off / On

Off / On

 

Responsive Behavior

Checkboxes and radios exist across devices, just with bigger tap targets for touch inputs.  Switch buttons and segmented controls remain the same as on desktop.  Select menus, on the other hand, use mobile-optimized views.  In these cases, tapping on the control opens full page modal with selections presented.  Type ahead selects do the same, but provide an option to type in the modal with suggestions.

Example of select menu with tap/selected state

Example of select menu with tap/selected state

iOS

When to Use

Single-select

  • A Table View is used when the user needs to select a large number of values, or when seeing many options together is useful (e.g. selecting a customer from a long customer list).
  • Use a Picker only if the user is very familiar with the entire set of values, and it’s valuable for users to stay in context (e.g. selecting a payment method or a date).
  • A Switch is used in  table view only. Depending on the choice users make, new list items might appear or disappear, or become active or inactive.

Multi-select

  • Checkboxes are used to select multiple items at once.

Appearance & Behavior

Single-select

Table View

In Table View, the selected item is indicated by a blue checkmark (#365ebf). After the user taps a selectable item, either show the checkmark to the left of the selected item or automatically navigate to a new screen. On iPhone, the Table View is usually shown in a separate screen; while on iPad, it is usually shown in a Drawer or Popover.

table-view_ios

Table View on iPhone / Table View in Popover on iPad

Picker

A Picker is a standard iOS element. A picker has the same size as the iPhone keyboard, and it can’t be resized. It can display one or more wheels, each of which contains a list of values. Use dark text to display the current value in the middle of the view. Display a picker inline with the content as much as possible. To save space, a picker can be hidden by default and shown when the user taps a trigger (e.g. a form field of payment methods). A picker can be paired with a custom input acceory view, which provides related controls (such as navigating to the previous/next form field).

picker_ios

Switch

A Switch is used in  table view only. Depending on the choice users make, new list items might appear or disappear, or become active or inactive.

switch_ios

Switch (Yes): Hiding shipping address input fields / Switch (No): Showing shipping address input fields

Multi-select

Checkboxes can be used in table view, form fields, and collections view. In a Table view, the checkboxes appear to the left of each row. Depending on the context and screen real estate, the selection state can be shown in a separate screen or toggled on/off in the same screen.

checkboxes_ios

Disabled / Default / Selected / Selected with label

checkboxes_iphone

Multi-select example on iPhone

Android

When to Use

Single-select

  • Use Radio Buttons if you think that the user needs to see all available options side-by-side.
  • Spinners provide a quick way to select one value from a set. Use Spinners if ithe user needs to select from a large set of items, or if it’s not necessary to show all options side-by-side.

Multi-select

  • Checkboxes are used to select multiple items at once.

Appearance & Behavior

Single-select

Radio Buttons

Radio buttons are usually aligned vertically.

radio-buttons_android

Normal / Focused / Pressed / Disabled / Disabled Focused

Spinners

In the default state, a spinner shows its currently selected value. Touching the spinner displays a modal window or dropdown menu with all other available values, from which the user can select a new one.

Spinners in forms usually triggers a modal window with all selections. The modal window is dismissed when the user taps a value, the Done button or anywhere outside the modal window.

Normal / Pressed / Focused / Disabled Focused / Disabled

Normal / Pressed / Focused / Disabled Focused / Disabled

Example of a modal window triggered by touching a spinner in a form

Example of a modal window triggered by touching a spinner in a form

Spinners in Action Bars are usually used to switch views. Touching a spinner in action bar displays a dropdown menu of all selections.

spinner-in-action-bar_android

Multi-select

Typically, you should present each checkbox option in a vertical list. Allow ample padding (active area should be larger than 48px x 48px) surrounding  the Checkboxes for easy aiming and tapping.

Normal / Focused / Pressed / Disabled / Disabled Focused

Normal / Focused / Pressed / Disabled / Disabled Focused

Text Guidelines

Dropdowns:

  • Dropdown capitalization is sentence case (exception: if the list includes formal names, like a list of accounts, use title case for those names)
  • Make sure the items in the list are in logical order (alphabetical, chronological, order of importance, etc.)
  • If no item is preselected, use something like “Select a vendor” in ghost or hint text format. If you can’t gray out the text, you can use some kind of indicator, like parentheses. For example: “(Select one)”.
  • It’s valid to have ”None” as one of the options. It should have the same text formatting as the other options in the list.

Radios:

  • Radio name and item capitalization are sentence case
  • Use the verb “select”
  • Don’t use punctuation

Checkboxes:

  • Checkbox name and item capitalization are sentence case
  • Use the verbs “select” and “clear” instead of “deselect” for instructional text. The term ”deselect” causes a problem for localization
  • Created by and
  • Last modified August 30, 2016 by Marni
© Intuit 2016 | Terms of use