Ravox KitForms
Switch
On and off for settings that apply immediately. It is a checkbox with role="switch": Space toggles it, the form receives "on" when it is on, and React Hook Form's register() returns true/false. With the label before it or at the end of the row.
Settings
Toggles
Examples
Settings row
Plain form
With React Hook Form
Sizes and disabled
Installation
The command creates components/ui/switch.tsx in your project and installs the theme with it. The file is yours: edit it as you like.
npx @ravox-ui/cli add switchProps
| Prop | Type | Default | Description |
|---|---|---|---|
| label | ReactNode | — | Text of the <label>; the whole row is clickable. Without a label, pass aria-label. |
| description | ReactNode | — | Supporting line below the label, read along with the switch. |
| error | ReactNode | — | Error message below (e.g. required consent). |
| labelSide | "start" | "end" | "start" | end: text on the left and switch at the end, as in a settings list. |
| size | "sm" | "md" | "md" | Track of 28 or 36px. |
| onCheckedChange | (checked: boolean) => void | — | Shortcut for onChange: receives only whether it is on. |
| wrapperClassName | string | — | Classes for the outer block; className goes on the track (the input). |
| ...props | ComponentProps<"input"> | — | Everything a checkbox accepts (name, value, checked, defaultChecked, ref). |