005cf56baf
Some checks failed
No response / noResponse (push) Has been cancelled
CI / Continuous releases (push) Has been cancelled
CI / test-dev (macos-latest) (push) Has been cancelled
CI / test-dev (ubuntu-latest) (push) Has been cancelled
CI / test-dev (windows-latest) (push) Has been cancelled
Maintenance / main (push) Has been cancelled
Scorecards supply-chain security / Scorecards analysis (push) Has been cancelled
CodeQL / Analyze (push) Has been cancelled
56 lines
3.4 KiB
JSON
56 lines
3.4 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](/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 `InputBase` can be used within a FormControl because it creates 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." },
|
||
"classes": { "description": "Override or extend the styles applied to the component." },
|
||
"color": {
|
||
"description": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the <a href=\"https://mui.com/material-ui/customization/palette/#custom-colors\">palette customization guide</a>."
|
||
},
|
||
"component": {
|
||
"description": "The component used for the root node. Either a string to use a HTML element or a component."
|
||
},
|
||
"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." },
|
||
"focused": {
|
||
"description": "If <code>true</code>, the component is displayed in focused state."
|
||
},
|
||
"fullWidth": {
|
||
"description": "If <code>true</code>, the component will take up the full width of its container."
|
||
},
|
||
"hiddenLabel": {
|
||
"description": "If <code>true</code>, the label is hidden. This is used to increase density for a <code>FilledInput</code>. Be sure to add <code>aria-label</code> to the <code>input</code> element."
|
||
},
|
||
"margin": {
|
||
"description": "If <code>dense</code> or <code>normal</code>, will adjust vertical spacing of this and contained components."
|
||
},
|
||
"required": {
|
||
"description": "If <code>true</code>, the label will indicate that the <code>input</code> is required."
|
||
},
|
||
"size": { "description": "The size of the component." },
|
||
"sx": {
|
||
"description": "The system prop that allows defining system overrides as well as additional CSS styles."
|
||
},
|
||
"variant": { "description": "The variant to use." }
|
||
},
|
||
"classDescriptions": {
|
||
"fullWidth": {
|
||
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
|
||
"nodeName": "the root element",
|
||
"conditions": "<code>fullWidth={true}</code>"
|
||
},
|
||
"marginDense": {
|
||
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
|
||
"nodeName": "the root element",
|
||
"conditions": "<code>margin=\"dense\"</code>"
|
||
},
|
||
"marginNormal": {
|
||
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
|
||
"nodeName": "the root element",
|
||
"conditions": "<code>margin=\"normal\"</code>"
|
||
},
|
||
"root": { "description": "Styles applied to the root element." }
|
||
}
|
||
}
|