选择
Select 组件用于从选项列表中收集用户提供的信息。
基础选择
菜单位于其触发元素下方，除非它们靠近视口底部。
高级特性
Select 组件旨在与原生 <select> 元素互换使用。
如果您正在寻找更高级的功能，例如组合框、多选、自动完成、异步或可创建的支持，请前往 Autocomplete 组件。它旨在成为 "react-select" 和 "downshift" 包的改进版本。
属性
Select 组件被实现为 InputBase 的自定义 <input> 元素。它扩展了 文本框组件 的子组件，即 OutlinedInput、Input 或 FilledInput，具体取决于所选的变体。它共享相同的样式和许多相同的属性。有关详细信息，请参阅相应组件的 API 页面。
填充和标准变体
带标签 + 辅助文本
无标签
禁用
错误
只读
必填
原生选择
由于使用平台的原生选择器可以在移动设备上改善用户体验，因此我们允许这种模式。
文本框
TextField 包装组件是一个完整的表单控件，包括标签、输入和帮助文本。您可以在 此部分 找到选择模式的示例。
自定义
这里有一些自定义组件的示例。您可以在 覆盖文档页面 中了解更多信息。
第一步是设置 InputBase 组件的样式。一旦设置了样式，您可以直接将其用作文本框，或者将其提供给 select input 属性以获得 select 字段。请注意，"standard" 变体更容易自定义，因为它不会将内容包装在 fieldset/legend 标记中。
🎨 如果您正在寻找灵感，可以查看 MUI Treasury 的自定义示例。
多选
Select 组件可以处理多项选择。它通过 multiple 属性启用。
与单项选择一样，您可以通过访问 onChange 回调中的 event.target.value 来提取新值。它始终是一个数组。
默认
控制打开状态
您可以使用 open 属性控制 select 的打开状态。或者，也可以使用 defaultOpen 属性设置组件的初始（非受控）打开状态。
使用对话框
虽然 Material Design 指南不鼓励这样做，但您可以在对话框内使用选择框。
分组
使用 ListSubheader 组件或原生 <optgroup> 元素显示类别。
无障碍
为了正确标记您的 Select 输入，您需要一个额外的元素，其 id 包含一个标签。该 id 需要与 Select 的 labelId 匹配，例如
<InputLabel id="label">Age</InputLabel>
<Select labelId="label" id="select" value="20">
<MenuItem value="10">Ten</MenuItem>
<MenuItem value="20">Twenty</MenuItem>
</Select>
或者，带有 id 和 label 的 TextField 会为您创建正确的标记和 id
<TextField id="select" label="Age" value="20" select>
<MenuItem value="10">Ten</MenuItem>
<MenuItem value="20">Twenty</MenuItem>
</TextField>
对于 原生选择，您应该通过将 select 元素的 id 属性值赋予 InputLabel 的 htmlFor 属性来提及标签
<InputLabel htmlFor="select">Age</InputLabel>
<NativeSelect id="select">
<option value="10">Ten</option>
<option value="20">Twenty</option>
</NativeSelect>
无样式
使用 Base UI Select 完全掌控组件的设计，无需覆盖 Material UI 或 Joy UI 样式。此无样式版本的组件是进行重度自定义和缩小包大小的理想选择。