select-menu
v4.15.0arrow_drop_down
Selected can either be a string (single values) or an array of string (multiple values) NOTE: multiple values are not supported atm
| Name | Type | Default value | Description |
|---|---|---|---|
label | string | ||
style | any | ||
height | number | ||
onSelect | function | ||
onDeselect | function | ||
isHighlighted | bool | ||
isSelected | bool | ||
isSelectable | bool | ||
disabled | bool | ||
options | custom[] | [] | |
close | function | ||
height | number | ||
width | number | ||
isMultiSelect | bool | When true, multi select is accounted for. | |
selected | string[] | [] | This holds the values of the options |
onSelect | function | () => {} | |
onDeselect | function | () => {} | |
onFilterChange | function | () => {} | |
hasFilter | bool | ||
optionSize | number | 33 | |
renderItem | function | props => <Option {...props} /> | |
filterPlaceholder | string | 'Filter...' | |
filterIcon | string | 'search' | |
optionsFilter | function | ||
defaultSearchValue | string | '' | |
title | string | The title of the Select Menu. | |
width | number | 240 | The width of the Select Menu. |
height | number | 248 | The height of the Select Menu. |
options | custom[] | The options to show in the menu. [{ label: String, value: String | Number }] | |
onSelect | function | () => {} | Function that is called when an option is selected. |
onDeselect | function | () => {} | Function that is called when an option is deselected. |
selected | custom | The selected value/values. | |
isMultiSelect | bool | false | When true, multi select is accounted for. |
hasTitle | bool | When true, show the title. | |
hasFilter | bool | When true, show the filter. | |
filterPlaceholder | string | 'Filter...' | The placeholder of the search filter. |
filterIcon | string | 'search' | The icon of the search filter. |
onFilterChange | function | Function that is called as the onChange() event for the filter. | |
position | Position.TOP | Position.TOP_LEFT | Position.TOP_RIGHT | Position.BOTTOM | Position.BOTTOM_LEFT | Position.BOTTOM_RIGHT | Position.BOTTOM_LEFT | The position of the Select Menu. |
detailView | function | node | Can be a function that returns a node, or a node itself, that is rendered on the right side of the Select Menu to give additional information when an option is selected. | |
titleView | function | node | Can be a function that returns a node, or a node itself, that is rendered in the header section of the Select Menu to customize the header. | |
emptyView | function | node | Can be a function that returns a node, or a node itself, that is rendered instead of the options list when there are no options. | |
close | function | ||
title | string | ||
width | number | ||
height | number | ||
headerHeight | number | ||
options | custom[] | [] | |
hasTitle | bool | true | |
hasFilter | bool | true | |
filterPlaceholder | string | ||
filterIcon | string | ||
listProps | {} | ||
isMultiSelect | bool | When true, multi select is accounted for. | |
titleView | function | node | ({ close, title, headerHeight }) => (
<Pane
display="flex"
alignItems="center"
borderBottom="default"
padding={8}
height={headerHeight}
boxSizing="border-box"
>
<Pane flex="1" display="flex" alignItems="center">
<Heading size={400}>{title}</Heading>
</Pane>
<IconButton icon="cross" appearance="minimal" height={24} onClick={close} />
</Pane>
) | Node that is placed in the header section, above the options. |
detailView | node | Node that is placed right next to the options. | |
emptyView | node | Node that is displayed instead of options list when there are no options. | |
children | function |