# Component/Control/RadioGroup/Radio

> Props: component-control-radiogroup-radio.props.txt

## Examples


### Base

```tsx
{
  args: {
    defaultValue: 'general'
  },
  render: args => {
    return <RadioGroup {...args} items={items} />;
  }
}
```

### Controlled

```tsx
{
  render: () => {
    const items: {
      label: string;
      value: string;
    }[] = [{
      label: '직진배송',
      value: 'zigzin'
    }, {
      label: '일반',
      value: 'general'
    }];
    const [value, setValue] = useState('general');
    const handleChange = (value: string) => {
      setValue(value);
    };
    const handleButtonClick = () => {
      setValue('zigzin');
    };
    return <div>
        <RadioGroup items={items} value={value} onChange={handleChange} />
        <button onClick={handleButtonClick}>직진</button>
      </div>;
  }
}
```

### Disabled

```tsx
{
  args: {
    defaultValue: 'general'
  },
  render: args => {
    return <RadioGroup {...args} items={items} />;
  },
  args: {
    disabled: true
  }
}
```

### Full Width

```tsx
{
  args: {
    defaultValue: 'general'
  },
  render: args => {
    return <RadioGroup {...args} items={items} />;
  },
  args: {
    width: 'fill'
  }
}
```

### Hover

```tsx
{
  render: () => {
    const [value, setValue] = useState('general');
    return <Stack>
        <RadioGroup items={[...items, {
        label: <Stack gap={4} align='center'>
                  직진배송2
                  <Stack gap={4} align='center'>
                    <BaseText color={semantic_colors.content.primary}>(</BaseText>
                    <RadioGroup items={items} spacing={8} />
                    <BaseText color={semantic_colors.content.primary}>)</BaseText>
                  </Stack>
                </Stack>,
        value: '직진배송2'
      }]} value={value} onChange={value => setValue(value)} />
      </Stack>;
  }
}
```

### Size

```tsx
{
  render: () => <>
      <Stack direction='column' gap={16}>
        <RadioGroup size='large' items={items} />
        <RadioGroup size='medium' items={items} />
        <RadioGroup size='small' items={items} />
      </Stack>
      <Stack direction='column' p={20} mt={10} style={{
      backgroundColor: colors.gray10,
      borderRadius: '8px'
    }}>
        <BaseText>- Box 타입이 아닌 경우 small, medium, large 사이즈만 지원됩니다.</BaseText>
      </Stack>
    </>
}
```

### Spacing

```tsx
{
  args: {
    defaultValue: 'general'
  },
  render: args => {
    return <RadioGroup {...args} items={items} />;
  },
  args: {
    spacing: 40
  }
}
```

### Vertical Align

```tsx
{
  args: {
    defaultValue: 'general'
  },
  render: args => {
    return <RadioGroup {...args} items={items} />;
  },
  args: {
    align: 'vertical'
  }
}
```