Skip to main content
Elastic UI
Elastic UI
Getting startedComponentsPatternsContentData visualization
EUI ChangelogGitHubFigma
  • Overview
  • Layout
  • Containers
  • Navigation
  • Display
  • Forms
    • Form controls
    • Form layouts
    • Form validation
    • Text controls
    • Numeric controls
    • Selection controls
      • Guidelines
      • Checkboxes and radios
        • Guidelines
        • Switches
      • Basic select
      • Super select
      • Combo box
      • Selectable
    • Search and filter controls
    • Date and time controls
    • Other controls
  • Tabular content
  • Templates
  • Editors and syntax
  • EUI
  • Forms
  • Selection controls
  • Checkboxes and radios
  • Guidelines

Guidelines

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.

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
↦
↦
↵
↦
↦
↵
↦
↦
↵
𐘂𐘂

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.

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.

Data to ship

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

Edit this page

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