Multi Select

import MultiSelect from 'frui/field/MultiSelect';

Copy

Props

MultiSelect accepts the following props:

Name	Type	Required	Notes
className	string	No	Standard HTML class names
options	string[]	Yes	An array of strings
custom	boolean	No	Allow users to add custom options.
searchable	boolean	No	Allow users to search for options.
name	string	No	Used for react server components.
placeholder	string	No	Placeholder text to be displayed.
style	CSS Object	No	Standard CSS object

Styles

The styles for the MultiSelect component are defined instyles/fields/multiselect.css. You can customize the styles by overriding the CSS classes.

.frui-field-multiselect /* Container for the entire MultiSelect component */
                            .frui-field-multiselect-control /* Area displaying tags or placeholder */
                            .frui-field-multiselect-placeholder /* Placeholder text when no tags are selected */
                            .frui-field-multiselect-tag /* Individual selected tag */
                            .frui-field-multiselect-tag-remove /* Button to remove a tag */
                            .frui-field-multiselect-dropdown /* Dropdown menu container */
                            .frui-field-multiselect-search /* Search input container in dropdown */
                            .frui-field-multiselect-search-control /* Search input field */
                            .frui-field-multiselect-options /* List of available options */
                            .frui-field-multiselect-option /* Individual option in dropdown */
                            // ...

Copy

Basic

The MultiSelect component allows users to select multiple options from a dropdown. It supports search functionality and custom options.

<MultiSelect options={['Option 1', 'Option 2', 'Option 3']} name="options" />

Copy

Searchable

You can enable the searchable prop to allow users to search for options.

<MultiSelect options={['Option 1', 'Option 2', 'Option 3']} searchable name="options" />

Copy

Custom Options

You can enable the custom prop to allow users to add their own options. Press 'Enter' or 'Tab' to add a custom option.

<MultiSelect options={['Option 1', 'Option 2', 'Option 3']} custom />

Copy

Metadata

Number