Multi Select
Multi select lets you pick more than one option from a list. It's like checking off items on your to-do list just click, click, click, and you're good to go!
Basic
The basic multi select component lets you select multiple options from a list. It displays selected options with Tag components.
Installation
Min/Max
This component lets you set a minimum and maximum number of tags that can be selected. It displays selected tags with Tag components and logs each action.
Variant
By default, the multiple select component uses the primary variant. But it has a secondary variant as well.
Controlled
This component lets you select tags dynamically, updating the list with callbacks on add and remove. It displays selected tags with Tag components and logs each action.
Disabled
When the component is disabled, it prevents the user from adding or removing tags.
Props
Here's the fixed table:
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | - | The label of the tag field |
| description | string | - | The description of the tag field |
| placeholder | string | - | The placeholder of the tag field |
| min | number | - | The minimum number of tags that can be added |
| max | number | - | The maximum number of tags that can be added |
| className | string | - | The class name of the tag field |
| name | string | - | The name of the tag field |
| list | ListData | - | The list of tags |
| onItemInserted | (tag: TagItemProps) => void | - | The callback function when a tag is inserted |
| onItemCleared | (tag: TagItemProps) => void | - | The callback function when a tag is cleared |
| isDisabled | boolean | - | The disabled state of the tag field |
| intent | string | 'primary' | 'primary', 'secondary' |
| shape | string | 'square' | 'square', 'circle' |