Radio

    <Stack gap="s">
      <Radio id="firstRadio" label="First" label="First" name="numerals" onChange={() => {}}/>
      <Radio id="secondRadio" label="Second" label="Second" name="numerals" onChange={() => {}}/>
      <Radio id="thirdRadio" label="Third" label="Third" name="numerals" onChange={() => {}}/>
    </Stack>
  

    <Radio id="withStandardLabel" label="Label"/>
  

    <Radio label="Label" hint="Hint" id="hintRadio"/>
  

    <Stack width="min(240px, 100%)" gap="xs">
      {['First', 'Second'].map((option) => (
        <Arrange
          key={option}
          backgroundColor="background2"
          radius="s"
          gap="s" 
          columns="1fr auto"
          padding="m"
        >
          <Radio.Label htmlFor={option + 'WithCustom'}>{option}</Radio.Label>
          <Radio id={option + 'WithCustom'} name="withCustomComposition"/>
        </Arrange>
      ))}
    </Stack>
  

    <Stack width="min(240px, 100%)" gap="xs">
      {['Third', 'Fourth'].map((option) => (
        <Arrange
          key={option}
          backgroundColor="background2"
          radius="s"
          gap="s" 
          columns="1fr auto"
          padding="m"
        >
          <Box tag="label" htmlFor={option + 'WithCustom'}>{option}</Box>
          <Radio id={option + 'WithCustom'} name="withCustomCompositionAndLabel"/>
        </Arrange>
      ))}
    </Stack>
  

    <Stack gap="l">
      <Radio id="disabledRadio" label="Can't check" isDisabled/>
      <Radio id="disabledCheckedRadio" label="Can't check" isDisabled isChecked onChange={() => {}}/>
    </Stack>
  

    () => {
      const options = ['First', 'Second', 'Third']
      const [selected, setSelected] = useState(options[0])
      return (
        <Stack gap="m">
          <div>
            selected: {selected}
          </div>

          <Stack gap="xs">
            {options.map((option) => (
              <Radio
                key={option}
                id={'callback' + options}
                label={option}
                onChange={() => setSelected(option)}
                name="callbackOptions"
              />
            ))}
          </Stack>
        </Stack>
      )
    }