CheckboxField
Labeled form checkbox built on a visually hidden native input, with native form and keyboard semantics and an optional description line.
Props
CheckboxField extends HTMLAttributes<HTMLLabelElement>. Uses a visually-hidden <input type="checkbox"> so a click on the label text toggles the checkbox without the double-fire a button-based approach would cause.
| Prop | Type | Default | Description |
|---|---|---|---|
checked | boolean | — | Checked state. |
onChange | (checked: boolean) => void | — | Toggle handler. |
indeterminate | boolean | — | Renders the mixed dash, aria-checked='mixed'. |
disabled | boolean | — | Prevents interaction. |
children | ReactNode | — | Label text. |
description | ReactNode | — | Dim secondary line below the label. |
Examples
Basic labeled
With description
Disabled
import { CheckboxField } from "@solarius/onset";
import type { CheckboxFieldProps } from "@solarius/onset";