On this page
Overview
Show code, ProjectAccess.tsx
Variants
- In a line
Short options people tell apart by name. The default.
- In rows
Options that need a sentence each, in rows that fill the width.
In rows, each option with a description.
Show code, VisibilityRows.tsx
Anatomy
Group
Group label
Option
Label
Description
Radio
Show code, RadioAnatomy.tsx
Behaviour
States
Choosing an option clears the one chosen before. People can't clear a choice, only make another. A chosen row takes the selection's fill, as a selected list row does.
A required choice
A required group with nothing chosen asks for a choice before the form is sent, and its error is tied to the group.
Show code, RequiredChoice.tsx
Adapting to width
Options in a line wrap onto more lines, and rows fill the width.
Show code, WrappingOptions.tsx
Rules
Labels stay short, and an option that needs explaining says so in its description.
Use it when
- Exactly one of two to five options, all in view, such as who can open a project
- Options that each need a sentence to explain them, such as roles
- A choice in a form that takes effect when the form is saved
Show code, DescribedRows.tsx
Show code, LongInlineLabels.tsx
Defaults
Choose a default where one option suits most people, and none where people must decide.
Controls in options
Keep links and buttons out of labels and descriptions: pressing anywhere on an option chooses it.
Accessibility
| Key | Action |
|---|---|
| Tab, Shift+Tab | Moves into the group, to the chosen or first option, and out. |
| Arrow keys | Choose the next or previous option, skipping disabled ones. |
| Space | Chooses the focused option while none is chosen. |