# Component/Control/RadioGroup/BoxRadio

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

## Examples


### Base

```tsx
{
  render: args => {
    return <RadioGroup variant='box' {...args} items={args.items ?? items} />;
  }
}
```

### Controlled

```tsx
{
  render: () => {
    const [value, setValue] = useState('2');
    const handleChange = (value: string) => {
      setValue(value);
    };
    const handleButtonClick = () => {
      setValue('7');
    };
    return <Stack direction='row' gap={10}>
        <RadioGroup items={items} value={value} onChange={handleChange} variant='box' />
        <Button onClick={handleButtonClick}>1년 선택</Button>
      </Stack>;
  }
}
```

### Disabled

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

### Disabled Item

```tsx
{
  render: args => {
    return <RadioGroup variant='box' {...args} items={args.items ?? items} />;
  },
  args: {
    items: [{
      label: '오늘',
      value: '1'
    }, {
      label: '일주일',
      value: '2',
      disabled: true
    }, {
      label: '1개월',
      value: '3'
    }, {
      label: '3개월',
      value: '4'
    }, {
      label: '6개월',
      value: '6'
    }, {
      label: '1년',
      value: '7'
    }]
  }
}
```

### Full Width

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

### Selected Disabled

```tsx
{
  render: args => {
    return <RadioGroup variant='box' {...args} items={args.items ?? items} />;
  },
  args: {
    items: [{
      label: '오늘',
      value: '1'
    }, {
      label: '일주일',
      value: '2',
      disabled: true
    }, {
      label: '1개월',
      value: '3'
    }, {
      label: '3개월',
      value: '4'
    }, {
      label: '6개월',
      value: '6'
    }, {
      label: '1년',
      value: '7'
    }],
    value: '2',
    disabled: true
  }
}
```

### Size

```tsx
{
  render: () => <Stack direction='column' gap={16}>
      <RadioGroup size='xsmall' variant='box' items={items} />
      <RadioGroup size='medium' variant='box' items={items} />
      <RadioGroup size='large' variant='box' items={items} />
    </Stack>
}
```