Multiselect Example

Choose the frameworks you are interested in.

Example with custom keyValue and keyLabel

Choose the programming languages you are proficient in.

How to use this multiselect

Props

Name	Type	Default	Description
asChild	boolean	false	Change the default rendered element for the one passed as a child, merging their props and behavior.
options *	{label: string value: string}[]	-	The options the user can choose in the multiselect.
defaultValue	string[]	-	The values already chosen in the multiselect.
disabled	boolean	false	Whether the user can interact with the field or not.
placeholder *	string	-	Text that appears in the form control when it has no value set.
variant *	enum (default \| inverted)	default	Badges appearance in the multiselect, for the selected items.
onValueChange *	(value: string[]) => void	-	Function triggered when a new value is selected, with all the selected values in param.
onInputChange	(value: string) => void	-	Function triggered when a new value is entered in the search form.
keyValue	string	"value"	The key to use for the value in the options array when using custom object structures.
keyLabel	string	"label"	The key to use for the label in the options array when using custom object structures.
noResultString	string	"No results found"	Text displayed when no options match the search criteria.

Playground

Should be used as a form field, inside a form.

Import from filigran-ui :

Import {MultiSelectFormField} from 'filigran-ui'


                <MultiSelectFormField
                  options={frameworksList}
                  defaultValue={field.value}
                  onValueChange={field.onChange}
                  placeholder="Select options"
                  variant="inverted"
                />