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.
<State initial={1}>
{([state, setState]) => (
<Form>
<Form.Group grouped>
<label>Organization</label>
<Form.Radio
label={<span><strong>Rebel Alliance</strong><BodyText el="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><BodyText el="div" size="small" className="m-b-half">The Bad Guys</BodyText></span>}
value="2"
name="Radio-sample"
checked={state === "2"}
onChange={ (value) => setState(value) }
/>
<Form.Radio
label={<span><strong>Trade Federation</strong><BodyText el="div" size="small" className="m-b-half">Neutral</BodyText></span>}
value="3"
name="Radio-sample"
checked={state === "3"}
onChange={ (value) => setState(value) }
/>
</Form.Group>
</Form>
)}
</State>
<Form className="m-b-8">
<Form.Select open label="Organization" placeholder="Choose Organization" options={[
{key:1, value:1, text: 'Rebel Alliance'},
{key:2, value:2, text: 'Galactic Empire'},
{key:3, value:3, text: 'Trade Federation'},
]} />
</Form>
Sizing
Radios can be sized to be small, medium, and large.
<Form>
<Form.Group grouped>
<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.Group grouped>
<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.Group grouped>
<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.Group grouped>
<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.Group grouped>
<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.
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>
Custom Label Position
Radios by default have their label to the left. A custom text label can be applied using the standard label, for, and id combination found with HTML radios.
Examples of a label on the left
<Form style={{width: '200px'}}>
<Form.Group grouped>
<Stack
alignItems="center"
justifyContent="space-between"
>
<BodyText
el="label"
htmlFor="radio-id1"
className="ta-right m-r-1"
>
Short Label
</BodyText>
<Form.Radio
id="radio-id1"
name="Radio-sample"
/>
</Stack>
<Stack
alignItems="center"
justifyContent="space-between"
>
<BodyText
el="label"
htmlFor="radio-id2"
className="ta-right m-r-1"
>
Custom Label
</BodyText>
<Form.Radio
id="radio-id2"
name="Radio-sample"
/>
</Stack>
<Stack
alignItems="center"
justifyContent="space-between"
>
<BodyText
el="label"
htmlFor="radio-id3"
className="ta-right m-r-1"
>
A Longer Radio Label
</BodyText>
<Form.Radio
id="radio-id3"
name="Radio-sample"
/>
</Stack>
</Form.Group>
</Form>
<Form>
<Form.Group grouped>
<Stack
alignItems="center"
justifyContent="flex-end"
>
<BodyText
el="label"
htmlFor="radio-id4"
className="ta-right m-r-1"
>
Short Label
</BodyText>
<Form.Radio
id="radio-id4"
name="Radio-sample"
/>
</Stack>
<Stack
alignItems="center"
justifyContent="flex-end"
>
<BodyText
el="label"
htmlFor="radio-id5"
className="ta-right m-r-1"
>
Custom Label
</BodyText>
<Form.Radio
id="radio-id5"
name="Radio-sample"
/>
</Stack>
<Stack
alignItems="center"
justifyContent="flex-end"
>
<BodyText
el="label"
htmlFor="radio-id6"
className="ta-right m-r-1"
>
A Longer Radio Label
</BodyText>
<Form.Radio
id="radio-id6"
name="Radio-sample"
/>
</Stack>
</Form.Group>
</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.
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.
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.
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.
Follow the inline help content guidelines.
Components
- To build a full form, use the Form component.
- 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.
import { Checkbox } from '@servicetitan/design-system';
