select

v4.9.10

v4.5.2

v3.9.2

STATUS

Passing

DOWNLOADS

38,351

LICENSE

MIT

VISIBILITY

Public

PUBLISHED

4 years ago

SIZE

47 KB

Select components are used for collecting user provided information from a list of options.

Boolean

Informational Components

Popover

React

UI Components

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.cloud

Component Example

React

Vue

Angular

React Native

Add dependency...

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';

modifieddraft

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.

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.

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

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

The icon that displays the arrow.

The id of the wrapper element or the select elment when native.

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

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

See OutlinedInput#label

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

See OutlinedInput#label

Props applied to the Menu element.

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

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

Callback function fired when a menu item is selected.

Callback fired when the component requests to be closed. Use in controlled mode (see open).

Callback fired when the component requests to be opened. Use in controlled mode (see open).

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

Render the selected value. You can only use it when the native prop is false (default).

Props applied to the clickable div element.

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.

The variant to use.

Demos:

Selects

API:

Select API
inherits Input API

Properties

Name	Type	Description
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	`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`	The `id` of the wrapper element or the `select` elment when `native`.
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.
label	`node`	See OutlinedInput#label
labelId	`string`	The ID of an element that acts as an additional label. The Select will be labelled by the additional label and the selected value.
labelWidth	`number`	See OutlinedInput#label
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	`'filled' \| 'outlined' \| 'standard'`	The variant to use.
aria-label	`string`
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 ID 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.