Ravox KitForms
Checkbox
A real checkbox with label, description and error, an indeterminate state for "select all" and a group with a legend. Sends name/value in the form and accepts React Hook Form's register() directly.
Settings
Toggles
Examples
Select all
Group in a plain form
With React Hook Form
Side by side
Installation
The command creates components/ui/checkbox.tsx in your project and installs the theme with it. The file is yours: edit it as you like.
npx @ravox-ui/cli add checkboxProps
| Prop | Type | Default | Description |
|---|---|---|---|
| label | ReactNode | — | Text next to the box; the whole row is clickable. Without a label, pass aria-label. |
| description | ReactNode | — | Supporting line below the label, read together with the box (aria-describedby). |
| error | ReactNode | — | Error message below: paints the border and sets aria-invalid. |
| indeterminate | boolean | false | The dash for "some checked". The screen reader announces it as mixed. |
| onCheckedChange | (checked: boolean) => void | — | Shortcut for onChange: receives only whether it is checked. |
| wrapperClassName | string | — | Classes of the outer block; className goes on the input. |
| ...props | ComponentProps<"input"> | — | Everything a checkbox accepts (name, value, checked, defaultChecked, ref): {...register("terms")} works. |
| CheckboxGroup legend | ReactNode | — | Group title (<fieldset> + <legend>). |
| CheckboxGroup name | string | — | name of all the boxes; the form receives one value per checked box (FormData.getAll). |
| CheckboxGroup value / defaultValue / onValueChange | string[] | — | Checked values (controlled or initial); each <Checkbox> needs a value. |
| CheckboxGroup orientation | "vertical" | "horizontal" | "vertical" | One below the other or side by side (wraps). |
| CheckboxGroup hint / error | ReactNode | — | Note below the group; with an error, all unchecked boxes get the error border. |