# Component/Control/CheckboxGroup

> Props: component-control-checkboxgroup.props.txt

## Examples


### All Check

```tsx
{
  render: () => {
    const [checked_list, setCheckedList] = useState<string[]>([]);
    const onChange = (list: string[]) => {
      setCheckedList(list);
    };
    return <CheckboxGroup allCheck items={items} value={checked_list} onChange={v => onChange(v as string[])} />;
  }
}
```

### Base

```tsx
{
  args: {
    defaultValue: ['kor'],
    items: items
  }
}
```

### Controlled

```tsx
{
  render: () => {
    const [values, setValues] = useState<string[]>([]);
    const handleButtonClick = () => {
      setValues(['kor', 'jp']);
    };
    return <Stack direction='column'>
        <Stack p={6}>
          <CheckboxGroup items={items} value={values} onChange={value => setValues(value as string[])} />
        </Stack>
        <Stack p={6}>
          <button onClick={handleButtonClick}>kor, jp checked</button>
        </Stack>
        <Stack p={6}>{values.length > 0 && <BaseText>selected items: {values.join(',')}</BaseText>}</Stack>
      </Stack>;
  }
}
```

### Disabled

```tsx
{
  args: {
    disabled: true,
    items: items
  }
}
```

### Hover

```tsx
{
  render: () => {
    const [values, setValues] = useState<string[]>([]);
    return <Stack>
        <CheckboxGroup items={[...items, {
        label: <Stack gap={4} align='center'>
                  아랍어2
                  <Stack gap={4} align='center'>
                    <BaseText color={semantic_colors.content.primary}>(</BaseText>
                    <CheckboxGroup items={items} spacing={8} />
                    <BaseText color={semantic_colors.content.primary}>)</BaseText>
                  </Stack>
                </Stack>,
        value: '아랍어2'
      }]} value={values} onChange={value => setValues(value as string[])} />
      </Stack>;
  }
}
```

### Link

```tsx
{
  args: {
    align: 'vertical',
    items: [{
      label: '한국어',
      value: 'kor',
      link: 'link',
      disabled: true,
      onClickLink: e => {
        alert(e);
      }
    }, {
      label: '일본어',
      value: 'jp',
      link: 'link',
      onClickLink: e => {
        alert(e);
      }
    }, {
      label: '영어',
      value: 'en',
      link: 'link',
      onClickLink: e => {
        alert(e);
      }
    }]
  }
}
```

### Size

```tsx
{
  render: () => <Stack direction='column' gap={16}>
      <CheckboxGroup size='large' items={items} />
      <CheckboxGroup size='medium' items={items} />
      <CheckboxGroup size='small' items={items} />
    </Stack>
}
```

### Spacing

```tsx
{
  args: {
    spacing: 40,
    items: items
  }
}
```

### Vertical Align

```tsx
{
  args: {
    align: 'vertical',
    items: items
  }
}
```

### Indeterminate

```tsx
{
  render: () => {
    const [checked_list, setCheckedList] = useState(['kor', 'jp']);
    const [indeterminate, setIndeterminate] = useState(true);
    const [check_all, setCheckAll] = useState(false);
    const onChange = (list: string[]) => {
      setCheckedList(list);
      setIndeterminate(!!list.length && list.length < items.length);
      setCheckAll(list.length === items.length);
    };
    const onCheckAllChange = (e: React.ChangeEvent<HTMLInputElement>) => {
      setCheckedList(e.target.checked ? items.map(item => item.value) : []);
      setIndeterminate(false);
      setCheckAll(e.target.checked);
    };
    return <Stack direction='column' gap={10}>
        <Checkbox indeterminate={indeterminate} onChange={onCheckAllChange} checked={check_all}>
          Check all
        </Checkbox>
        <Divider />
        <CheckboxGroup items={items} value={checked_list} onChange={v => onChange(v as string[])} />
      </Stack>;
  }
}
```