# Component/ChipInput

> Props: component-chipinput.props.txt

## Examples


### Base

```tsx
{
  args: {
    disabled: false,
    draggable: false
  },
  render: args => {
    const [value, setValue] = useState<ChipInputValue[]>([]);
    return <Stack direction='column' gap={8}>
        <ChipInput {...args} value={value} onChange={newValue => {
        console.log('onchange', newValue);
        setValue(newValue);
      }} />
        <pre>{JSON.stringify(value, null, 2)}</pre>
      </Stack>;
  }
}
```

### Disabled

```tsx
{
  args: {
    disabled: true,
    value: [{
      id: createUniqueIdentifier(),
      value: 'Chip1'
    }, {
      id: createUniqueIdentifier(),
      value: 'Chip2'
    }, {
      id: createUniqueIdentifier(),
      value: 'Chip3'
    }]
  }
}
```

### Draggable

```tsx
{
  args: {
    disabled: false,
    draggable: true,
    value: [{
      id: createUniqueIdentifier(),
      value: 'Chip1'
    }, {
      id: createUniqueIdentifier(),
      value: 'Chip2'
    }, {
      id: createUniqueIdentifier(),
      value: 'Chip3'
    }]
  },
  render: args => {
    const [value, setValue] = useState(() => args.value);
    return <Stack direction='column' gap={8}>
        <ChipInput {...args} value={value} onChange={newValue => {
        console.log('onchange', newValue);
        setValue(newValue);
      }} />
        <pre>{JSON.stringify(value, null, 2)}</pre>
      </Stack>;
  }
}
```

### Size

```tsx
{
  args: {
    draggable: false,
    value: [{
      id: createUniqueIdentifier(),
      value: 'Chip1'
    }, {
      id: createUniqueIdentifier(),
      value: 'Chip2'
    }, {
      id: createUniqueIdentifier(),
      value: 'Chip3'
    }, {
      id: createUniqueIdentifier(),
      value: 'Chip1',
      canDelete: false
    }, {
      id: createUniqueIdentifier(),
      value: 'Chip2',
      canDelete: false
    }, {
      id: createUniqueIdentifier(),
      value: 'Chip3',
      canDelete: false
    }]
  },
  render: args => {
    const [value, setValue] = useState(() => args.value);
    const size_list: InputSize[] = ['large', 'medium', 'small', 'xsmall'];
    return <Stack direction='column' gap={20}>
        {size_list.map(size => <Stack key={size} direction='column' gap={8}>
            <BaseText>{size}</BaseText>
            <ChipInput {...args} value={value} onChange={setValue} size={size} />
          </Stack>)}
      </Stack>;
  }
}
```

### Status With Form Field

```tsx
{
  args: {
    draggable: false,
    value: [{
      id: createUniqueIdentifier(),
      value: 'Chip1'
    }, {
      id: createUniqueIdentifier(),
      value: 'Chip2'
    }, {
      id: createUniqueIdentifier(),
      value: 'Chip3'
    }]
  },
  render: args => {
    const [value, setValue] = useState(() => args.value);
    return <Stack direction='column' gap={20}>
        <FormField label='info' formHelperText={<FormHelperText status='info'>info message</FormHelperText>}>
          <ChipInput {...args} value={value} onChange={setValue} status='info' />
        </FormField>
        <FormField label='success' formHelperText={<FormHelperText status='success'>success message</FormHelperText>}>
          <ChipInput {...args} value={value} onChange={setValue} status='success' />
        </FormField>
        <FormField label='error' formHelperText={<FormHelperText status='error'>error message</FormHelperText>}>
          <ChipInput {...args} value={value} onChange={setValue} status='error' />
        </FormField>
      </Stack>;
  }
}
```

### Value

```tsx
{
  args: {
    draggable: false,
    value: [{
      id: createUniqueIdentifier(),
      value: 'canDelete: true, disabled: false',
      canDelete: true,
      disabled: false
    }, {
      id: createUniqueIdentifier(),
      value: 'canDelete: false, disabled: false',
      canDelete: false,
      disabled: false
    }, {
      id: createUniqueIdentifier(),
      value: 'canDelete: false, disabled: true',
      canDelete: false,
      disabled: true
    }, {
      id: createUniqueIdentifier(),
      value: 'canDelete: true, disabled: true',
      canDelete: true,
      disabled: true
    }]
  },
  render: args => {
    const [value, setValue] = useState(() => args.value);
    return <ChipInput {...args} value={value} onChange={setValue} />;
  }
}
```

### Wrapping

```tsx
{
  args: {
    draggable: false,
    wrap: 'wrap',
    width: 300,
    value: [{
      id: createUniqueIdentifier(),
      value: 'Chip1'
    }, {
      id: createUniqueIdentifier(),
      value: 'Chip2'
    }, {
      id: createUniqueIdentifier(),
      value: 'Chip3'
    }, {
      id: createUniqueIdentifier(),
      value: 'Chip4'
    }, {
      id: createUniqueIdentifier(),
      value: 'Chip5'
    }, {
      id: createUniqueIdentifier(),
      value: 'Chip6'
    }, {
      id: createUniqueIdentifier(),
      value: 'Chip7'
    }, {
      id: createUniqueIdentifier(),
      value: 'Chip8'
    }, {
      id: createUniqueIdentifier(),
      value: 'Chip9'
    }, {
      id: createUniqueIdentifier(),
      value: 'Chip10'
    }, {
      id: createUniqueIdentifier(),
      value: 'Chip11'
    }, {
      id: createUniqueIdentifier(),
      value: 'Chip12'
    }, {
      id: createUniqueIdentifier(),
      value: 'Chip13'
    }, {
      id: createUniqueIdentifier(),
      value: 'Chip14'
    }, {
      id: createUniqueIdentifier(),
      value: 'Chip15'
    }, {
      id: createUniqueIdentifier(),
      value: 'Chip16'
    }, {
      id: createUniqueIdentifier(),
      value: 'Chip17'
    }, {
      id: createUniqueIdentifier(),
      value: 'Chip18'
    }, {
      id: createUniqueIdentifier(),
      value: 'Chip19'
    }, {
      id: createUniqueIdentifier(),
      value: 'Chip20'
    }]
  },
  render: args => {
    const [value, setValue] = useState(() => args.value);
    return <Stack direction='row' gap={20}>
        <Stack direction='column' gap={8}>
          <BaseText>nowrap</BaseText>
          <ChipInput {...args} value={value} onChange={setValue} wrap='nowrap' />
        </Stack>
        <Stack direction='column' gap={8}>
          <BaseText>wrap (maxHeight 미지정)</BaseText>
          <ChipInput {...args} value={value} onChange={setValue} wrap='wrap' />
        </Stack>
        <Stack direction='column' gap={8}>
          <BaseText>wrap (maxHeight: 200)</BaseText>
          <ChipInput {...args} value={value} onChange={setValue} wrap='wrap' maxHeight={200} />
        </Stack>
        <Stack direction='column' gap={8}>
          <BaseText>wrap (maxHeight: infinite)</BaseText>
          <ChipInput {...args} value={value} onChange={setValue} wrap='wrap' maxHeight={'infinite'} />
        </Stack>
      </Stack>;
  }
}
```