# Radio

## Introduction

Radio 컴포넌트는 사용자가 여러 옵션 중 하나만 선택할 수 있는 단일 선택 인터페이스를 제공합니다. 라디오 버튼은 그룹으로 사용되어야 하며, 하나가 선택되면 다른 옵션들은 자동으로 해제됩니다.

```tsx
<Radio />
```

| Field         | Description | Default |
| ------------- | ----------- | ------- |
| checked       | —           | —       |
| color         | —           | —       |
| checkedIcon   | —           | —       |
| disabled      | —           | —       |
| disableIcon   | —           | —       |
| label         | —           | —       |
| name          | —           | —       |
| onChange      | —           | —       |
| overlay       | —           | —       |
| readOnly      | —           | —       |
| required      | —           | —       |
| size          | —           | —       |
| uncheckedIcon | —           | —       |
| variant       | —           | —       |

## Usage

```tsx
import { Radio } from '@ceed/ads';

function MyComponent() {
  const [selectedValue, setSelectedValue] = useState('option1');

  return (
    <div>
      <Radio
        name="example"
        value="option1"
        checked={selectedValue === 'option1'}
        onChange={(e) => setSelectedValue(e.target.value)}
        label="옵션 1"
      />
      <Radio
        name="example"
        value="option2"
        checked={selectedValue === 'option2'}
        onChange={(e) => setSelectedValue(e.target.value)}
        label="옵션 2"
      />
    </div>
  );
}
```

## Examples

### Variants

```tsx
<FormControl>
  <FormLabel>Variants</FormLabel>
  <RadioGroup defaultValue="outlined" name="radio-buttons-group">
    <Radio value="outlined" label="Outlined" variant="outlined" />
    <Radio value="soft" label="Soft" variant="soft" />
    <Radio value="solid" label="Solid" variant="solid" />
    <Radio value="plain" label="Plain" variant="plain" />
  </RadioGroup>
</FormControl>
```

### Sizes

```tsx
<FormControl>
  <FormLabel>Sizes</FormLabel>
  <RadioGroup defaultValue="medium" name="radio-buttons-group">
    <Radio value="small" label="Small" size="sm" />
    <Radio value="medium" label="Medium" size="md" />
    <Radio value="large" label="Large" size="lg" />
  </RadioGroup>
</FormControl>
```

### Colors

```tsx
<FormControl>
  <FormLabel>Colors</FormLabel>
  <RadioGroup defaultValue="medium" name="radio-buttons-group">
    <Radio value="primary" label="Primary" color="primary" />
    <Radio value="neutral" label="Neutral" color="neutral" />
    <Radio value="danger" label="Danger" color="danger" />
    <Radio value="success" label="Success" color="success" />
    <Radio value="warning" label="Warning" color="warning" />
  </RadioGroup>
</FormControl>
```

### Custom Icons

아이콘을 커스터마이징하여 특별한 용도로 사용할 수 있습니다.

```tsx
<RadioGroup aria-label="platform" defaultValue="Website" overlay name="platform" sx={{
  flexDirection: 'row',
  gap: 2,
  [`& .${radioClasses.checked}`]: {
    [`& .${radioClasses.action}`]: {
      inset: -1,
      border: '3px solid',
      borderColor: 'primary.500'
    }
  },
  [`& .${radioClasses.radio}`]: {
    display: 'contents',
    '& > svg': {
      zIndex: 2,
      position: 'absolute',
      top: '-8px',
      right: '-8px',
      bgcolor: 'background.surface',
      borderRadius: '50%'
    }
  }
}}>
{['Website', 'Documents', 'Social Account'].map(value => <Sheet key={value} variant="outlined" sx={{
  borderRadius: 'md',
  boxShadow: 'sm',
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
  gap: 1.5,
  p: 2,
  minWidth: 120
}}>
<Radio id={value} value={value} checkedIcon={<CheckCircleRoundedIcon />} />
<Avatar variant="soft" size="sm" />
<FormLabel htmlFor={value}>{value}</FormLabel>
</Sheet>)}
</RadioGroup>
```

### No Icon

아이콘 없이 텍스트만으로 구성할 수 있습니다.

```tsx
<Box sx={{
  width: 300
}}>
<FormLabel id="storage-label" sx={{
  mb: 2,
  fontWeight: 'xl',
  fontSize: 'xs',
  letterSpacing: '0.15rem'
}}>
Storage
</FormLabel>
<RadioGroup aria-labelledby="storage-label" defaultValue="512GB" size="lg" sx={{
  gap: 1.5
}}>
{['512GB', '1TB', '2TB'].map(value => <Sheet key={value} sx={{
  p: 2,
  borderRadius: 'md',
  boxShadow: 'sm'
}}>
<Radio label={`${value} SSD storage`} overlay disableIcon value={value} slotProps={{
  label: ({
    checked
  }) => ({
    sx: {
      fontWeight: 'lg',
      fontSize: 'md',
      color: checked ? 'text.primary' : 'text.secondary'
    }
  }),
  action: ({
    checked
  }) => ({
    sx: theme => ({
      ...(checked && {
        '--variant-borderWidth': '2px',
        '&&': {
          // && to increase the specificity to win the base :hover styles
          borderColor: theme.vars.palette.primary[500]
        }
      })
    })
  })
}} />
</Sheet>)}
</RadioGroup>
</Box>
```

