Skip to main content
USWDS + Tailwind

Radio buttons

Use radio buttons when people must choose exactly one option from a group. Compare standard and tiled styles.

Examples

Default

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px
Select one historical figure
radio-buttons-demo.tsx
import { Fieldset, RadioGroup } from '@uswds-tailwind/react'


export default function RadioButtonsDemo() {
  return (
    <Fieldset.Root className="max-w-xs">
      <Fieldset.Legend>Select one historical figure</Fieldset.Legend>
      <RadioGroup.Root>
        <RadioGroup.Item value="sojourner-truth">
          <RadioGroup.ItemInput />
          <RadioGroup.ItemControl />
          <RadioGroup.ItemLabel>Sojourner Truth</RadioGroup.ItemLabel>
        </RadioGroup.Item>
        <RadioGroup.Item value="frederick-douglass">
          <RadioGroup.ItemInput />
          <RadioGroup.ItemControl />
          <RadioGroup.ItemLabel>Frederick Douglass</RadioGroup.ItemLabel>
        </RadioGroup.Item>
        <RadioGroup.Item value="booker-t-washington">
          <RadioGroup.ItemInput />
          <RadioGroup.ItemControl />
          <RadioGroup.ItemLabel>Booker T. Washington</RadioGroup.ItemLabel>
        </RadioGroup.Item>
        <RadioGroup.Item value="george-washington-carver">
          <RadioGroup.ItemInput disabled />
          <RadioGroup.ItemControl />
          <RadioGroup.ItemLabel>George Washington Carver</RadioGroup.ItemLabel>
        </RadioGroup.Item>
      </RadioGroup.Root>
    </Fieldset.Root>
  )
}

Tiled

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px
Select one historical figure
radio-buttons-tiled-demo.tsx
import { Fieldset, RadioGroup } from '@uswds-tailwind/react'


export default function RadioButtonsTiledDemo() {
  return (
    <Fieldset.Root className="max-w-xs">
      <Fieldset.Legend>Select one historical figure</Fieldset.Legend>
      <RadioGroup.Root tile>
        <RadioGroup.Item value="sojourner-truth">
          <RadioGroup.ItemInput />
          <RadioGroup.ItemControl />
          <RadioGroup.ItemLabel>
            Sojourner Truth
            <RadioGroup.ItemDescription>
              This is optional text that can describe the choice in more detail.
            </RadioGroup.ItemDescription>
          </RadioGroup.ItemLabel>
        </RadioGroup.Item>
        <RadioGroup.Item value="frederick-douglass">
          <RadioGroup.ItemInput />
          <RadioGroup.ItemControl />
          <RadioGroup.ItemLabel>Frederick Douglass</RadioGroup.ItemLabel>
        </RadioGroup.Item>
        <RadioGroup.Item value="booker-t-washington">
          <RadioGroup.ItemInput />
          <RadioGroup.ItemControl />
          <RadioGroup.ItemLabel>Booker T. Washington</RadioGroup.ItemLabel>
        </RadioGroup.Item>
        <RadioGroup.Item value="george-washington-carver">
          <RadioGroup.ItemInput disabled />
          <RadioGroup.ItemControl />
          <RadioGroup.ItemLabel>George Washington Carver</RadioGroup.ItemLabel>
        </RadioGroup.Item>
      </RadioGroup.Root>
    </Fieldset.Root>
  )
}

Component API

Put Item parts inside Root, with ItemInput, ItemControl, ItemLabel, and optional ItemDescription inside each item.

Root<div>

Owns the selected radio value.

PropTypeDescription
namestringForm field name.
disabledbooleanDisables the group.
readOnlybooleanSets aria-readonly on the group. Native radio inputs remain operable.
invalidbooleanMarks the group invalid.
onValueChange(value: string) => voidReceives the selected value.
tilebooleanUses the tiled item treatment.

Item<label>

Connects ItemInput, ItemControl, and ItemLabel for one choice.

PropTypeDescription
valuestring (required)Value for this choice.

ItemInput<input>

Native radio control. Pass disabled for an individual choice and defaultChecked for an initial selection.

ItemControl<div>

Displays the custom selection mark.

ItemLabel<div>

Displays the option text.

ItemDescription<div>

Displays optional help text.