选择器

Select 组件允许你创建选项列表供用户选择。

Option API

导入

import { Option } from '@mui/base/Option';
// or
import { Option } from '@mui/base';

阅读这篇关于最小化捆绑包大小的指南，了解两者之间的区别。

Props

原生组件的 Props 也可用。

名称	类型	默认值	描述
value*	any	-	选项的值。
disabled	bool	false	如果为 `true`，选项将被禁用。
label	string	-	选项内容的文本表示。用于键盘文本导航匹配。
slotProps	{ root?: func \| object }	{}	用于 Option 内部每个 slot 的 props。
slots	{ root?: elementType }	{}	用于 Option 内部每个 slot 的组件。可以是用于 HTML 元素的字符串或组件。有关更多详细信息，请参阅下面的 Slots API。

ref 被转发到根元素。

Slots

要了解如何自定义 slot，请查看 Overriding component structure 指南。

Slot 名称	类名	默认组件	描述
root	.base-Option-root	`'li'`	渲染根组件的组件。

CSS 类

这些类名对于使用 CSS 进行样式设置很有用。当特定状态被触发时，它们会被应用到组件的 slot 上。

类名	描述
.base--disabled	当 `disabled={true}` 时，应用于根 `li` 元素的 State 类。
.base--selected	当 `selected={true}` 时，应用于根 `li` 元素的 State 类。
.base-Option-highlighted	当 `highlighted={true}` 时，应用于根 `li` 元素的 State 类。

OptionGroup API

导入

import { OptionGroup } from '@mui/base/OptionGroup';
// or
import { OptionGroup } from '@mui/base';

阅读这篇关于最小化捆绑包大小的指南，了解两者之间的区别。

Props

原生组件的 Props 也可用。

名称	类型	默认值	描述
disabled	bool	false	如果为 `true`，则组中的所有选项都将被禁用。
label	node	-	组的人类可读描述。
slotProps	{ label?: func \| object, list?: func \| object, root?: func \| object }	{}	用于 OptionGroup 内部每个 slot 的 props。
slots	{ label?: elementType, list?: elementType, root?: elementType }	{}	用于 OptionGroup 内部每个 slot 的组件。可以是用于 HTML 元素的字符串或组件。有关更多详细信息，请参阅下面的 Slots API。

ref 被转发到根元素。

Slots

要了解如何自定义 slot，请查看 Overriding component structure 指南。

Slot 名称	类名	默认组件	描述
root	.base-OptionGroup-root	`'li'`	渲染根组件的组件。
label	.base-OptionGroup-label	`'span'`	渲染标签的组件。
list	.base-OptionGroup-list	`'ul'`	渲染列表的组件。

CSS 类

这些类名对于使用 CSS 进行样式设置很有用。当特定状态被触发时，它们会被应用到组件的 slot 上。

类名	描述
.base--disabled	当 `disabled={true}` 时，应用于根 `li` 元素的 State 类。

Select API

导入

import { Select } from '@mui/base/Select';
// or
import { Select } from '@mui/base';

阅读这篇关于最小化捆绑包大小的指南，了解两者之间的区别。

Props

原生组件的 Props 也可用。

名称	类型	默认值	描述
areOptionsEqual	func	-	用于确定两个选项的值是否相等的函数。默认情况下，使用引用相等性。使用 `areOptionsEqual` prop 会对性能产生影响（与选项数量成正比）。因此，建议尽可能使用默认的引用相等性比较。
autoComplete	string	-	此 prop 帮助用户更快地填写表单，尤其是在移动设备上。名称可能会令人困惑，因为它更像是自动填充。你可以按照规范了解更多信息。
autoFocus	bool	false	如果为 `true`，则在首次挂载期间 select 元素获得焦点
defaultListboxOpen	bool	false	如果为 `true`，则 select 将初始打开。
defaultValue	any	-	默认选定值。当组件不受控时使用。
disabled	bool	false	如果为 `true`，则 select 被禁用。
getOptionAsString	func	defaultOptionStringifier	用于将选项标签转换为字符串的函数。当标签是元素并且需要转换为纯文本以启用使用键盘上的字符键进行导航时，此函数很有用。
getSerializedValue	func	-	将当前选定值转换为字符串的函数。用于设置与 select 关联的隐藏输入的值，以便可以将选定值与表单一起发布。
listboxId	string	-	listbox 元素的 `id` 属性。
listboxOpen	bool	undefined	控制 select 的 listbox 的打开状态。
multiple	bool	false	如果为 `true`，则允许选择多个值。这会影响 `value`、`defaultValue` 和 `onChange` props 的类型。
name	string	-	元素的名称。例如，服务器使用它来识别表单提交中的字段。
onChange	func	-	当选项被选中时触发的回调。
onListboxOpenChange	func	-	当组件请求打开时触发的回调。在受控模式下使用（参见 listboxOpen）。
placeholder	node	-	当没有选定值时显示的文本。
renderValue	func	-	自定义选定值渲染的函数。
required	bool	false	如果为 `true`，则提交表单时 Select 不能为空。
slotProps	{ listbox?: func \| object, popup?: func \| object, root?: func \| object }	{}	用于 OptionGroup 内部每个 slot 的 props。
slots	{ listbox?: elementType, popup?: elementType, root?: elementType }	{}	用于 Select 内部每个 slot 的组件。可以是用于 HTML 元素的字符串或组件。有关更多详细信息，请参阅下面的 Slots API。
value	any	-	选定值。设置为 `null` 以取消选择所有选项。

ref 被转发到根元素。

Slots

要了解如何自定义 slot，请查看 Overriding component structure 指南。

Slot 名称	类名	默认组件	描述
root	.base-Select-root	`'button'`	渲染根组件的组件。
listbox	.base-Select-listbox	`'ul'`	渲染 listbox 的组件。
popup	.base-Select-popup	`'div'`	包裹 popup 的组件。

CSS 类

这些类名对于使用 CSS 进行样式设置很有用。当特定状态被触发时，它们会被应用到组件的 slot 上。

类名	描述
.base--active	当 `active={true}` 时，应用于根 `button` 元素的 State 类。
.base--disabled	应用于根 `button` 元素和 listbox 'ul' 元素的 State 类，如果 `disabled={true}`。
.base--expanded	当 `expanded={true}` 时，应用于根 `button` 元素的 State 类。
.base--focusVisible	当 `focusVisible={true}` 时，应用于根 `button` 元素的 State 类。