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.

const Example01 = () => {
    const [value, setValue] = React.useState({})
    return (
        <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={value === "1"}
                    onChange={ (value) => setValue(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={value === "2"}
                    onChange={ (value) => setValue(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={value === "3"}
                    onChange={ (value) => setValue(value) }
                />
            </Form.Group>
        </Form>
    )
}
render (Example01)
<Form className="m-b-8">
    <Form.Select open={true} 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.

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

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.

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

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