# Component/Chip/InputChip

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

## Examples


### Input Chip

```tsx
{
  args: {
    size: 'medium',
    children: 'Label'
  },
  render: args => {
    const input_chip_size_keys: InputSize[] = reverse(['xsmall', 'small', 'medium', 'large']);
    return <Stack direction='column' gap={16} p={20}>
        <Stack direction='row' gap={24} align='center'>
          {input_chip_size_keys.map(key => <Chip {...args} size={key as InputSize} key={key} />)}
        </Stack>
        <Stack direction='row' gap={24} align='center'>
          {input_chip_size_keys.map(key => <Chip {...args} size={key as InputSize} key={key} disabled />)}
        </Stack>
      </Stack>;
  }
}
```

### Input Chip Delete

```tsx
{
  render: () => {
    const initial_value = Array.from({
      length: 10
    }, (_, i) => `Label${i + 1}`);
    const [labels, setLabels] = useState(initial_value);
    const handleResetClick = () => {
      setLabels(initial_value);
    };
    const handleDeleteClick = (index: number) => {
      setLabels(labels => [...labels.slice(0, index), ...labels.slice(index + 1)]);
    };
    return <Stack direction='column' gap={16} p={20}>
        <Stack direction='row' gap={8} align='center'>
          <Button onClick={handleResetClick} kind='negative' size='xsmall'>
            리셋
          </Button>
          {labels.map((label, index) => <Chip key={label} onDelete={() => handleDeleteClick(index)}>
              {label}
            </Chip>)}
        </Stack>
      </Stack>;
  }
}
```