Skip to content
Vy logo
Components
React
Figma

Radio

Radio buttons let users pick one of a few alternatives

Examples

A basic radio button

<Radio name="modality" value="bus">Buss</Radio>

A group of radio buttons

<RadioGroup name="modality">
  <Radio value="bus">Buss</Radio>
  <Radio value="train">Tog</Radio>
  <Radio value="plane">Fly</Radio>
</RadioGroup>

A group of radio buttons with a descriptive group label (or legend)

<FormControl as="fieldset">
  <FormLabel as="legend">
    Hvordan vil du reise?
  </FormLabel>
  <RadioGroup name="modality">
    <Radio value="bus">Buss</Radio>
    <Radio value="train">Tog</Radio>
    <Radio value="plane">Fly</Radio>
  </RadioGroup>
</FormControl>

A vertical group of radio buttons

<RadioGroup name="modality" direction="column">
  <Radio value="bus">Buss</Radio>
  <Radio value="train">Tog</Radio>
  <Radio value="plane">Fly</Radio>
</RadioGroup>