FormControlUnstyled API
导入
import FormControlUnstyled from '@mui/base/FormControlUnstyled';
// 或
import { FormControlUnstyled } from '@mui/base';Provides context such as filled/focused/error/required for form inputs.
Relying on the context provides high flexibility and ensures that the state always stays
consistent across the children of the FormControl.
This context is used by the following components:
- FormLabel
- FormHelperText
- Input
- InputLabel
You can find one composition example below and more going to the demos.
<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>
⚠️ Only one Input can be used within a FormControl because it create visual inconsistencies.
For instance, only one input can be focused at the same time, the state shouldn't be shared.
属性
原生（Native） 组件的属性也是可用的。
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| children | node | func | The content of the component. | |
| component | elementType | The component used for the root node. Either a string to use a HTML element or a component. | |
| disabled | bool | false | If true, the label, input and helper text should be displayed in a disabled state. |
| error | bool | false | If true, the label should be displayed in an error state. |
| required | bool | false | If true, the label will indicate that the input is required. |
| slotProps | { root?: func | object } | {} | |
| slots | { root?: elementType } | {} |
ref 则会被传递到根元素中。