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

select

v3.9.2arrow_drop_down
v3.9.2
STATUS
Passing
DOWNLOADS
1,078
LICENSE
MIT
VISIBILITY
Public
PUBLISHED
7 months ago
SIZE
41 KB
Select components are used for collecting user provided information from a list of options.
1 contributor
Use select in your project ?
Copied
npm i @bit/mui-org.material-ui.select
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.dev
Component Example
React
React
Vue
Angular
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';
revert changes
reload
toggle layout
maximize
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
chevron_left
chevron_right
Properties
NameTypeDefault valueDescription
autoWidth
boolfalse

If true, the width of the popover will automatically be set according to the items inside the menu, otherwise it will be at least the width of the select input.

children
node

The option elements to populate the select with. Can be some MenuItem when native is false and option when native is true.

classes
object

Override or extend the styles applied to the component. See CSS API below for more details.

displayEmpty
boolfalse

If true, the selected item is displayed even if its value is empty. You can only use it when the native property is false (default).

IconComponent
customArrowDropDownIcon

The icon that displays the arrow.

input
element<Input />

An Input element; does not have to be a material-ui specific Input.

inputProps
object

Attributes applied to the input element. When native is true, the attributes are applied on the select element.

MenuProps
object

Properties applied to the Menu element.

multiple
boolfalse

If true, value must be an array and the menu will support multiple selections.

native
boolfalse

If true, the component will be using a native select element.

onChange
function

The event source of the callback. You can pull out the new value by accessing event.target.value.

onClose
function

The event source of the callback

onOpen
function

The event source of the callback

open
bool

Control select open state. You can only use it when the native property is false (default).

renderValue
function

The value provided to the component.

SelectDisplayProps
object

Properties applied to the clickable div element.

value
string | number | bool | object | string | number | bool | object[]

The input value. This property is required when the native property is false (default).

variant
'standard' | 'outlined' | 'filled'

The variant to use.

autoFocus
bool
autoWidth
bool

If true, the width of the popover will automatically be set according to the items inside the menu, otherwise it will be at least the width of the select input.

children
node

The option elements to populate the select with. Can be some <MenuItem> elements.

classes
object

Override or extend the styles applied to the component. See CSS API below for more details.

className
string

The CSS class name of the select element.

disabled
bool

If true, the select will be disabled.

displayEmpty
bool

If true, the selected item is displayed even if its value is empty.

IconComponent
custom

The icon that displays the arrow.

inputRef
function | object

Use that property to pass a ref callback to the native select element.

MenuProps
object

Properties applied to the Menu element.

multiple
bool

If true, value must be an array and the menu will support multiple selections.

name
string

Name attribute of the select or hidden input element.

onBlur
function
onChange
function

The event source of the callback. You can pull out the new value by accessing event.target.value.

onClose
function

The event source of the callback

onFocus
function
onOpen
function

The event source of the callback

open
bool

Control select open state.

readOnly
bool
renderValue
function

The value provided to the component.

required
bool
SelectDisplayProps
object

Properties applied to the clickable div element.

tabIndex
number | string
type
string
value
string | number | bool | object | string | number | bool | object[]

The input value.

variant
'standard' | 'outlined' | 'filled'

The variant to use.