49 lines
2.9 KiB
JSON
49 lines
2.9 KiB
JSON
|
{
|
|||
|
|
"componentDescription": "Provides context such as filled/focused/error/required for form inputs.\nRelying on the context provides high flexibility and ensures that the state always stays\nconsistent across the children of the `FormControl`.\nThis context is used by the following components:\n\n* FormLabel\n* FormHelperText\n* Input\n* InputLabel\n\nYou can find one composition example below and more going to [the demos](https://mui.com/material-ui/react-text-field/#components).\n\n```jsx\n<FormControl>\n <InputLabel htmlFor=\"my-input\">Email address</InputLabel>\n <Input id=\"my-input\" aria-describedby=\"my-helper-text\" />\n <FormHelperText id=\"my-helper-text\">We'll never share your email.</FormHelperText>\n</FormControl>\n```\n\n⚠️ Only one `Input` can be used within a FormControl because it create visual inconsistencies.\nFor instance, only one input can be focused at the same time, the state shouldn't be shared.",
|
|||
|
|
"propDescriptions": {
|
|||
|
|
"children": { "description": "The content of the component." },
|
|||
|
|
"className": { "description": "Class name applied to the root element." },
|
|||
|
|
"disabled": {
|
|||
|
|
"description": "If <code>true</code>, the label, input and helper text should be displayed in a disabled state."
|
|||
|
|
},
|
|||
|
|
"error": { "description": "If <code>true</code>, the label is displayed in an error state." },
|
|||
|
|
"onChange": { "description": "Callback fired when the form element's value is modified." },
|
|||
|
|
"required": {
|
|||
|
|
"description": "If <code>true</code>, the label will indicate that the <code>input</code> is required."
|
|||
|
|
},
|
|||
|
|
"slotProps": { "description": "The props used for each slot inside the FormControl." },
|
|||
|
|
"slots": {
|
|||
|
|
"description": "The components used for each slot inside the FormControl. Either a string to use a HTML element or a component."
|
|||
|
|
},
|
|||
|
|
"value": { "description": "The value of the form element." }
|
|||
|
|
},
|
|||
|
|
"classDescriptions": {
|
|||
|
|
"disabled": {
|
|||
|
|
"description": "State class applied to {{nodeName}} if {{conditions}}.",
|
|||
|
|
"nodeName": "the root element",
|
|||
|
|
"conditions": "<code>disabled={true}</code>"
|
|||
|
|
},
|
|||
|
|
"error": {
|
|||
|
|
"description": "State class applied to {{nodeName}} if {{conditions}}.",
|
|||
|
|
"nodeName": "the root element",
|
|||
|
|
"conditions": "<code>error={true}</code>"
|
|||
|
|
},
|
|||
|
|
"filled": {
|
|||
|
|
"description": "State class applied to {{nodeName}} if {{conditions}}.",
|
|||
|
|
"nodeName": "the root element",
|
|||
|
|
"conditions": "the inner input has value"
|
|||
|
|
},
|
|||
|
|
"focused": {
|
|||
|
|
"description": "State class applied to {{nodeName}} if {{conditions}}.",
|
|||
|
|
"nodeName": "the root element",
|
|||
|
|
"conditions": "the inner input is focused"
|
|||
|
|
},
|
|||
|
|
"required": {
|
|||
|
|
"description": "State class applied to {{nodeName}} if {{conditions}}.",
|
|||
|
|
"nodeName": "the root element",
|
|||
|
|
"conditions": "<code>required={true}</code>"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"slotDescriptions": { "root": "The component that renders the root." }
|
|||
|
|
}
|