Anatomy
The Radio uses two primary elements to help users select one option from a set of choices, the radio itself, and its corresponding label.
- Radio button
- Label
Options
Configure the Radio to accommodate the following scenarios:States
Default
Disabled
Description
Descriptions provide information to help the user avoid errors.Behavior
The Radio uses standard form control behaviors.Usage Guidelines
Content
Radio content should clearly communicate options and provide context for informed decisions.The Radio Group’s title and description communicate its main purpose
Titles should clearly communicate the Radio Group’s purpose at a glance. Descriptions provide additional context about the decision users need to make.Do
Don’t
Use descriptive Radio input labels
Users rely on labels to understand what each Radio input controls. Use positive, active wording for Radio input labels. Use sentence case (capitalize only the first word and proper nouns) so control labels are easy to scan. Do not use periods for short phrases or single sentences. “Leaky bathroom faucet""Clogged kitchen drain"
"No hot water"
"Slow shower drain"
"Overflowing toilet”
Do
"Plumbing emergency"
"Water not working"
"Broken pipe"
"Plumbing issue”
Don’t
Give users the information they need to make an informed decision
When a label doesn’t provide enough context, use descriptions to give users the relevant details they need to decide. Don’t add descriptions when unneeded or solely to match other inputs. Use sentence case, and only include period if more than one sentence is used. Follow the inline help content guidelines.Do
Don’t
Keyboard Interaction
Navigate the Radio using standard keyboard controls.Accessibility
- Include Radio buttons in a Radio Group with multiple mutually exclusive options.
- Provide a visible label for each Radio button.
- When a Radio button has an error, include helper text to describe the error.