FormControlAPI

React FormControl 组件的 API 参考文档。了解此导出的模块的 props、CSS 和其他 API。

演示

有关此 React 组件的用法示例和详细信息，请访问组件演示页面

导入

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

阅读本关于最小化 bundle size 的指南，了解更多不同之处。

为表单输入提供诸如 filled/focused/error/required 之类的上下文。依赖于上下文提供了高度的灵活性，并确保状态在 FormControl 的子元素之间始终保持一致。以下组件使用此上下文

FormLabel
FormHelperText
Input
InputLabel

您可以在下面找到一个组合示例，并访问演示了解更多。

<FormControl>
  <InputLabel htmlFor="my-input">Email address</InputLabel>
  <Input id="my-input" aria-describedby="my-helper-text" />
  <FormHelperText id="my-helper-text">We'll never share your email.</FormHelperText>
</FormControl>

⚠️ 在 FormControl 中只能使用一个 InputBase，因为它会造成视觉上的不一致。例如，一次只能聚焦一个输入，状态不应共享。

Props

原生组件的 props 也可用。

名称	类型	默认值	描述
children	node	-	组件的内容。
classes	object	-	覆盖或扩展应用于组件的样式。有关更多详细信息，请参阅下面的CSS 类 API。
color	'primary' \| 'secondary' \| 'error' \| 'info' \| 'success' \| 'warning' \| string	'primary'	组件的颜色。它支持默认主题颜色和自定义主题颜色，可以按照调色板自定义指南中所示添加自定义主题颜色。
component	elementType	-	用于根节点的组件。可以是用于 HTML 元素的字符串或组件。
disabled	bool	false	如果 `true`，标签、输入和辅助文本应以禁用状态显示。
error	bool	false	如果 `true`，标签将以错误状态显示。
focused	bool	-	如果 `true`，组件将以聚焦状态显示。
fullWidth	bool	false	如果 `true`，组件将占据其容器的完整宽度。
hiddenLabel	bool	false	如果 `true`，则标签将被隐藏。这用于增加 `FilledInput` 的密度。请务必将 `aria-label` 添加到 `input` 元素。
margin	'dense' \| 'none' \| 'normal'	'none'	如果为 `dense` 或 `normal`，将调整此组件和包含组件的垂直间距。
required	bool	false	如果 `true`，标签将指示 `input` 是必需的。
size	'medium' \| 'small' \| string	'medium'	组件的尺寸。
sx	Array<func \| object \| bool> \| func \| object	-	允许定义系统覆盖以及其他 CSS 样式的系统属性。有关更多详细信息，请参阅 `sx` 页面。
variant	'filled' \| 'outlined' \| 'standard'	'outlined'	要使用的变体。

ref 被转发到根元素。

主题默认 props

您可以使用 MuiFormControl 通过主题更改此组件的默认 props。

CSS 类

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

类名	规则名称	描述
.MuiFormControl-fullWidth	fullWidth	如果 `fullWidth={true}`，则应用于根元素的样式。
.MuiFormControl-marginDense	marginDense	如果 `margin="dense"`，则应用于根元素的样式。
.MuiFormControl-marginNormal	marginNormal	如果 `margin="normal"`，则应用于根元素的样式。
.MuiFormControl-root	root	应用于根元素的样式。

您可以使用以下自定义选项之一覆盖组件的样式

使用全局类名。
使用规则名称作为自定义主题中组件的 styleOverrides 属性的一部分。

源代码

如果您在此页面中没有找到所需的信息，请考虑查看组件的实现以获取更多详细信息。