Skip to main content

Radio Button

Description​

Radio buttons allow a user to select one item from a short list of two to four options. They are used when the list of options are mutually exclusive and the user must select exactly one choice.

To select a single item from a list of five or more options, use a dropdown or comboboxinstead.

The user may interact with the radio button itself or its associated label. The label is vertically centered with the radio button even when the text wraps.

Usage​

Layout​

Allow 32px minimum horizontal space, or 8px minimum vertical space between radio buttons.

Avoid radio buttons on small screens and use toggle chips or a toggle group instead.

Avoid nesting radio buttons.

coming soon: example of radio button layout

Filter Counts​

When using radio buttons as filters with counts, display counts on a badge and right align the badges.

coming soon: example of radio button layout

Best Practices​

  • Structure options in a logical order The list of selections should be structured, whenever possible, in a logical order, such as smallest to largest.
  • Make selection options comprehensive Avoid vague or misleading labels but include all the necessary information the user needs to make a decision about the selection.
  • Options should be clearly distinct from one another Provide clear and distinct choices that are easy to understand.
  • Always offer a default selection Radio buttons should always have exactly one option pre-selected. Select the safest and most secure option (to prevent data loss).
  • Offer “None” as an option where applicable Permit users to skip making a selection where it is not otherwise required with a choice labeled as "none."

Coming soon:example(s) of best practices

Patterns​

Coming soon:patterns that use this component

Code​

Active​

<Container className="bg-white">
  <FormGroup row>
    <Col>
      <RadioButton value="1" label="Select this" />
      <RadioButton value="2" label="Select that" />
      <RadioButton value="3" label="Select the other" />
      <RadioButton value="select" label="Select a long wrapping checkbox label" />
    </Col>
  </FormGroup>
</Container>

Disabled​

<Container className="bg-white">
  <FormGroup row>
    <Col>
      <RadioButton disabled value="this2" label="Select This" counts="12,345" />
      <RadioButton disabled value="that2" label="Select That" counts="54,321" />
      <RadioButton disabled value="select2" label="Select the other" counts="1,234" />
    </Col>
  </FormGroup>
</Container>

Radio Button Props​

NameTypeDefaultDescription
valuestringnullSets the value of the selected radio button
labelstringnullSets the label text to the right of the radio button
countsstringnullOptional counts shown to the far right of the label text