選擇

選擇元件用於從選項列表中收集使用者提供的資訊。

基本選擇

選單會定位在其發射元素下方，除非它們靠近視窗底部。

年齡

<FormControl fullWidth>
  <InputLabel id="demo-simple-select-label">Age</InputLabel>
  <Select
    labelId="demo-simple-select-label"
    id="demo-simple-select"
    value={age}
    label="Age"
    onChange={handleChange}
  >
    <MenuItem value={10}>Ten</MenuItem>
    <MenuItem value={20}>Twenty</MenuItem>
    <MenuItem value={30}>Thirty</MenuItem>
  </Select>
</FormControl>

<FormControl fullWidth>
  <InputLabel id="demo-simple-select-label">Age</InputLabel>
  <Select
    labelId="demo-simple-select-label"
    id="demo-simple-select"
    value={age}
    label="Age"
    onChange={handleChange}
  >
    <MenuItem value={10}>Ten</MenuItem>
    <MenuItem value={20}>Twenty</MenuItem>
    <MenuItem value={30}>Thirty</MenuItem>
  </Select>
</FormControl>

按下 Enter 鍵開始編輯

進階功能

Select 元件旨在與原生 <select> 元素互換使用。

如果您正在尋找更進階的功能，例如複合式選取方塊、多選、自動完成、非同步或可建立的支援，請前往 Autocomplete 元件。它旨在成為 'react-select' 和 'downshift' 套件的改良版本。

Props (屬性)

Select 元件實作為 InputBase 的自訂 <input> 元素。它擴展了文字欄位元件的子元件，根據所選變體，可以是 OutlinedInput、Input 或 FilledInput。它共用相同的樣式和許多相同的 props (屬性)。詳細資訊請參閱各元件的 API 頁面。

填滿和標準變體

年齡

標籤和輔助文字

年齡

帶有標籤 + 輔助文字

不帶標籤

自動寬度

年齡

小尺寸

年齡

其他 props (屬性)

年齡

已停用

年齡

錯誤

年齡

唯讀

年齡

必填

原生選擇

由於在行動裝置上使用平台原生選擇可以改善使用者體驗，因此我們允許這種模式。

年齡

<FormControl fullWidth>
  <InputLabel variant="standard" htmlFor="uncontrolled-native">
    Age
  </InputLabel>
  <NativeSelect
    defaultValue={30}
    inputProps={{
      name: 'age',
      id: 'uncontrolled-native',
    }}
  >
    <option value={10}>Ten</option>
    <option value={20}>Twenty</option>
    <option value={30}>Thirty</option>
  </NativeSelect>
</FormControl>

<FormControl fullWidth>
  <InputLabel variant="standard" htmlFor="uncontrolled-native">
    Age
  </InputLabel>
  <NativeSelect
    defaultValue={30}
    inputProps={{
      name: 'age',
      id: 'uncontrolled-native',
    }}
  >
    <option value={10}>Ten</option>
    <option value={20}>Twenty</option>
    <option value={30}>Thirty</option>
  </NativeSelect>
</FormControl>

按下 Enter 鍵開始編輯

TextField

TextField 包裝函式元件是一個完整的表單控制項，包含標籤、輸入和輔助文字。您可以在本節中找到選擇模式的範例。

客製化

以下是一些客製化元件的範例。您可以在覆寫文件頁面中瞭解更多相關資訊。

第一步是設定 InputBase 元件的樣式。設定樣式後，您可以直接將其用作文字欄位，或將其提供給 select input prop (屬性) 以擁有 select 欄位。請注意，'standard' 變體更容易客製化，因為它不會將內容包裝在 fieldset/legend 標記中。

年齡

🎨 如果您正在尋找靈感，可以查看 MUI Treasury 的客製化範例。

多重選擇

Select 元件可以處理多重選擇。它透過 multiple prop (屬性) 啟用。

與單一選擇一樣，您可以透過存取 onChange 回呼中的 event.target.value 來提取新值。它始終是一個陣列。

預設

名稱

核取記號

標籤

晶片

預留位置

原生

控制開啟狀態

您可以使用 open prop (屬性) 控制選擇的開啟狀態。或者，也可以使用 defaultOpen prop (屬性) 設定元件的初始 (非受控) 開啟狀態。

年齡

使用對話框

雖然 Material Design 指南不建議這樣做，但您可以在對話框內使用選擇。

分組

使用 ListSubheader 元件或原生 <optgroup> 元素顯示類別。

分組

如果您希望將 ListSubheader 包裝在自訂元件中，則必須對其進行註解，以便 Material UI 可以在判斷可聚焦元素時正確處理它。

您有兩個選項可以解決此問題：選項 1：在您的元件函式上定義一個名為 muiSkipListHighlight 的靜態布林欄位，並將其設定為 true

function MyListSubheader(props: ListSubheaderProps) {
  return <ListSubheader {...props} />;
}

MyListSubheader.muiSkipListHighlight = true;
export default MyListSubheader;

// elsewhere:

return (
  <Select>
    <MyListSubheader>Group 1</MyListSubheader>
    <MenuItem value={1}>Option 1</MenuItem>
    <MenuItem value={2}>Option 2</MenuItem>
    <MyListSubheader>Group 2</MyListSubheader>
    <MenuItem value={3}>Option 3</MenuItem>
    <MenuItem value={4}>Option 4</MenuItem>
    {/* ... */}
  </Select>

選項 2：在您的元件的每個實例上放置 muiSkipListHighlight prop (屬性)。該 prop (屬性) 不必轉發到 ListSubheader，也不必存在於底層 DOM 元素中。它只需要放置在用作子標題的元件上即可。

export default function MyListSubheader(
  props: ListSubheaderProps & { muiSkipListHighlight: boolean },
) {
  const { muiSkipListHighlight, ...other } = props;
  return <ListSubheader {...other} />;
}

// elsewhere:

return (
  <Select>
    <MyListSubheader muiSkipListHighlight>Group 1</MyListSubheader>
    <MenuItem value={1}>Option 1</MenuItem>
    <MenuItem value={2}>Option 2</MenuItem>
    <MyListSubheader muiSkipListHighlight>Group 2</MyListSubheader>
    <MenuItem value={3}>Option 3</MenuItem>
    <MenuItem value={4}>Option 4</MenuItem>
    {/* ... */}
  </Select>
);

我們建議使用第一個選項，因為它不需要更新元件的所有使用位置。

請記住，只有在您將 ListSubheader 包裝在自訂元件中時，這才是必要的。如果您直接使用 ListSubheader，則不需要額外程式碼。

無障礙功能

為了正確標記您的 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>

對於原生選擇，您應該透過將選擇元素的 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 樣式。此元件的無樣式版本是需要高度客製化和較小套件大小的理想選擇。

API

請參閱以下文件，以取得此處提及之元件的所有 props (屬性) 和類別的完整參考。