UI Guidelines
•
Verify that the content for radio buttons remains static. Content for radio buttons should not change depending on the
context.
•
Do not start an action as soon as users select a radio button. For example, do not open a new screen when users select
a radio button.
•
Group and order radio buttons logically. For example, group related options together or include the most common
options first.
•
Avoid ordering radio buttons alphabetically. Alphabetical order is language-specific.
•
Use clear, concise labels. Verify that the label clearly describes what occurs when users select the radio button.
•
Place labels on the right side of radio buttons.
•
Use sentence case capitalization for the individual radio buttons in a group. Capitalize the first word and any other word
that requires capitalization (such as a proper noun).
•
Do not use end punctuation.
Segmented controls
A segmented control is a series of connected radio buttons. You can use segmented controls to allow users to filter or
change the content that is displayed on the screen. Users tap a segmented control to see a list of values. Users can tap a
value to select it.
Best practices
•
Group and order controls logically. For example, group related options together or include the most common options
first.
•
Avoid ordering controls alphabetically. Alphabetical order is language-specific.
•
Use clear, concise labels.
•
Use sentence case capitalization for the individual controls in a group. Capitalize the first word and any other word that
requires capitalization (such as a proper noun).
•
Do not use end punctuation.
Toggle switches
You can use toggle switches for most binary options. For example, you can use a toggle switch for an option that can be
turned on and off. Users can tap the alternate option or drag the slider to the left or right to change the state of the switch.
UI components
23
Print Page