Radio

() => {
  const [value, setValue] = useState('one')
  return (
    <Radio
      name="radio-default"
      checked={value}
      onChange={v => setValue(v)}
      items={
        [
          {
            name: 'Option 1',
            value: 'one'
          },
          {
            name: 'Option 2',
            value: 'two'
          }
        ]
      }
    />
  )
}

() => {
  const [value, setValue] = useState('one')
  const [value2, setValue2] = useState('two')
  return (
    <Radio
      name="radio-disabled"
      checked={value}
      onChange={v => setValue(v)}
      items={
        [
          {
            name: 'Option 1',
            value: 'one',
            disabled: true
          },
          {
            name: 'Option 2',
            value: 'two',
            disabled: true
          }
        ]
      }
    />
  )
}

() => {
  const [value, setValue] = useState('one')
  return (
    <Radio
      name="radio-description"
      checked={value}
      onChange={v => setValue(v)}
      items={
        [
          {
            name: 'Option 1',
            value: 'one',
            description: 'Description for option 1.'
          },
          {
            name: 'Option 2',
            value: 'two',
            description: 'Description for option 2.'
          }
        ]
      }
    />
  )
}

() => {
  const [value, setValue] = useState('one')
  return (
    <Container direction={['column', 'row', 'row']}>
      <Radio
        name="radio-context-and-item"
        checked={value}
        onChange={v => setValue(v)}
      >
        <Container flex="0 0 auto">
          <RadioItem name='Option 1' value='one' description='Custom radio layout.'/>
        </Container>
        <Container flex="0 0 auto">
          <Tooltip text="The Evil Rabbit Jumped over the Fence" position="bottom">
            <RadioItem name='Option 2' value='two' description='Combined with Tooltip.'/>
          </Tooltip>
        </Container>
        <Container>
          <RadioItem name='Option 3' value='three'>
            <small>Custom children components.</small>
          </RadioItem>
        </Container>
      </Radio>
    </Container>
  )
}