SelectInput
A control that allows the user to browse, search, and make a selection from a large list of values.Prop | Required | Description | Type |
|---|---|---|---|
items | ✅ | Array of items for the user to select from. | (Item | GroupBase<Item>)[] | Promise<(Item | GroupBase<Item>)[]> |
dangerouslyIgnoreLastPass | — | Adds data-lpignore to the SelectInput's <input /> element, to prevent LastPass from inserting an icon that currently renders weirdly due to the way the react-select is built. Use only if confident that users won't use LastPass with this particular form field. @link https://support.lastpass.com/help/how-do-i-prevent-fields-from-being-filled-automatically | boolean |
invalid | — | The current validity state of the input. | boolean |
isClearable | — | Whether the select value is clearable. | boolean |
menuOverride | — | Render a custom Menu component. | (props: MenuProps<Item, boolean, GroupBase<Item>>) => Element |
menuPlacement | — | Where to render the menu in relation to the input. Defaults to auto. | "auto" | "bottom" | "top" |
name | — | Name for label and form usage. | string |
required | — | Marks the select as required. | boolean |
size | — | The size of the input. Defaults to medium. | "small" | "medium" |
hideDropdownIndicator | — | Hide the dropdown indicator (chevron down icon) inside the input. | boolean |
icon | — | Puts the provided Icon component in the input. | ComponentClass<IconProps, any> | FunctionComponent<IconProps> |
filterOption | — | Custom filter logic. @see https://react-select.com/advanced#custom-filter-logic | (option: FilterOptionOption<unknown>, inputValue: string) => boolean |
isCreatable | — | Whether to allow creation of new options along with choosing existing options. | boolean |
isValidNewOption | — | Whether the creatable option should be displayed based on the current input value, select value and options. | (inputValue: string, value: Options<Item>, options: OptionsOrGroups<Item, GroupBase<Item>>, accessors: Accessors<Item>) => boolean |
disabled | — | Disables the input. | boolean |
getOptionLabel | — | Resolves option data to a string to be displayed as the label by components. | GetOptionLabel<Item> |
getOptionValue | — | Resolves option data to a string to compare options and specify value attributes. | GetOptionValue<Item> |
inputValue | — | The value of the input. | string |
isLoading | — | When true, shows a loading indicator in the dropdown instead of results. Use if awaiting async items before passing to component. | boolean |
itemOverride | — | Render items in the menu with a custom component. | (props: OptionProps<Item, boolean, GroupBase<Item>>) => Element |
itemOverrideCheckIcon | — | Display CheckIcon on selected item(s) when using itemOverride (CustomOption). | boolean |
onInputChange | — | Called whenever the input value changes. Use to filter the items. | (inputValue: string, actionMeta: InputActionMeta) => void |
onBlur | — | Called when the select input is blurred. | FocusEventHandler<HTMLInputElement> |
onFocus | — | Called when the select input is focused. | FocusEventHandler<HTMLInputElement> |
placeholder | — | The text that appears in the form control when it has no value set. | string |
value | — | The selected item. | Item | Item[] |
isMulti | — | Whether the select value is multi-selectable. | boolean |
onChangeMulti | — | Called when an item is selected. Use in conjunction with isMulti. | (value: Item[]) => void |
limit | — | Limit the items to be displayed when multi-selectable. | number |
onChange | — | Called when an item is selected. | (value: Item) => void |
ref | — | (instance: SelectInstance<Item>) => void | MutableRefObject<SelectInstance<Item>> |