# Component/Chip/SelectChip

> Props: component-chip-selectchip.props.txt

## Examples


### All State

```tsx
{
  args: {
    label: 'Label'
  },
  render: args => {
    const toast = useToast();
    const onClick = () => toast?.show && toast.show({
      content: 'clicked'
    });
    const state_list = [{
      title: 'Default',
      selected: false,
      disabled: false
    }, {
      title: 'Selected',
      selected: true,
      disabled: false
    }, {
      title: 'Disabled',
      selected: false,
      disabled: true
    }, {
      title: 'Selected Disabled',
      selected: true,
      disabled: true
    }];
    const list = [<SelectChip {...args} key='default' />, <SelectChip {...args} key='with-icon' leftIcon={<IconCircle size={8} color='red' />} />, <SelectChip {...args} key='with-colored-icon' leftIcon={<IconColoredRobot />} />];
    return <Stack direction='column' gap={24} p={20}>
        {state_list.map(({
        title,
        ...status
      }) => <Stack direction='column' gap={8} key={title}>
            <BaseText as='p'>{title}</BaseText>
            <Stack direction='row' gap={8} align='center'>
              {list.map(item => React.cloneElement(item, {
            ...args,
            ...status,
            onClick
          }))}
            </Stack>
          </Stack>)}
      </Stack>;
  }
}
```

### Base

```tsx
{
  args: {
    label: 'Label',
    disabled: false,
    selected: false
  },
  argTypes: {
    disabled: {
      control: 'boolean'
    },
    selected: {
      control: 'boolean'
    }
  },
  render: args => {
    const toast = useToast();
    const onClick = () => toast?.show && toast.show({
      content: 'clicked'
    });
    return <Stack direction='column' gap={24} p={20}>
        <Stack direction='row' gap={8} align='center'>
          <SelectChip {...args} onClick={onClick} />
          <SelectChip {...args} onClick={onClick} leftIcon={<IconCircle size={8} color='red' />} />
          <SelectChip {...args} onClick={onClick} leftIcon={<IconColoredRobot />} />
        </Stack>
      </Stack>;
  }
}
```

### Variants And Sizes

```tsx
{
  args: {
    label: 'Label'
  },
  render: args => {
    const variants: SelectChipVariant[] = ['outlined', 'filled'];
    const sizes: SelectChipSize[] = ['xsmall', 'medium'];
    const state_list = [{
      title: 'Default',
      selected: false,
      disabled: false
    }, {
      title: 'Selected',
      selected: true,
      disabled: false
    }, {
      title: 'Disabled',
      selected: false,
      disabled: true
    }, {
      title: 'Selected Disabled',
      selected: true,
      disabled: true
    }];
    return <Stack direction='column' gap={24} p={20}>
        {variants.map(variant => sizes.map(size => <Stack direction='column' gap={8} key={`${variant}-${size}`}>
              <BaseText as='p'>{`${variant} / ${size}`}</BaseText>
              <Stack direction='row' gap={8} align='center'>
                {state_list.map(({
            title,
            ...status
          }) => <SelectChip {...args} key={title} variant={variant} size={size} {...status} />)}
              </Stack>
            </Stack>))}
      </Stack>;
  }
}
```

### With Helper Icon

```tsx
{
  args: {
    label: 'Test Label',
    helperIcon: icon => <Tooltip content='툴팁 확인용' kind='neutral' placement='bottom'>
        {icon}
      </Tooltip>
  },
  play: async ({
    canvasElement
  }) => {
    const canvas = within(canvasElement);
    const chip = await canvas.findByText('Test Label');
    const helper_icon = chip?.querySelector('svg');
    expect(helper_icon).toBeInTheDocument();
    // helper icon 의 색상과 크기 확인
    expect(helper_icon).toHaveAttribute('width', '12');
    expect(helper_icon).toHaveAttribute('height', '12');
    // helper_icon path fill 색상 확인
    expect(helper_icon?.querySelector('path')?.getAttribute('fill')).toBe(semantic_colors.content.tertiary);
    await userEvent.hover(helper_icon!);
    const tooltip = document.querySelector('.pds-tooltip');
    expect(tooltip).toBeInTheDocument();
    expect(tooltip).toHaveTextContent('툴팁 확인용');
  }
}
```