Unstyled select

The select components let you create lists of options for users to choose from.

MUI Base offers two components to replace the native HTML <select> tag: SelectUnstyled and MultiSelectUnstyled.

SelectUnstyled

import SelectUnstyled from '@mui/base/SelectUnstyled';

Basic select

The SelectUnstyled component accepts generic props. Due to TypeScript limitations, this may cause unexpected behavior when wrapping the component in forwardRef (or other higher-order components). In such cases, the generic argument will be defaulted to unknown and type suggestions will be incomplete. To avoid this, you can manually cast the resulting component to the correct type:

const CustomSelect = React.forwardRef(function CustomSelect<TValue>(
  props: SelectUnstyledProps<TValue>,
  ref: React.ForwardedRef<HTMLUListElement>,
) {
  // ...your code here...
  return <SelectUnstyled {...props} ref={ref} />;
}) as <TValue>(
  props: SelectUnstyledProps<TValue> & React.RefAttributes<HTMLUListElement>,
) => JSX.Element;

For the sake of brevity, the rest of the demos that follow will not use forwardRef.

Controlled select

SelectUnstyled can be used as an uncontrolled (as shown in the demo above) or controlled component.

Selected value: 10

Object values

The SelectUnstyled component can be used with non-string values.

Selected character:

{
  "name": "Frodo",
  "race": "Hobbit"
}

Selected value appearance

You can customize the appearance of the selected value display by providing a function to the renderValue prop. The element returned by this function will be rendered inside the select's button.

Option appearance

Options don't have to be plain strings. You can include custom elements to be rendered inside the listbox.

Grouping options

Options can be grouped, similarly to the how the native select element works. Unlike the native select, however, groups can be nested.

Place the Option components inside OptionGroup to achieve this.

MultiSelectUnstyled

The MultiSelectUnstyled component lets your users select multiple options.

import { MultiSelectUnstyled } from '@mui/base/SelectUnstyled';

The useSelect hook

import { useSelect } from '@mui/base/SelectUnstyled';

You can use the useSelect hook to apply the functionality of the unstyled select components to a different component. This hook gives you the most customization options, but requires more work to implement. Using the hook allows you to take full control over the rendered components, their props and CSS classes.

The following example shows a select that opens when hovered over or focused. It can be controlled by a mouse/touch or a keyboard.