FormControl and form parts
Share state between a label, an input and helper text.
FormControl shares focus, error, disabled and filled state with the parts inside it. Those
parts are FormLabel, InputLabel and FormHelperText. Use them around a custom input. For a text
input use TextField, which already does this. All four are
client components and read theme defaultProps.
import FormControl, { useFormControl } from '@hone-ui/react/FormControl';
import FormLabel from '@hone-ui/react/FormLabel';
import InputLabel from '@hone-ui/react/InputLabel';
import FormHelperText from '@hone-ui/react/FormHelperText';
import Select from '@hone-ui/react/Select';
import MenuItem from '@hone-ui/react/MenuItem';Examples
Required
<FormControl error sx={{ minWidth: 200 }}>
<InputLabel id="demo-age-label">Age</InputLabel>
<Select labelId="demo-age-label" label="Age" value="" aria-describedby="demo-age-help">
<MenuItem value={10}>Ten</MenuItem>
</Select>
<FormHelperText id="demo-age-help">Required</FormHelperText>
</FormControl>More variations:
<FormControl error sx={{ minWidth: 200 }}>
<InputLabel id="a-label">Age</InputLabel>
<Select labelId="a-label" label="Age" value="" aria-describedby="a-help">
<MenuItem value={10}>Ten</MenuItem>
</Select>
<FormHelperText id="a-help">Required</FormHelperText>
</FormControl>
<FormControl required>
<FormLabel id="g">Gender</FormLabel>
<RadioGroup aria-labelledby="g">...</RadioGroup>
</FormControl>
<FormControl component="fieldset">
<FormLabel component="legend">Pets</FormLabel>
<FormGroup>...</FormGroup>
</FormControl>
<FormControl variant="filled" sx={{ minWidth: 200 }}>
<InputLabel id="n-label">Size</InputLabel>
<Select labelId="n-label" value="">
<MenuItem value="s">Small</MenuItem>
<MenuItem value="l">Large</MenuItem>
</Select>
</FormControl>FormControl props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'outlined', 'filled', 'standard' | 'outlined' | Passed to the parts inside. |
size | 'small', 'medium' | 'medium' | Passed to the parts inside. |
margin | 'none', 'dense', 'normal' | 'none' | Vertical margin. |
color | palette color | 'primary' | The focused color. |
error, disabled, required, fullWidth, hiddenLabel | boolean | false | State shared with the parts. |
focused | boolean | none | Forces the focused state. Unset, the input's focus drives it. |
component | ElementType | 'div' | The root element. Use 'fieldset' for a group of inputs. |
sx, className, style, ref, children | Standard. They go to the root element. |
useFormControl() returns the shared state, or undefined outside a FormControl. It holds
focused, filled, adornedStart and the callbacks onFocus, onBlur, onFilled,
onEmpty and setAdornedStart.
FormLabel props
color, disabled, error, filled, focused and required. Each falls back to the
FormControl. component picks the element (default label); legend renders no htmlFor.
required adds an asterisk hidden from screen readers. By default it renders a label, so
link it with htmlFor or aria-labelledby.
InputLabel props
| Prop | Type | Default | Description |
|---|---|---|---|
shrink | boolean | automatic | Unset, the label shrinks on focus, with a value, or with a start adornment. |
disableAnimation | boolean | false | Skips the shrink transition. |
variant, size | from FormControl | As in FormControl. margin is accepted and ignored. |
It also takes every FormLabel prop. In the Material look the label floats over the input. The Minimal look keeps it above the input and never floats it.
FormHelperText props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | none | A single space keeps the line's height without visible text. |
disabled, error, filled, focused, required | boolean | from FormControl | State. |
margin | 'dense' | from FormControl | Tightens the top margin. |
variant | 'outlined', 'filled', 'standard' | from FormControl | Outlined and filled inset the text. |
Notes
-
FormHelperText renders a
p. Itscomponentprop picks another tag, such asdiv. InputLabel has nocomponentprop. -
FormControl adds no ARIA. Link the label with
htmlForand the helper text witharia-describedbyyourself. -
Do not give a control inside a
formtheidornamereset. The element shadowsform.reset, and React Aria's form validation then throwsTypeError: Cannot redefine property: reset. Pick another id, such asreset-form.
Accessibility
Without error or a surrounding FormControl, FormHelperText does not look like an error.