Basic
The basic multi select component lets you select multiple options from a list. It displays selected options with Tag components.
Preview
Code
Apple
Banana
Installation
CLI
Manual
npx hq-kit add multi-select
Variant
By default, the multiple select component uses the primary variant. But it has a secondary variant as well.
Preview
Code
Apple
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.
Preview
Code
Disabled
When the component is disabled, it prevents the user from adding or removing tags.
Preview
Code
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' |