Radio

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>

<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>

<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>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>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>

<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>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>

<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.

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>

<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.

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.

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.

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.

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';

Radio

Sizing

States

Labels and Helper Text

No Label Radio

Label Help

Helper Text

Best practices

Content Guidelines

The radio group’s title and description help communicate its main purpose

Assign geofence tracking to vehicles

Select vehicles to monitor

Use descriptive radio input labels

Choose a logical sequence for input choices

Give the user the information they need to make an informed decision

Components

Patterns

Importing

Radio

Sizing

States

Labels and Helper Text

No Label Radio

Label Help

Helper Text

Best practices

Content Guidelines

The radio group’s title and description help communicate its main purpose

Assign geofence tracking to vehicles

Select vehicles to monitor

Use descriptive radio input labels

Choose a logical sequence for input choices

Give the user the information they need to make an informed decision

Related Assets

Components

Patterns

Importing