# Component/Control/SegmentedControl

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

## Examples


### Base

```tsx
{
  render: args => {
    return <SegmentedControl {...args} />;
  }
}
```

### Controlled

```tsx
{
  render: () => {
    const [value, setValue] = useState('2');
    const handleChange = (value: string) => {
      setValue(value);
    };
    const handleButtonClick = () => {
      const index = items.findIndex(({
        value: itemValue
      }) => value === itemValue);
      setValue(items[(index + 2) % items.length].value);
    };
    return <Stack gap={16} justify='space-between'>
        <SegmentedControl items={items} value={value} onChange={handleChange} />
        <Button kind='outlined_secondary' onClick={handleButtonClick}>
          +2 선택
        </Button>
      </Stack>;
  }
}
```

### Disabled

```tsx
{
  render: args => {
    return <SegmentedControl {...args} />;
  },
  args: {
    disabled: true
  }
}
```

### Disabled Checked

```tsx
{
  args: {
    items: items.map(item => ({
      ...item,
      disabled: item.value === '2'
    }))
  },
  render: args => {
    const [value, setValue] = useState('2');
    const [isDisabled, setIsDisabled] = useState(true);
    const handleChange = (value: string) => {
      setValue(String(value));
    };
    const toggleDisabled = () => {
      setIsDisabled(!isDisabled);
    };
    return <Stack gap={16} justify='space-between'>
        <SegmentedControl {...args} value={value} onChange={handleChange} disabled={isDisabled} />
        <Button kind='outlined_secondary' onClick={toggleDisabled}>
          {isDisabled ? '활성화' : '비활성화'}
        </Button>
      </Stack>;
  }
}
```

### Disabled Item

```tsx
{
  render: args => {
    return <SegmentedControl {...args} />;
  },
  args: {
    items: items.map(item => ({
      ...item,
      disabled: item.value === '2' || item.value === '4',
      disabledTooltip: item.value === '2' ? '비활성 아이템입니다.' : undefined
    }))
  }
}
```

### Full Width

```tsx
{
  render: args => {
    return <SegmentedControl {...args} />;
  },
  args: {
    width: 'fill'
  }
}
```

### Icon Only

```tsx
{
  args: {
    items: items.map(({
      value,
      icon
    }) => ({
      value,
      icon
    }))
  },
  render: args => {
    return <Stack direction='column' gap={16}>
        <SegmentedControl {...args} size='xsmall' defaultValue='1' />
        <SegmentedControl {...args} size='medium' defaultValue='2' />
        <SegmentedControl {...args} size='large' defaultValue='3' />
      </Stack>;
  }
}
```

### Icon Only With Tooltip

```tsx
{
  args: {
    items: items.map(({
      label,
      value,
      icon
    }) => ({
      value,
      icon,
      tooltip: label
    }))
  },
  render: args => {
    return <Stack direction='column' gap={16}>
        <SegmentedControl {...args} size='large' defaultValue='3' />
      </Stack>;
  }
}
```

### Icon Only With Tooltip With Disabled

```tsx
{
  args: {
    items: items.map(({
      label,
      value,
      icon
    }) => ({
      value,
      icon,
      tooltip: label
    }))
  },
  render: args => {
    return <Stack direction='column' gap={16}>
        <SegmentedControl {...args} size='large' defaultValue='3' />
      </Stack>;
  },
  args: {
    items: items.map(({
      label,
      value,
      icon
    }) => ({
      value,
      icon,
      tooltip: label,
      disabled: value === '4' || value === '5',
      disabledTooltip: value === '4' ? '비활성 아이템입니다.' : undefined
    }))
  }
}
```

### No Default Value

```tsx
{
  render: args => {
    return <SegmentedControl {...args} />;
  },
  render: args => {
    const [value, setValue] = useState<undefined | string>(undefined);
    const [updated_at, setUpdatedAt] = useState<undefined | number>(undefined);
    const handleChange = (value: string) => {
      setValue(value);
    };
    const toggleDisabled = () => {
      if (value) {
        setValue(undefined);
        setUpdatedAt(Date.now());
      } else {
        setValue('2');
      }
    };
    return <Stack gap={16} justify='space-between'>
        <SegmentedControl key={updated_at} items={args.items} value={value} defaultValue={undefined} onChange={handleChange} />
        <Button kind='outlined_secondary' onClick={toggleDisabled}>
          {value ? '값 해제' : '값 설정'}
        </Button>
      </Stack>;
  }
}
```

### No Icon

```tsx
{
  args: {
    items: items.map(({
      label,
      value
    }) => ({
      label,
      value
    }))
  },
  render: args => {
    return <Stack direction='column' gap={16}>
        <SegmentedControl {...args} size='xsmall' defaultValue='1' />
        <SegmentedControl {...args} size='medium' defaultValue='2' />
        <SegmentedControl {...args} size='large' defaultValue='3' />
      </Stack>;
  }
}
```

### Size

```tsx
{
  render: args => <Stack direction='column' gap={16}>
      <SegmentedControl {...args} size='xsmall' />
      <SegmentedControl {...args} size='medium' />
      <SegmentedControl {...args} size='large' />
    </Stack>
}
```