• Place the label on the left side of a drop-down list.
• Use title case capitalization for drop-down list labels and values (unless the values read more like a sentence).
Radio buttons
Use radio buttons to indicate a set of mutually exclusive but related choices.
Users can perform the following action with radio buttons:
User goal
Action using the navigation
keys
Action using a touch screen Action using a physical keyboard
Select a radio button. Click the trackpad. Tap the item. Press the Space key.
Best practice: Implementing radio buttons
• Use radio buttons for two or more choices when space is not an issue. If space is an issue, consider using a drop-down
list instead.
• 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 when users select a radio button. For example, do not open a new screen.
• Align radio buttons vertically.
• Group and order values logically (for example, group related radio buttons together or include the most common values
first). Avoid ordering radio buttons alphabetically; alphabetical order is language-specific.
Guidelines for labels
• Use clear, concise labels. Verify that the label clearly describes what occurs when users select the radio button. If the
labels are too long, they wrap.
• Place labels on the right side of radio buttons.
• Use sentence case capitalization.
UI Guidelines Containers and components
83
To Next Page
Loading...
Need help?
General
