Radio

Accessible and themeable form radio input component.

import { Label, Radio } from '@rebass/forms'

Red

Green

Blue

<Box>
  <Label>
    <Radio
      name='color'
      id='red'
      value='red'
    />
    Red
  </Label>
  <Label>
    <Radio
      name='color'
      id='green'
      value='green'
    />
    Green
  </Label>
  <Label>
    <Radio
      name='color'
      id='blue'
      value='blue'
    />
    Blue
  </Label>
</Box>

<Box>
  <Label>
    <Radio
      name='color'
      id='red'
      value='red'
    />
    Red
  </Label>
  <Label>
    <Radio
      name='color'
      id='green'
      value='green'
    />
    Green
  </Label>
  <Label>
    <Radio
      name='color'
      id='blue'
      value='blue'
    />
    Blue
  </Label>
</Box>

Live Demo

Note that the Label component uses display: flex by default to make alignment with labels simpler.

Edit this page on GitHub

Textarea

Checkbox