選擇器

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 會傳遞到 root 元素。

Slots

若要瞭解如何自訂 slot，請查看覆寫元件結構指南。

Slot 名稱	類別名稱	預設元件	描述
root	.base-Option-root	`'li'`	呈現 root 的元件。

CSS 類別

這些類別名稱對於使用 CSS 設定樣式很有用。當觸發特定狀態時，它們會應用於元件的 slot。

類別名稱	描述
.base--disabled	如果 `disabled={true}`，則套用至 root `li` 元素的狀態類別。
.base--selected	如果 `selected={true}`，則套用至 root `li` 元素的狀態類別。
.base-Option-highlighted	如果 `highlighted={true}`，則套用至 root `li` 元素的狀態類別。

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 會傳遞到 root 元素。

Slots

若要瞭解如何自訂 slot，請查看覆寫元件結構指南。

Slot 名稱	類別名稱	預設元件	描述
root	.base-OptionGroup-root	`'li'`	呈現 root 的元件。
label	.base-OptionGroup-label	`'span'`	呈現 label 的元件。
list	.base-OptionGroup-list	`'ul'`	呈現 list 的元件。

CSS 類別

這些類別名稱對於使用 CSS 設定樣式很有用。當觸發特定狀態時，它們會應用於元件的 slot。

類別名稱	描述
.base--disabled	如果 `disabled={true}`，則套用至 root `li` 元素的狀態類別。

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	用於將選項 label 轉換為字串的函式。當 label 是元素且需要轉換為純文字時，此函式很有用，以便使用鍵盤上的字元鍵進行導航。
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 會傳遞到 root 元素。

Slots

若要瞭解如何自訂 slot，請查看覆寫元件結構指南。

Slot 名稱	類別名稱	預設元件	描述
root	.base-Select-root	`'button'`	呈現 root 的元件。
listbox	.base-Select-listbox	`'ul'`	呈現 listbox 的元件。
popup	.base-Select-popup	`'div'`	包裝 popup 的元件。

CSS 類別

這些類別名稱對於使用 CSS 設定樣式很有用。當觸發特定狀態時，它們會應用於元件的 slot。

類別名稱	描述
.base--active	如果 `active={true}`，則套用至 root `button` 元素的狀態類別。
.base--disabled	如果 `disabled={true}`，則套用至 root `button` 元素和 listbox 'ul' 元素的狀態類別。
.base--expanded	如果 `expanded={true}`，則套用至 root `button` 元素的狀態類別。
.base--focusVisible	如果 `focusVisible={true}`，則套用至 root `button` 元素的狀態類別。