42 lines
1.6 KiB
TypeScript
42 lines
1.6 KiB
TypeScript
|
import { PolymorphicComponent } from '../utils/PolymorphicComponent';
|
|||
|
|
import { FormControlTypeMap } from './FormControl.types';
|
|||
|
|
/**
|
|||
|
|
* 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](https://mui.com/material-ui/react-text-field/#components).
|
|||
|
|
*
|
|||
|
|
* ```jsx
|
|||
|
|
* <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.
|
|||
|
|
*
|
|||
|
|
* Demos:
|
|||
|
|
*
|
|||
|
|
* - [Form Control](https://mui.com/base-ui/react-form-control/)
|
|||
|
|
* - [Input](https://mui.com/joy-ui/react-input/)
|
|||
|
|
* - [Checkbox](https://mui.com/material-ui/react-checkbox/)
|
|||
|
|
* - [Radio Group](https://mui.com/material-ui/react-radio-button/)
|
|||
|
|
* - [Switch](https://mui.com/material-ui/react-switch/)
|
|||
|
|
* - [Text Field](https://mui.com/material-ui/react-text-field/)
|
|||
|
|
*
|
|||
|
|
* API:
|
|||
|
|
*
|
|||
|
|
* - [FormControl API](https://mui.com/base-ui/react-form-control/components-api/#form-control)
|
|||
|
|
*/
|
|||
|
|
declare const FormControl: PolymorphicComponent<FormControlTypeMap<{}, "div">>;
|
|||
|
|
export { FormControl };
|