Skip to content
Vy logo
Components

Radio

Radio buttons let users pick one of a few alternatives

Examples

A basic radio button

<RadioGroup>
  <Radio value="bus">Buss</Radio>
</RadioGroup>

A group of radio buttons

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

<Fieldset>
  <FieldsetLegend>
    Where would you like to travel?
  </FieldsetLegend>
  <RadioGroup orientation="vertical">
    <Radio value="paris">Paris</Radio>
    <Radio value="berlin">Berlin</Radio>
    <Radio value="gothenburg">Gothenburg</Radio>
    <Radio value="bern">Bern</Radio>
    <Radio value="barcelona">Barcelona</Radio>
  </RadioGroup>
</Fieldset>

Disabled Radio

<RadioGroup defaultValue="disabled-checked">
  <Radio value="disabled-unchecked" disabled>Disabled</Radio>
  <Radio value="disabled-checked" disabled>Disabled</Radio>
</RadioGroup>