Bain Logo

Select

Jump to Props

Collect user-provided information from a list of options.

Default

Jazz 🎼

Native Option

Disabled

Trumpet 🎺

Multiple selections

Regions

Choose Regions

Props

You can pass most select props to the element via the inputProps prop. See MUI docs. The props below are mainly presentational.

Select Props

  • Props
  • Styled Functions
PropTypeDefaultDescription
inputPropsobject

An object of props to be passed onto the underlying `select` component.

selectedItemBgstring

Background color of the selected item.

selectedItemColorstring

Text color of the selected item.

borderColorHoverstring

Color of the border when user hovers.

borderRadiusstring | number | array

Set the border radius (check with design first).

borderColorActivestring

Color of the border when active.

disabledboolean

Disable the input field.

disabledBgColorstring

Background color of the element when disabled.

disabledOpacitynumber

Opacity of the field when disabled. Between 0 and 1.

disabledBorderColorstring

Border color of the element when disabled.

displayEmptyboolean

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

fullWidthboolean

Make the component fill the width of its container.

inputRefReact ref

When needed, the ref can be passed to the input field.

isNativeboolean

Set to true if you wish to use the browser-native select dropdown

multipleboolean

Allow the user to select multiple options, keeping the dropdown open until they click away.

onChangefunction

Callback function fired when a menu item is selected. Signature: `function(event: object, child?: object) => void` event: The event source of the callback. You can pull out the new value by accessing event.target.value (any). child: The react element that was selected when native is false (default).

renderValuefunction

Render the selected value. You can only use it when the native prop is false (default).Signature: `function(value: any) => ReactNode` value: The value provided to the component.

valueany

The input value. 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.

SelectMenuItem Props

PropTypeDefaultDescription
autoFocusboolean

Whether or not to autofocus

childrennode

Contents of the item

disabledboolean

If true, the item is disabled

onClickfunction

Handler for when the user clicks an item.

selectedboolean

If item is selected

selectedItemColorstring

Color of text when selected

selectedItemBgstring

Bg color of selected item.

valuestring | number

Value of element

© 2021, Made with ❤️
by ADAPT @ Bain & Company
Privacy Policy