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

select

v4.5.2arrow_drop_down
v4.5.2
v3.9.2
STATUS
Passing
DOWNLOADS
1,334
LICENSE
MIT
VISIBILITY
Public
PUBLISHED
3 months ago
SIZE
42 KB
Select components are used for collecting user provided information from a list of options.
2 contributors
Install select as a package?
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
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
modifieddraft
modifieddraft
modifieddraft
chevron_left
chevron_right
Properties
NameTypeDescription
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 when native is false and option when native is true.

⚠️The MenuItem elements must be direct descendants when native is false.

classes
(required)
object

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

defaultValue
any

The default element value. Use when the component is not controlled.

displayEmpty
bool

If true, a value is displayed even if no items are selected.

In order to display a meaningful value, a function should be passed to the renderValue prop which returns the value to be displayed when no items are selected. You can only use it when the native prop is false (default).

IconComponent
elementType

The icon that displays the arrow.

id
string
input
element

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.

labelId
string

The idea of an element that acts as an additional label. The Select will be labelled by the additional label and the selected value.

labelWidth
number

The label width to be used on OutlinedInput. This prop is required when the variant prop is outlined.

MenuProps
object

Props applied to the Menu element.

multiple
bool

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

native
bool

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 (any).

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 prop is false (default).

renderValue
function

The value provided to the component.

SelectDisplayProps
object

Props applied to the clickable div element.

value
any

The input value. Providing an empty string will select no options. This prop is required when the native prop is false (default). Set to an empty string '' if you don’t want any of the available options to be selected.

If the value is an object it must have reference equality with the option in order to be selected. If the value is not an object, the string representation must match with the string representation of the option in order to be selected.

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
(required)
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.

defaultValue
any

The default element value. Use when the component is not controlled.

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
(required)
elementType

The icon that displays the arrow.

inputRef
custom

Imperative handle implementing { value: T, node: HTMLElement, focus(): void } Equivalent to ref

labelId
string

The idea of an element that acts as an additional label. The Select will be labelled by the additional label and the selected value.

MenuProps
object

Props 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 (any).

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

Props applied to the clickable div element.

tabIndex
number | string
type
any
value
any

The input value.

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

The variant to use.