FormControl
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>
Content copied to clipboard
⚠️ Only one InputBase
can be used within a FormControl because it creates visual inconsistencies. For instance, only one input can be focused at the same time, the state shouldn't be shared.
Demos:
API: