Radio

Allows you to select a value from a set.

Example

Some option

Some other option

const Example = () => {
  const [value, setValue] = useState('radioTest')

  const handleChange = event => {
    setValue(event.target.value)
  }

  return (
    <div>
      <Label htmlFor="radioTest">
        <Radio
          id="radioTest"
          value="radioTest"
          name="radioTestGroup"
          onChange={handleChange}
          checked={value}
        />
        Some option
      </Label>
      <br />
      <Label htmlFor="radioTest2">
        <Radio
          id="radioTest2"
          value="radioTest2"
          name="radioTestGroup"
          onChange={handleChange}
          checked={value}
        />
        Some other option
      </Label>
    </div>
  )
}

render(<Example />)

const Example = () => {
  const [value, setValue] = useState('radioTest')
  const handleChange = event => {
    setValue(event.target.value)
  }
  return (
    <div>
      <Label htmlFor="radioTest">
        <Radio
          id="radioTest"
          value="radioTest"
          name="radioTestGroup"
          onChange={handleChange}
          checked={value}
        />
        Some option
      </Label>
      <br />
      <Label htmlFor="radioTest2">
        <Radio
          id="radioTest2"
          value="radioTest2"
          name="radioTestGroup"
          onChange={handleChange}
          checked={value}
        />
        Some other option
      </Label>
    </div>
  )
}
render(<Example />)

Theme

Props

Name	Type	Default value	Description
checked	string	false	Should equals the value if you want it to be checked.
id required	string	null	The id of the current element.
name required	string	null	The name attribute is used to reference form data after a form is submitted. Numerous radio with the same name value will be in the same group.
onChange	func	null	Gets called when the value of the radio changes.
value required	string	null	The value attribute of the radio. This attribute has meaning when submitting a form.