Skip to main content
Elastic UI
Elastic UI
ComponentsPatternsContentData visualization
EUI ChangelogGitHubFigma
  • Guidelines
    • Getting started
    • Accessibility
    • Writing
    • Testing
  • Theming
    • Theme provider
    • Color mode
    • High contrast mode
    • Borders
    • Breakpoints
    • Colors
    • Sizing
    • Typography
  • Templates
    • Page template
    • Sitewide search
  • Layout
    • Accordion
    • Bottom bar
    • Flex
    • Flyout
    • Header
    • Horizontal rule
    • Modal
    • Page components
    • Page header
    • Panel
    • Popover
    • Resizable container
    • Spacer
  • Navigation
    • Breadcrumbs
    • Buttons
    • Collapsible nav
    • Context menu
    • Facet
    • Key pad menu
    • Link
    • Pagination
    • Side nav
    • Steps
    • Tabs
    • Tree view
  • Display
    • Aspect ratio
    • Avatar
    • Badge
    • Callout
    • Card
    • Comment list
    • Description list
    • Drag and drop
    • Empty prompt
    • Health
    • Icons
    • Image
    • List group
    • Loading
    • Progress
    • Skeleton
    • Stat
    • Text
    • Timeline
    • Title
    • Toast
    • Tooltip
    • Tour
  • Forms
    • Form controls
    • Form layouts
    • Form validation
    • Text controls
    • Numeric controls
    • Selection controls
      • Guidelines
      • Checkboxes and radios
      • Basic select
      • Super select
      • Combo box
      • Selectable
    • Search and filter controls
    • Date and time controls
    • Other controls
  • Tabular content
    • Tables
    • Data grid
  • Editors & Syntax
    • Code
    • Markdown
  • Utilities
    • Accessibility
    • Auto sizer
    • Beacon
    • Color palettes
    • Copy
    • CSS utility classes
    • Delay
    • Error boundary
    • Focus trap
    • Highlight and mark
    • HTML ID generator
    • I18n
    • Inner text
    • Mutation observer
    • Outside click detector
    • Overlay mask
    • Portal
    • Pretty duration
    • Provider
    • Resize observer
    • Scroll
    • Text diff
    • Text truncation
    • Window events
  • EUI
  • Forms
  • Selection controls
  • Guidelines

Selection controls guidelines


Labels

Checkbox and radio button labels

A label should be succinct, short, and descriptive with one to two words. This way users can quickly scan the available options.

Do: Use one to two descriptive words.

Don't: Repeat the same words. They make labels difficult to scan.

Use positive and active wording.

Do: Tell users what happens when the selection control is on.

Don't: Use negatives. They're unnatural and confusing.

Use sentence case (capitalize the first word).

Do: Sentence case makes titles easier to read.

Don't: Title case can feel more cluttered.

Use consistent label structures for options within the same group.

Data to ship

Do: Use sentences only or fragments only.

Data to ship

Don't: Mix label structure within the same group of options.

Availability zones

Do: Start all with a verb, all with a noun, or all with a number.

Availability zones

Don't: Use ending punctuation. Exception: Question marks can be used if they add clarity.

Legends

For groups of options, add a legend that gives meaning to the options. Legends appear like a title.

Data to ship

Do: Use nouns that describe the choices to make.

Choose to ship logs and/or metrics

Don't: Repeat choices or use the title as instructions.

Switch labels

The label should be static, action-oriented, and describe the feature. Avoid verbs that are less conversational such as "enable" unless they are your only option.

Malware protection

Do: Use a static noun describing the setting to turn on or off.

If enabled, uses malware protection

Don't: Start with statements such as "If true" or "If enabled".

Use recommended defaults
Rollover when an index is 30 days old or reaches 50 gigabytes.

Do: If relevant, start with a verb ("Use A", "Show B") and add help text to provide more info.

Enable

Don't: Use only a verb. Generic verbs alone make options unclear.

Use past tense only when labelling a list of previously created items, like in a table header.

𐘂𐘂
✄𐘗✄𐘗
Enabled
↦
Fake table text
↦
Fake table text
↦
Fake table text
↵
↦
Fake table text
↦
Fake table text
↦
Fake table text
↵
↦
Fake table text
↦
Fake table text
↦
Fake table text
↵
↦
Fake table text
↦
Fake table text
↦
Fake table text
↵
↦
Fake table text
↦
Fake table text
↦
Fake table text
↵
𐘂𐘂

Do: In a list of already created items, use the past tense.

Log enabled

Don't: Change the label to represent the current state of the switch.

Edit this page

Previous
Selection controls
Next
Checkboxes and radios
  • Labels
    • Checkbox and radio button labels
    • Legends
    • Switch labels
EUI is dual-licensed under Elastic License 2.0 and Server Side Public License, v 1 | Crafted with ❤ by Elastic