MultiSelect
MultiSelect
component allows user to search for and pick multiple options from the given data.Basic usage
data
options that the user can choose from.tsxCopied1<MultiSelect id="selectCats" data={["Cat1", "Cat2", "Cat3"]} placeholder="Select cats" />
data
can be a list of strings, numbers, or MultiSelectItem
s.MultiSelectItem
has the form
{ value: string | number, label?: string, group?: string, disabled?: boolean }
. Use this when you
want to have a different label and value, when you want to group
elements, or when you want to disable individual options.Task backed
task
prop to call an Airplane task. As long as the task output
matches the type of data
, the data options are automatically inferred from the output.tsxCopied1<MultiSelect id="selectCats" task="list_cat_breeds" placeholder="Select cats" />
Customizing data
outputTransform
to convert the output. This prop is a function that receives the multi select data and returns new
data. For example, a SQL task may return two columns, name
and breed
. If we want to build a
multi select component that allows the user to select from just the name
column, we can do the
following.tsxCopied1<MultiSelect2id="selectCats"3task="list_cats_sql"4outputTransform={(v) => v.Q1.map((cat) => cat.name)}5placeholder="Select cats"6/>
outputTransform
can also be used to modify the data for customization purposes, perhaps to
capitalize the cat breed's name as the label but keep the original name as the value.tsxCopied1<MultiSelect2id="selectCats"3task="list_cat_breeds"4placeholder="Select cat breeds"5outputTransform={(catBreeds) =>6catBreeds.map((breed) => ({ label: breed.toUpperCase(), value: breed }))7}8/>
Different label and value
value
and label
instead of a string.tsxCopied1<MultiSelect2id="selectCats"3data={[4{ label: "Bootz", value: "Cat1" },5{ label: "Hazel", value: "Cat2" },6{ label: "Baosky", value: "Cat3" },7]}8placeholder="Select cats"9/>
Disabling
defaultDisabled
.tsxCopied1<MultiSelect2id="selectCats"3data={["Cat1", "Cat2", "Cat3"]}4placeholder="Select cats"5defaultDisabled6/>
disabled: true
on the option.tsxCopied1<MultiSelect2id="selectCats"3data={[4{ label: "Bootz", value: "Cat1", disabled: true },5{ label: "Hazel", value: "Cat2" },6{ label: "Baosky", value: "Cat3", disabled: true },7]}8placeholder="Select cats"9/>
Grouping
group
prop on each option.tsxCopied1<MultiSelect2data={[3{ value: "Bootz", label: "Bootz", group: "Cat" },4{ value: "Hazel", label: "Hazel", group: "Cat" },5{ value: "Max", label: "Max", group: "Dog" },6]}7placeholder="Select pets"8/>
Component API
Whether to automatically focus on the multiselect input.
Allows clearing the selected items when true.
The data, or options, to display in the multiselect.
Initial disabled state of the multiselect.
Initial value of the multiselect.
Multiselect description, displayed below the multiselect input. Can be a string or a React component.
Select disabled state. Prefer to use defaultDisabled and component state to disable a multiselect.
Displays error message after the multiselect input. Can be a string or a React component.
Custom function that filters the multiselect options in the dropdown. Defaults to a substring filter.
If true, the element will grow to fill available space.
This prop works only if the element is a direct child of a Stack.
The ID referenced by the global component state.
Initial dropdown opened state.
The component with which the item is rendered.
Multiselect label, displayed before the multiselect input. Can be a string or a React component.
Renders a loading indicator when true.
If set, limits the maximum number of search options to show in the dropdown.
If set, limits the maximum number of selected values.
Nothing found label. Can be a string or a React component.
Callback on multiselect value change.
Callback to transform the task output.
Text shown when nothing is selected.
The border-radius of the multiselect element.
Adds red asterisk on the right side of label and sets required on input element
Allows searching when true.
Select size.
The task query to execute when this component loads. The component's data will be populated by the task's output and loading and error states will be handled automatically.
If the task doesn't require any parameters or special options, you can just pass the task slug (task="my_task"
) or an AirplaneFunc
—the return value of airplane.task()
(task={myTask}
).
If the task does require parameters or special options, pass the task as an object. If you are using a slug, specify the slug
prop to pass the task configuration as a SlugQuery
. If you are using an AirplaneFunc
, specify the fn
prop to pass the task configuration as a FunctionQuery
.
A single function or an array of functions that validate the input value.
Controlled value of the multiselect. Prefer to use defaultValue and component state.
If true, the multiselect dropdown is rendered in a React portal. Use this if the multiselect is in a table or dialog and is cut off by its parent container.
State API
Whether the multi-select is disabled
Sets the disabled value of the multi-select. If the disabled
value is not provided, the multi-select will be disabled
Sets the values of the multi-select.
The selected values