Multiple Select
Multiple 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 multiple select component lets you select multiple options from a list. It displays selected options with Tag components.
Installation
If you hit any issues, make sure you check out the installation guide here.
Composed Components
When you plug this component from the CLI, it autoloads all the composed components. No need to toss 'em in one at a time.
The Multiple Select's decked out with several components to make it bangin'.
List Box
ListBox are designed to present and manage lists of options or data entries, allowing users to view and select from multiple choices efficiently.Field
Field's a core piece every other component uses. It flexes reusable styles, showing up in inputs, labels, descriptions, and more.Manual Installation
Sometimes, using the CLI is the way to go, so make sure you install the necessary dependencies for the components you want to use.
And next, you can copy the code below and paste it into your dopest component folder.
Anatomy
Import the components and use them as shown below, adapting the structure to fit each component.
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.
Intent
By default, the multiple select component uses the primary intent. But it has a secondary intent as well.
Shape
Customize the tag field’s shape using the shape prop.
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' |