OverlaysSelect Menu
Select Menu
The single select is used for setting enumerable values when filtering data.
FilterMenuProps
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
inputValue | string | — | — | The value of the input. |
isLoading | boolean | — | — | Use the `isLoading` property when fetching options asynchronously. |
onInputChange | (
inputValue: string | undefined,
restChanges: Omit<
UseComboboxStateChange<Option | SelectAllItem>,
'inputValue'
>
) => void | Yes | — | Called whenever the input value changes. Use to filter the options. |
onIsOpenChange | (
changes: UseComboboxStateChange<Option | SelectAllItem>
) => void | — | — | Called whenever the dropdown opens or closes. |
placeholder | string | — | Filter... | The input's placeholder text. |
selectedValueThreshold | number | — | — | Show selected values count when value is greater than this value |
stateReducer | (
state: UseComboboxState<Option | SelectAllItem>,
actionAndChanges: UseComboboxStateChangeOptions<Option | SelectAllItem>
) => Partial<UseComboboxState<any>> | — | — | Called whenever internal state changes. Use for fine-grained control of component internals. |
Also accepts SelectMenuProps<Option> | ||||
SelectMenuProps
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
align | AlignTypeleft|right | — | left | Direction to align the menu dialog relative to the trigger element. |
footerOption | Option | — | — | The footer item that sticks at the bottom of all the options. |
id | string | — | — | — |
itemHeight | ItemHeight | — | DEFAULT_ITEM_HEIGHT | Provide the height, in pixels, of each item in the list. When items have variable heights, provide a function that returns the height for a given index. |
itemRenderer | (option: Option) => ReactElement | — | — | Control each item is rendered within the menu. |
itemToDisabled | (option: Option) => boolean | — | (item: Option) => { // @ts-ignore return Boolean(item.disabled); } | Determine if a given option should be disabled within the menu. |
itemToLabel | (option: Option) => string | — | (item: Option) => { // @ts-ignore return item.label; } | Map each option to its appropriate label. |
itemToSelectable | (option: Option) => boolean | — | — | Return false for rows in `options` that can't be chosen, such as group labels and dividers. |
itemToValue | (option: Option) => string | number | — | (item: Option) => { // @ts-ignore return item.value; } | Map each option to its appropriate value. |
menuLeftOffset | number | — | 0 | — |
menuWidth | number | — | — | Provide fixed width for the menu dialog for situations where menu items are clipped due to limited horizontal real estate. |
onChange | (value: Option) => void | Yes | — | Called when an option is selected. |
onClear | MouseEventHandler | — | — | Support a "clear" action in the **default** trigger button. |
options | Option[] | Yes | — | Array of options for the user to select from. |
selectedValueThreshold | number | — | — | Show selected values count when value is greater than this value |
trigger | ReactNode | Yes | — | The element to be rendered as the dialog trigger. |
Also accepts SelectionProps<Option>, ItemToLabel<Option>, ItemToValue<Option>, ModeProps | ||||