RadioGroup

The RadioGroup component is a controlled component input field that handles a group of Radio buttons.

API Reference

Prop	Type	Default
children	React.ReactNode
data-test	string
description	string
direction	BoxProps['direction'] \| string	column
disabled	boolean
errorMessage	string
id	string
isValid	boolean	true
legend	string
name	string
onChange	React.ChangeEventHandler<HTMLInputElement>
space	BoxProps['space']	1.5
value	string \| null

Examples

Dark Mode

function Example() {
  const [engine, setEngine] = React.useState()
  const isValid = engine !== undefined

  return (
    <RadioGroup
      legend="Engine"
      name="engine"
      value={engine}
      onChange={(e) => setEngine(e.target.value)}
      description="Select a engine."
      errorMessage={!isValid && 'Please select a engine type.'}
      isValid={isValid}>
      <Radio value="gasoline" label="Gasoline" />
      <Radio value="hybrid" label="Hybrid" />
      <Radio value="electric" label="Electric" />
      <Radio disabled value="old-disabled" label="Old Disabled" />
    </RadioGroup>
  )
}

Disabled

Dark Mode
Open in Playroom

Row

Dark Mode
Open in Playroom

With dynamic description

Dark Mode

function Example() {
  const [choice, setChoice] = React.useState()
  const isValid = choice !== undefined

  return (
    <RadioGroup
      name="group-with-radio"
      value={choice}
      onChange={(e) => setChoice(e.target.value)}
      description={choice ? `Your choice is: ${choice}` : ''}
      isValid={isValid}>
      <RadioCard
        disabled
        value="radio-value-yes"
        title="Yes"
        description="A disabled radio card"
      />
      <RadioCard
        value="radio-value-no"
        title="No"
        description="Radio card with a value hint"
      />
    </RadioGroup>
  )
}

With error message

Dark Mode

function Example() {
  const [choice, setChoice] = React.useState()
  const isValid = choice !== undefined

  return (
    <RadioGroup
      name="group-with-radio"
      value="{choice}"
      onChange={(e) => setChoice(e.target.value)}
      errorMessage={!isValid && 'Please select something.'}
      isValid={isValid}>
      <RadioCard value="radio-error1" title="Some error" />
      <RadioCard value="radio-error2" title="Radio card with error" />
    </RadioGroup>
  )
}

With dynamic description

Dark Mode

function Example() {
  const [choice, setChoice] = React.useState()
  const isValid = choice !== undefined

  return (
    <RadioGroup
      name="group-with-radio"
      value={choice}
      onChange={(e) => setChoice(e.target.value)}
      description={choice ? `Your choice is: ${choice}` : ''}
      isValid={isValid}>
      <RadioCard
        disabled
        value="radio-value-yes"
        title="Yes"
        description="A disabled radio card"
      />
      <RadioCard
        value="radio-value-no"
        title="No"
        description="Radio card with a value hint"
      />
    </RadioGroup>
  )
}