You are currently on Anvil1, which is now in maintenance mode. Visit Anvil2 to get the latest version of the design system.
components / Actions and Inputs
Radio
Actions and Inputs
Radio
Radio Inputs are used to present items in a list of options where users must make a single selection
Radio Inputs are quicker for a user to scan and should be used for choosing between small sets of items, usually 5 or less, and the user must select exactly one option. Since the options are always visible, they are easier to compare against and can provide additional context through helper text or a help tooltip so a user can choose accurately.
Do this
<Stateinitial={1}>
{([state, setState])=>(
<Form>
<Form.Groupgrouped>
<label>Organization</label>
<Form.Radio
label={<span><strong>Rebel Alliance</strong><BodyTextel="div"size="small"className="m-b-half">The Good Guys</BodyText></span>}
value="1"
checked={state ==="1"}
onChange={(value)=>setState(value)}
name="Radio-sample"
/>
<Form.Radio
label={<span><strong>Galactic Empire</strong><BodyTextel="div"size="small"className="m-b-half">The Bad Guys</BodyText></span>}
Radios can be sized to be small, medium, and large.
<Form>
<Form.Groupgrouped>
<label>Small Radio</label>
<Form.Radio
label="Force User"
size="small"
name="Radio-sample"
/>
<Form.Radio
label="Pilot"
size="small"
name="Radio-sample"
/>
<Form.Radio
label="Bounty Hunter"
size="small"
name="Radio-sample"
/>
</Form.Group>
</Form>
<Form>
<Form.Groupgrouped>
<label>Medium Radio</label>
<Form.Radio
label="Force User"
name="Radio-sample"
/>
<Form.Radio
label="Pilot"
name="Radio-sample"
/>
<Form.Radio
label="Bounty Hunter"
name="Radio-sample"
/>
</Form.Group>
</Form>
<Form>
<Form.Groupgrouped>
<label>Large Radio</label>
<Form.Radio
label="Force User"
size="large"
name="Radio-sample"
/>
<Form.Radio
label="Pilot"
size="large"
name="Radio-sample"
/>
<Form.Radio
label="Bounty Hunter"
size="large"
name="Radio-sample"
/>
</Form.Group>
</Form>
States
<Form>
<Form.Groupgrouped>
<label>Error States</label>
<Form.Radio
error
label="Force User"
name="Radio-sample"
/>
<Form.Radio
error
label="Pilot"
name="Radio-sample"
/>
<Form.Radio
label="Bounty Hunter"
error
name="Radio-sample"
/>
</Form.Group>
</Form>
<Form>
<Form.Groupgrouped>
<label>Disabled States</label>
<Form.Radio
disabled
label="Force User"
name="Radio-sample"
/>
<Form.Radio
disabled
label="Pilot"
name="Radio-sample"
/>
<Form.Radio
disabled
label="Bounty Hunter"
name="Radio-sample"
/>
</Form.Group>
</Form>
Labels and Helper Text
No Label Radio
A radio can be isolated, without margins or label text. This can be useful for more complex labels.
<Radio/>
Label Help
Labels can have a help icon with a tooltip to provide additional context to a label.
<Form>
<Form.Radio
label="Input Label"
labelProps={{
help:"This is help text"
}}
/>
</Form>
Helper Text
<Form>
<Form.Radio
label="Description Text"
description="Description goes here..."
name="Radio-sample"
/>
<Form.Radio
label="Error Text"
error="You must choose a selection."
name="Radio-sample"
/>
<Form.Radio
label="Both"
error="You must choose a selection."
description="Description goes here..."
name="Radio-sample"
/>
</Form>
Best practices
Radio buttons should:
Always be used with an associated label component.
Be part of a list of radio buttons that:
Include at least two or more choices.
Are used to have users select only one option.
Include mutually exclusive options — this means that each option must be independent from every other option in the list. For example: Red, blue, and yellow are mutually exclusive. Red, blue, yellow, red/blue are not mutually exclusive.
List options in a rational order that makes logical sense.
Content Guidelines
The radio group’s title and description help communicate its main purpose
Titles should clearly communicate at a glance what the purpose of the radio group is. Descriptions should provide more context and information about the decision the user will have to make.
Do
Don't
Use descriptive radio input labels
The user relies on the label to provide context and identify what the radio input controls. Use positive and 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.
Do
Don't
Choose a logical sequence for input choices
Group input choices logically and based on usage frequency (e.g., Standard shipping, 2-day shipping, 1-day shipping). The most common values first should appear at the top of the list when possible.
Do
Don't
Give the user the information they need to make an informed decision
In cases where the radio input label might not provide enough information or context about the option, use Inline help to give the relevant details about the option so the user can make an informed decision.
Don’t add inline help when unneeded or solely to make it match other inputs that have inline help text.
Use sentence case, and only include period if more than one sentence is used.
For larger sets of options, a Select could be a better option.
For Yes/No or On/Off options or where options are not mutually exclusive, use a Checkbox.
Patterns
Form design pattern for how related controls are ordered.
Importing
We recommend using the Form shorthand component <Form.Checkbox radio />. It automatically provide the correct Form grouping structure and spacing. You can import the standalone component for custom Form layouts.