Select
Select
component allows user to search for and pick an option from the given data.Basic usage
data
options that the user can choose from.tsxCopied1<Select id="selectCat" data={["Cat1", "Cat2", "Cat3"]} placeholder="Select a cat" />
data
can be a list of strings, numbers, or SelectItem
s.SelectItem
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<Select id="selectCat" task="list_cat_breeds" placeholder="Select a cat" />
Customizing data
outputTransform
to convert
the output. This prop is a function that receives the Select data and returns new data. For example,
a SQL task may return two columns, name
and breed
. If we want to build a Select component that
allows the user to select from just the name
column, we can do the following.tsxCopied1<Select2id="selectCat"3task="list_cats_sql"4outputTransform={(cats) => cats.Q1.map((cat) => cat.name)}5placeholder="Select a cat"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<Select2id="selectCat"3task="list_cat_breeds"4outputTransform={(catBreeds) =>5catBreeds.map((breed) => ({ label: breed.toUpperCase(), value: breed }))6}7placeholder="Select a cat breed"8/>
Different label and value
value
and label
instead of a string.tsxCopied1<Select2id="selectCat"3data={[4{ label: "Bootz", value: "Cat1" },5{ label: "Hazel", value: "Cat2" },6{ label: "Baosky", value: "Cat3" },7]}8placeholder="Select a cat"9/>
Disabling
defaultDisabled
.tsxCopied1<Select2id="selectCat"3data={["Cat1", "Cat2", "Cat3"]}4placeholder="Select a cat"5defaultDisabled6/>
disabled: true
on the option.tsxCopied1<Select2id="selectCat"3data={[4{ label: "Bootz", value: "Cat1", disabled: true },5{ label: "Hazel", value: "Cat2" },6{ label: "Baosky", value: "Cat3", disabled: true },7]}8placeholder="Select a cat"9/>
Grouping
group
prop on each option.tsxCopied1<Select2data={[3{ value: "Bootz", label: "Bootz", group: "Cat" },4{ value: "Hazel", label: "Hazel", group: "Cat" },5{ value: "Max", label: "Max", group: "Dog" },6]}7placeholder="Select a pet"8/>
Component API
The component with which the item is rendered.
Allow deselecting items on click.
Whether to automatically focus on the select input.
Allows clearing the selected item when true.
The data, or options, to display in the select.
Initial disabled state of the select.
Initial value of the select.
Select description, displayed below the select input. Can be a string or a React component.
Select disabled state. Prefer to use defaultDisabled and component state to disable a select.
Displays error message after the select input. Can be a string or a React component.
Custom function that filters the select 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.
Select label, displayed before the select input. Can be a string or a React component.
Renders a loading indicator when true.
Nothing found label. Can be a string or a React component.
Callback on select value change.
Callback to transform the task output.
Text shown when nothing is selected.
The border-radius of the select element.
If true, the select component is read only.
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
.
The refetchInterval
prop represents how often (in milliseconds) the task query should be rerun to refetch data automatically.
The onSuccess
and onError
callbacks will run on task success or failure.
The executeOnMount
(true by default), executeOnReconnect
(true by default), and executeOnWindowFocus
(false by default) params control when the task is (re)run - on component mount, when the window is (re)focused, and if the network reconnects.
If true, the select component is rendered without any styling applied. The select dropdown is transparant and no padding is applied.
A single function or an array of functions that validate the input value.
Controlled value of the select. Prefer to use defaultValue and component state.
If true, the select dropdown is rendered in a React portal. Use this if the select is in a table or dialog and is cut off by its parent container.
State API
Whether the select is disabled
Sets the disabled value of the select. If the disabled
value is not provided, the select will be disabled
Sets the value of the select. Set the value as undefined
to clear the selection
The selected value