# Component/DropdownMultiSelect

> Props: component-dropdownmultiselect.props.txt

## Examples


### All Check

```tsx
{
  args: {
    placeholder: 'Placeholder',
    width: 300,
    options
  },
  render: args => {
    const [value, onChange] = useState<(string | number)[]>([]);
    return <DropdownMultiSelect {...args} value={value} onChange={onChange} />;
  },
  args: {
    placeholder: 'Placeholder',
    width: 300,
    options,
    allCheck: true
  }
}
```

### Base

```tsx
{
  args: {
    placeholder: 'Placeholder',
    width: 300,
    options
  },
  render: args => {
    const [value, onChange] = useState<(string | number)[]>([]);
    return <DropdownMultiSelect {...args} value={value} onChange={onChange} />;
  }
}
```

### Custom Max Height

```tsx
{
  args: {
    placeholder: 'Placeholder',
    width: 300,
    options
  },
  render: args => {
    const [value, onChange] = useState<(string | number)[]>([]);
    return <DropdownMultiSelect {...args} value={value} onChange={onChange} />;
  },
  args: {
    placeholder: 'Placeholder',
    width: 300,
    maxHeight: 200,
    options: Array.from({
      length: 50
    }).map((_, index) => ({
      label: `option ${index}`,
      value: index
    }))
  }
}
```

### Disabled

```tsx
{
  args: {
    placeholder: 'Placeholder',
    width: 300,
    options
  },
  render: args => {
    const [value, onChange] = useState<(string | number)[]>([]);
    return <DropdownMultiSelect {...args} value={value} onChange={onChange} />;
  },
  args: {
    placeholder: 'Placeholder',
    width: 300,
    options,
    disabled: true
  }
}
```

### Disabled Item

```tsx
{
  args: {
    placeholder: 'Placeholder',
    width: 300,
    options
  },
  render: args => {
    const [value, onChange] = useState<(string | number)[]>([]);
    return <DropdownMultiSelect {...args} value={value} onChange={onChange} />;
  },
  args: {
    placeholder: 'Placeholder',
    width: 300,
    options: [{
      label: 'apple',
      value: 1
    }, {
      label: 'orange',
      value: 2,
      disabled: true
    }, {
      label: 'mango',
      value: 3
    }, {
      label: 'lemon',
      value: 4,
      disabled: true
    }]
  }
}
```

### Error

```tsx
{
  args: {
    placeholder: 'Placeholder',
    width: 300,
    options
  },
  render: args => {
    const [value, onChange] = useState<(string | number)[]>([]);
    return <DropdownMultiSelect {...args} value={value} onChange={onChange} />;
  },
  args: {
    placeholder: 'Placeholder',
    width: 300,
    options,
    status: 'error'
  }
}
```

### Max Height

옵션 목록 최대 높이는 사이즈 medium, small 일경우 maxHeight가 408px로 고정되며 사용처에서 maxHeight props를 통해 변경할 수 있습니다.

```tsx
{
  args: {
    placeholder: 'Placeholder',
    width: 300,
    options
  },
  render: args => {
    const [value, onChange] = useState<(string | number)[]>([]);
    return <DropdownMultiSelect {...args} value={value} onChange={onChange} />;
  },
  args: {
    placeholder: 'Placeholder',
    width: 300,
    options: Array.from({
      length: 50
    }).map((_, index) => ({
      label: `option ${index}`,
      value: index
    }))
  },
  parameters: {
    docs: {
      description: {
        story: '옵션 목록 최대 높이는 사이즈 medium, small 일경우 maxHeight가 408px로 고정되며 사용처에서 maxHeight props를 통해 변경할 수 있습니다.'
      }
    }
  }
}
```

### Selected Disabled

```tsx
{
  args: {
    placeholder: 'Placeholder',
    width: 300,
    options,
    disabled: true
  },
  render: args => {
    return <DropdownMultiSelect {...args} value={[1, 5, 8]} />;
  }
}
```

### Size

```tsx
{
  args: {
    placeholder: 'Placeholder',
    width: 300,
    options
  },
  render: args => {
    const [value, onChange] = useState<(string | number)[]>([]);
    return <Stack direction='column' gap={8}>
        <DropdownMultiSelect {...args} size='large' value={value} onChange={onChange} />
        <DropdownMultiSelect {...args} size='medium' value={value} onChange={onChange} />
        <DropdownMultiSelect {...args} size='small' value={value} onChange={onChange} />
        <DropdownMultiSelect {...args} size='xsmall' value={value} onChange={onChange} />
      </Stack>;
  }
}
```