Components
Checkbox
A box that turns on and off.
Checkbox is a native checkbox input with a drawn box. Pair it with
FormControlLabel for visible text. It is a client component
and reads components.Checkbox.defaultProps.
import Checkbox from '@hone-ui/react/Checkbox';Examples
<FormControlLabel control={<Checkbox defaultChecked />} label="Remember me" />
<Checkbox indeterminate color="secondary" size="small" inputProps={{ 'aria-label': 'Select all' }} />A controlled checkbox reads checked from your state:
<Checkbox
checked={on}
onChange={(event, checked) => setOn(checked)}
inputProps={{ 'aria-label': 'Select row' }}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
checked | boolean | none | Makes it controlled. Pair it with onChange. |
defaultChecked | boolean | false | The starting state when uncontrolled. |
onChange | (event, checked) => void | none | event is the real change event. checked is event.target.checked. |
indeterminate | boolean | false | Shows the mixed state. |
color | 'default', 'primary', 'secondary', 'error', 'info', 'success', 'warning' | 'primary' | The checked color. |
size | 'small', 'medium' | 'medium' | The size. |
disabled, required, readOnly | boolean | false | readOnly stops onChange. |
icon, checkedIcon, indeterminateIcon | ReactNode | drawings | Replace the default drawings. |
name, value, autoFocus | Reach the input. value is sent as a string. | ||
id | string | none | Goes on the input. Use slotProps.root.id for the root. |
inputRef | Ref | none | A ref to the input. |
slotProps | { root, input } | none | input accepts id, aria-label, aria-labelledby, aria-describedby, name, required and tabIndex (only -1). |
inputProps | object | none | Deprecated alias of slotProps.input. |
disableRipple | boolean | false | Turns off the Material look's ripple. |
sx, className, style, ref | Standard. ref and extra HTML props go to the root label. |
Inside a FormControl, disabled follows it and error colors the box. required does not
follow it.
Notes
slotProps.inputaccepts only the keys listed above.data-*,classNameandstyleare not supported there.- No
slotsprop. - The real input covers the control, so test tools can click it directly, with no
force.
Accessibility
The input is a real checkbox, and Space toggles it. A bare Checkbox has no name, so wrap it in
FormControlLabel or pass inputProps['aria-label']. An aria-label placed directly on Checkbox
lands on the root, not the input.