FormControlAPI

React FormControl 組件的 API 參考文件。了解此匯出模組的屬性、CSS 和其他 API。

示範

如需此 React 組件的使用範例和詳細資訊，請造訪組件示範頁面

import FormControl from '@mui/joy/FormControl';
// or
import { FormControl } from '@mui/joy';

原生組件的屬性也可用。

名稱	類型	預設	描述
children	node	-	組件的內容。
color	'danger' \| 'neutral' \| 'primary' \| 'success' \| 'warning' \| string	-	組件的顏色。它支援適用於此組件的主題顏色。若要了解如何新增自己的顏色，請查看主題組件—擴展顏色。
component	elementType	-	用於根節點的組件。可以是字串 (用於 HTML 元素) 或組件。
disabled	bool	false	如果 `true`，子項將處於停用狀態。
error	bool	false	如果 `true`，子項將指示錯誤。
orientation	'horizontal' \| 'vertical'	'vertical'	內容方向流動。
required	bool	false	如果為 `true`，使用者必須先為輸入指定值，才能提交擁有的表單。如果為 `true`，星號會出現在 FormLabel 上。
size	'sm' \| 'md' \| 'lg' \| string	'md'	組件的尺寸。若要了解如何將自訂尺寸新增至組件，請查看主題組件—擴展尺寸。
slotProps	{ root?: func \| object }	{}	用於每個插槽內部的屬性。
slots	{ root?: elementType }	{}	用於每個插槽內部的組件。請參閱下方的「插槽 API」以了解更多詳細資訊。
sx	Array<func \| object \| bool> \| func \| object	-	系統屬性，允許定義系統覆寫以及其他 CSS 樣式。請參閱 `sx` 頁面以了解更多詳細資訊。

ref 會轉發到根元素。

您可以使用 JoyFormControl 透過主題變更此組件的預設屬性。

若要了解如何自訂插槽，請查看「覆寫組件結構」指南。

插槽名稱	類別名稱	預設組件	描述
root	.MuiFormControl-root	`'div'`	呈現根的組件。

這些類別名稱對於使用 CSS 設定樣式很有用。當觸發特定狀態時，它們會套用至組件的插槽。

類別名稱	規則名稱	描述
.Mui-disabled		如果 `disabled={true}`，則套用至根元素的類別名稱。
.Mui-error		如果 `error={true}`，則套用至根元素的狀態類別。
.MuiFormControl-colorDanger	colorDanger	如果 `color="danger"`，則套用至根元素的類別名稱。
.MuiFormControl-colorNeutral	colorNeutral	如果 `color="neutral"`，則套用至根元素的類別名稱。
.MuiFormControl-colorPrimary	colorPrimary	如果 `color="primary"`，則套用至根元素的類別名稱。
.MuiFormControl-colorSuccess	colorSuccess	如果 `color="success"`，則套用至根元素的類別名稱。
.MuiFormControl-colorWarning	colorWarning	如果 `color="warning"`，則套用至根元素的類別名稱。
.MuiFormControl-horizontal	horizontal	如果 `orientation="horizontal"`，則套用至根元素的類別名稱。
.MuiFormControl-sizeLg	sizeLg	如果 `size="lg"`，則套用至根元素的類別名稱。
.MuiFormControl-sizeMd	sizeMd	如果 `size="md"`，則套用至根元素的類別名稱。
.MuiFormControl-sizeSm	sizeSm	如果 `size="sm"`，則套用至根元素的類別名稱。
.MuiFormControl-vertical	vertical	如果 `orientation="vertical"`，則套用至根元素的類別名稱。

您可以使用下列其中一種自訂選項覆寫組件的樣式

如果您在此頁面中找不到資訊，請考慮查看組件的實作以取得更多詳細資訊。