RadioGroup

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

Props

Name	Type	Default	Description
onChange*	func		onChange handler.
name*	string
children	node		A JSX node
description	string		Renders a description text underneath the input.
direction	arrayOf, string	column	The direction of the radio items
disabled	bool		Sets disabled
errorMessage	string		Renders a red error message for validation underneath the input.
isValid	bool		Renders the input as valid or invalid
legend	string		Renders a legend.
space	number, string, array	1.5	The space between the radio items
value	string

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

<RadioGroup
  legend="Color"
  disabled
  name="color"
  value="red"
  description="Select a color.">
  <Radio value="red" label="Red" />
  <Radio value="blue" label="Blue" />
  <Radio value="white" label="White" />
</RadioGroup><RadioGroup
  legend="Color"
  disabled
  name="color"
  value="red"
  description="Select a color.">
  <Radio value="red" label="Red" />
  <Radio value="blue" label="Blue" />
  <Radio value="white" label="White" />
</RadioGroup>

Row

Dark Mode
Open in Playroom

<RadioGroup
  legend="Color"
  direction="row"
  name="color"
  value="red"
  description="Select a color.">
  <Radio value="red" label="Red" />
  <Radio value="blue" label="Blue" />
  <Radio value="white" label="White" />
</RadioGroup><RadioGroup
  legend="Color"
  direction="row"
  name="color"
  value="red"
  description="Select a color.">
  <Radio value="red" label="Red" />
  <Radio value="blue" label="Blue" />
  <Radio value="white" label="White" />
</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>
  )
}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>
  )
}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>
  )
}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>
  )
}