Select API

Documentação da API para o componente React Select . Aprenda sobre as propriedades disponíveis e a API CSS.

Importação

import Select from '@mui/material/Select';
// ou
import { Select } from '@mui/material';

Você pode aprender sobre a diferença lendo este guia sobre como minimizar o tamanho do pacote.

Nome do componente

The name MuiSelect can be used when providing default props or style overrides in the theme.

Propriedades

Props of the OutlinedInput component are also available.

Nome	Tipo	Padrão	Descrição
autoWidth	bool	false	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	{}	Sobrescreve ou extende os estilos aplicados para o componente. Veja a API CSS abaixo para maiores detalhes.
defaultValue	any		The default input value. Use when the component is not controlled.
displayEmpty	bool	false	If `true`, a value is displayed even if no items are selected. In order to display a meaningful value, a function can be passed to the `renderValue` prop which returns the value to be displayed when no items are selected. ⚠️ When using this prop, make sure the label doesn't overlap with the empty displayed value. The label should either be hidden or forced to a shrunk state.
IconComponent	elementType	ArrowDropDownIcon	The icon that displays the arrow.
id	string		The `id` of the wrapper element or the `select` element 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.
MenuProps	object		Props applied to the `Menu` element.
multiple	bool	false	If `true`, `value` must be an array and the menu will support multiple selections.
native	bool	false	If `true`, the component uses a native `select` element.
onChange	func		Callback 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). Warning: This is a generic event not a change event. child: The react element that was selected when `native` is `false` (default).
onClose	func		Callback fired when the component requests to be closed. Use in controlled mode (see open). Signature: `function(event: object) => void` event: The event source of the callback.
onOpen	func		Callback fired when the component requests to be opened. Use in controlled mode (see open). Signature: `function(event: object) => void` event: The event source of the callback.
open	bool	false	Control `select` open state. You can only use it when the `native` prop is `false` (default).
renderValue	func		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.
SelectDisplayProps	object		Props applied to the clickable div element.
sx	func \| object		The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.
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'	'outlined'	A variante a usar.

O ref é encaminhado para o elemento raiz.

Herança

Embora não explicitamente documentado acima, as propriedades do componente OutlinedInput também estão disponíveis em Select. Você pode tirar vantagem disso para manipular componentes aninhados.

CSS

Nome da regra	Classe global	Descrição
root	.MuiSelect-root	Estilos aplicados ao elemento raiz.
select	.MuiSelect-select	Estilos aplicados a the select component `select` class.
filled	.MuiSelect-filled	Estilos aplicados para the select component se `variant="filled"`.
outlined	.MuiSelect-outlined	Estilos aplicados para the select component se `variant="outlined"`.
standard	.MuiSelect-standard	Estilos aplicados para the select component se `variant="standard"`.
disabled	.Mui-disabled	Pseudo-class applied to the select component `disabled` class.
icon	.MuiSelect-icon	Estilos aplicados a the icon component.
iconOpen	.MuiSelect-iconOpen	Estilos aplicados para the icon component se the popup is open.
iconFilled	.MuiSelect-iconFilled	Estilos aplicados para the icon component se `variant="filled"`.
iconOutlined	.MuiSelect-iconOutlined	Estilos aplicados para the icon component se `variant="outlined"`.
iconStandard	.MuiSelect-iconStandard	Estilos aplicados para the icon component se `variant="standard"`.
nativeInput	.MuiSelect-nativeInput	Estilos aplicados a the underlying native input component.

Você pode sobrescrever o estilo do componente usando uma dessas opções de customização:

With a global class name.
With a rule name as part of the component's styleOverrides property in a custom theme.

Demonstrações

Selects