Start sharing components as a team!Share components as a team!Join Bit to build your applications faster.Get Started Free

select-menu

v4.15.0arrow_drop_down
v4.15.0
STATUS
Passing
DOWNLOADS
97
LICENSE
MIT
VISIBILITY
Public
PUBLISHED
A year ago
SIZE
224 KB
The SelectMenu component is an advanced interaction pattern which allows selection of multiple items from a dropdown list. It can be used as a substitute for the native multiple select element.
1 contributor
Install select-menu as a package?
Copied
npm i @bit/segmentio.evergreen.select-menu
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.dev
Component Example
React
React
Vue
Angular
React Native
Add dependency... help_outline
Just
import
any of the 1 million components
and packages in Bit or NPM to the example.
import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';
toggle layout
modifieddraft
modifieddraft
modifieddraft
modifieddraft
	<div style={{ height: 300 }}>
		<Component initialState={{ selected: null }}>
			{({ setState, state }) => (
				<Pane>
					<Pane marginBottom={8}>
						<Text>Filter value: {state.filter}</Text>
					</Pane>
					<SelectMenu
						title="Select name"
						onFilterChange={filter => setState({ filter })}
						options={
							['Apple', 'Apricot', 'Banana', 'Cherry', 'Cucumber']
								.map(label => ({ label, value: label }))
						}
						selected={state.selected}
modifieddraft
	<div style={{ height: 300 }}>
		<Component initialState={{ selected: null }}>
  {({ setState, state }) => (
    <Pane>
    <SelectMenu
      title="Select Option"
      options={
        [{ label: "Disabled", value: "disabled", disabled: true }, { label: "Not Disabled", value: "not-disabled" }]
      }
      selected={state.selected}
      onSelect={item => setState({ selected: item.value })}
    >
      <Button>{state.selected || 'Select name...'}</Button>
    </SelectMenu>
    </Pane>
modifieddraft
	<div style={{ height: 300 }}>
		<Component initialState={{ selected: null }}>
			{({ setState, state }) => (
				<Pane>
					<SelectMenu
						title="Select Option"
						tooltipContent="Choose one of the options below."
						titleView={({ close, title, headerHeight }) => {
							return (
								<Pane
									display="flex"
									alignItems="center"
									borderBottom="default"
									padding={8}
									height={headerHeight}
modifieddraft
	<div style={{ height: 300 }}>
		<Component initialState={{ selected: null }}>
			{({ setState, state }) => (
				<SelectMenu
					title="Select name"
					options={
						['Comedy', 'Drama', 'Fantasy', 'Family', 'Action']
							.map(label => ({ label, value: label }))
					}
					selected={state.selected}
					onSelect={item => setState({ selected: item.value })}
					filterPlaceholder={"Choose a genre"}
					filterIcon={"film"}
				>
					<Button>{state.selected || 'Select name...'}</Button>
modifieddraft
chevron_left
chevron_right

Selected can either be a string (single values) or an array of string (multiple values) NOTE: multiple values are not supported atm

Properties
NameTypeDefault valueDescription
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
number33
renderItem
functionprops => <Option {...props} />
filterPlaceholder
string'Filter...'
filterIcon
string'search'
optionsFilter
function
defaultSearchValue
string''
title
string

The title of the Select Menu.

width
number240

The width of the Select Menu.

height
number248

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
boolfalse

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_RIGHTPosition.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
booltrue
hasFilter
booltrue
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