Pular para o conteúdo

NativeSelect API

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

Importação

import NativeSelect from '@mui/material/NativeSelect';
// ou
import { NativeSelect } from '@mui/material';
Você pode aprender sobre a diferença lendo este guia sobre como minimizar o tamanho do pacote.

An alternative to <Select native /> with a much smaller bundle size footprint.

Nome do componente

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

Propriedades

Propriedades do componente Input também estão disponíveis.

NomeTipoPadrãoDescrição
childrennode
The option elements to populate the select with. Can be some <option> elements.
classesobject{}
Sobrescreve ou extende os estilos aplicados para o componente. Veja a API CSS abaixo para maiores detalhes.
IconComponentelementTypeArrowDropDownIcon
The icon that displays the arrow.
inputelement<Input />
An Input element; does not have to be a material-ui specific Input.
inputPropsobject
Attributes applied to the select element.
onChangefunc
Callback fired when a menu item is selected.

Signature:
function(event: object) => void
event: The event source of the callback. You can pull out the new value by accessing event.target.value (string).
sxArray<func
| object
| bool>
| func
| object
The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.
valueany
The input value. The DOM API casts this to a string.
variant'filled'
| 'outlined'
| 'standard'
A variante a usar.

O ref é encaminhado para o elemento raiz.

Herança

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

CSS

Nome da regraClasse globalDescrição
root.MuiNativeSelect-rootEstilos aplicados ao elemento raiz.
select.MuiNativeSelect-selectEstilos aplicados a the select component `select` class.
multiple.MuiNativeSelect-multipleStyles applied to the select component if multiple={true}.
filled.MuiNativeSelect-filledEstilos aplicados para the select component se variant="filled".
outlined.MuiNativeSelect-outlinedEstilos aplicados para the select component se variant="outlined".
standard.MuiNativeSelect-standardEstilos aplicados para the select component se variant="standard".
disabled.Mui-disabledPseudo-class applied to the select component `disabled` class.
icon.MuiNativeSelect-iconEstilos aplicados a the icon component.
iconOpen.MuiNativeSelect-iconOpenEstilos aplicados para the icon component se the popup is open.
iconFilled.MuiNativeSelect-iconFilledEstilos aplicados para the icon component se variant="filled".
iconOutlined.MuiNativeSelect-iconOutlinedEstilos aplicados para the icon component se variant="outlined".
iconStandard.MuiNativeSelect-iconStandardEstilos aplicados para the icon component se variant="standard".
nativeInput.MuiNativeSelect-nativeInputEstilos aplicados a the underlying native input component.

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

Demonstrações