Radio

import { Radio, RadioGroup } from '@chakra-ui/react'

function RadioExample() {
  const [value, setValue] = React.useState('1')
  return (
    <RadioGroup onChange={setValue} value={value}>
      <Stack direction='row'>
        <Radio value='1'>First</Radio>
        <Radio value='2'>Second</Radio>
        <Radio value='3'>Third</Radio>
      </Stack>
    </RadioGroup>
  )
}

<RadioGroup defaultValue='2'>
  <Stack spacing={5} direction='row'>
    <Radio colorScheme='red' value='1'>
      Radio
    </Radio>
    <Radio colorScheme='green' value='2'>
      Radio
    </Radio>
  </Stack>
</RadioGroup>

<Stack>
  <Radio size='sm' name='1' colorScheme='red'>
    Radio
  </Radio>
  <Radio size='md' name='1' colorScheme='green'>
    Radio
  </Radio>
  <Radio size='lg' name='1' colorScheme='orange' defaultChecked>
    Radio
  </Radio>
</Stack>

<RadioGroup defaultValue='1'>
  <Stack>
    <Radio value='1' isDisabled>
      Checked
    </Radio>
    <Radio value='2'>Unchecked</Radio>
    <Radio value='3'>Unchecked</Radio>
  </Stack>
</RadioGroup>

<RadioGroup defaultValue='1'>
  <Stack spacing={4} direction='row'>
    <Radio value='1' isDisabled>
      Radio 1
    </Radio>
    <Radio value='2'>Radio 2</Radio>
    <Radio value='3'>Radio 3</Radio>
  </Stack>
</RadioGroup>

<Radio isInvalid>Radio</Radio>

// 1. Create a component that consumes the `useRadio` hook
function RadioCard(props) {
  const { getInputProps, getCheckboxProps } = useRadio(props)

  const input = getInputProps()
  const checkbox = getCheckboxProps()

  return (
    <Box as='label'>
      <input {...input} />
      <Box
        {...checkbox}
        cursor='pointer'
        borderWidth='1px'
        borderRadius='md'
        boxShadow='md'
        _checked={{
          bg: 'teal.600',
          color: 'white',
          borderColor: 'teal.600',
        }}
        _focus={{
          boxShadow: 'outline',
        }}
        px={5}
        py={3}
      >
        {props.children}
      </Box>
    </Box>
  )
}

// Step 2: Use the `useRadioGroup` hook to control a group of custom radios.
function Example() {
  const options = ['react', 'vue', 'svelte']

  const { getRootProps, getRadioProps } = useRadioGroup({
    name: 'framework',
    defaultValue: 'react',
    onChange: console.log,
  })

  const group = getRootProps()

  return (
    <HStack {...group}>
      {options.map((value) => {
        const radio = getRadioProps({ value })
        return (
          <RadioCard key={value} {...radio}>
            {value}
          </RadioCard>
        )
      })}
    </HStack>
  )
}

render(<Example />)

// Do this ✅
<RadioGroup name="form-name">
  <Radio>Radio 1</Radio>
  <Radio>Radio 2</Radio>
</RadioGroup>

// Don't do this ❌
<RadioGroup >
  <Radio name="form-name">Radio 1</Radio>
  <Radio name="form-name">Radio 2</Radio>
</RadioGroup>