### Segmented Controls

세그먼트 컨트롤 스타일로 사용할 수 있습니다.

```tsx
<Box sx={{
  display: 'flex',
  alignItems: 'center',
  gap: 2
}}>
<Typography id="segmented-controls-example" fontWeight="lg" fontSize="sm">
  Justify:
</Typography>
<RadioGroup orientation="horizontal" aria-labelledby="segmented-controls-example" name="justify" value={justify} onChange={(event: React.ChangeEvent<HTMLInputElement>) => setJustify(event.target.value)} sx={{
  minHeight: 48,
  padding: '4px',
  borderRadius: '12px',
  bgcolor: 'neutral.softBg',
  '--RadioGroup-gap': '4px',
  '--Radio-actionRadius': '8px'
}}>
{['flex-start', 'center', 'flex-end'].map(item => <Radio key={item} color="neutral" value={item} disableIcon label={item} variant="plain" sx={{
  px: 2,
  alignItems: 'center'
}} slotProps={{
  action: ({
    checked
  }) => ({
    sx: {
      ...(checked && {
        bgcolor: 'background.surface',
        boxShadow: 'sm',
        '&:hover': {
          bgcolor: 'background.surface'
        }
      })
    }
  })
}} />)}
</RadioGroup>
</Box>
```

### Product Attributes

제품 속성 선택 등의 용도로 활용할 수 있습니다.

```tsx
<Box sx={{
  overflow: 'auto',
  px: 2
}}>
<FormLabel id="product-color-attribute" sx={{
  mb: 1.5,
  fontWeight: 'xl',
  textTransform: 'uppercase',
  fontSize: 'xs',
  letterSpacing: '0.1em'
}}>
Color
</FormLabel>
<RadioGroup aria-labelledby="product-color-attribute" defaultValue="warning" sx={{
  gap: 2,
  flexWrap: 'wrap',
  flexDirection: 'row'
}}>
{(['primary', 'neutral', 'danger', 'success', 'warning'] as const).map(color => <Sheet key={color} sx={{
  position: 'relative',
  width: 40,
  height: 40,
  flexShrink: 0,
  bgcolor: `${color}.solidBg`,
  borderRadius: '50%',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center'
}}>
<Radio overlay variant="solid" color={color} checkedIcon={<Done fontSize="large" />} value={color} slotProps={{
  input: {
    'aria-label': color
  },
  radio: {
    sx: {
      display: 'contents',
      '--variant-borderWidth': '2px'
    }
  }
}} sx={{
  '--joy-focus-outlineOffset': '4px',
  '--joy-palette-focusVisible': theme => theme.vars.palette[color][500],
  [`& .${radioClasses.action}.${radioClasses.focusVisible}`]: {
    outlineWidth: '2px'
  }
}} />
</Sheet>)}
</RadioGroup>
<br />
<FormLabel id="product-size-attribute" sx={{
  mb: 1.5,
  fontWeight: 'xl',
  textTransform: 'uppercase',
  fontSize: 'xs',
  letterSpacing: '0.1em'
}}>
Size
</FormLabel>
<RadioGroup aria-labelledby="product-size-attribute" defaultValue="M" sx={{
  gap: 2,
  mb: 2,
  flexWrap: 'wrap',
  flexDirection: 'row'
}}>
{['XS', 'S', 'M', 'L', 'XL'].map(size => <Sheet key={size} sx={{
  position: 'relative',
  width: 40,
  height: 40,
  flexShrink: 0,
  borderRadius: '50%',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  '--joy-focus-outlineOffset': '4px',
  '--joy-palette-focusVisible': theme => theme.vars.palette.neutral.outlinedBorder,
  [`& .${radioClasses.checked}`]: {
    [`& .${radioClasses.label}`]: {
      fontWeight: 'lg'
    },
    [`& .${radioClasses.action}`]: {
      '--variant-borderWidth': '2px',
      borderColor: 'text.secondary'
    }
  },
  [`& .${radioClasses.action}.${radioClasses.focusVisible}`]: {
    outlineWidth: '2px'
  }
}}>
<Radio color="neutral" overlay disableIcon value={size} label={size} />
</Sheet>)}
</RadioGroup>
</Box>
```

## Best Practices

1. **그룹 사용**: Radio 버튼들은 반드시 동일한 `name` 속성을 가진 그룹으로 사용해야 합니다.

2. **레이블 제공**: 접근성을 위해 항상 의미 있는 `label`을 제공하세요.

3. **초기값 설정**: 사용자 경험을 위해 적절한 초기값을 설정하는 것이 좋습니다.

4. **적절한 간격**: 여러 라디오 버튼 간에는 충분한 간격을 두어 선택하기 쉽게 만드세요.

5. **상태 관리**: 제어 컴포넌트로 사용하여 상태를 명확히 관리하세요.
