Components
FormControlLabel and FormGroup
Pair a control with visible text, and stack related controls.
FormControlLabel wraps a Checkbox, a
Radio or a Switch with a text label, so
the text names the input and a click on it changes the control. FormGroup stacks several of
them. FormControlLabel is a client component. FormGroup is a Server Component.
import FormControlLabel from '@hone-ui/react/FormControlLabel';
import FormGroup from '@hone-ui/react/FormGroup';Examples
<FormControlLabel control={<Checkbox />} label="Remember me" />
<FormControlLabel control={<Switch />} label="Wi-Fi" labelPlacement="start" />
<FormGroup row>
<FormControlLabel control={<Checkbox defaultChecked />} label="Email" />
<FormControlLabel control={<Checkbox />} label="Phone" />
</FormGroup>FormControlLabel props
| Prop | Type | Default | Description |
|---|---|---|---|
control | ReactElement | required | A Checkbox, Radio or Switch. |
label | ReactNode | required | The text. Wrapped in Typography unless disableTypography. |
labelPlacement | 'end', 'start', 'top', 'bottom' | 'end' | Where the text sits. |
disabled | boolean | from the control, then the FormControl | Disables the control and dims the text. |
required | boolean | false | Marks the control required and adds a hidden asterisk. |
checked, value, name, onChange, inputRef | Passed to the control unless it sets its own. | ||
disableTypography | boolean | false | Renders the label as given. |
slotProps | { typography } | none | Props for the label text. |
sx, className, style, ref | Standard. They go to the root span. |
FormGroup props
| Prop | Type | Default | Description |
|---|---|---|---|
row | boolean | false | Lays the controls out in a row. |
sx, className, style, ref, children | Standard. |
Notes
controlmust be one of this library's controls. A plainbuttondoes not work.requiredstays a prop of the label or the control. Put a form-wide asterisk on a FormLabel.- FormGroup ignores theme
defaultProps, because it is a Server Component.
Accessibility
The root is a span, not a label. The text sits in its own label that points at the input, so labels
never nest. Do not also give the control an aria-label, because the input would get two names.
FormGroup is a plain div. Add role="group" and aria-label when the controls need a shared
name.