Ravox KitForms
Toggle
A button that stays pressed (aria-pressed): bold, pin, mute. When pressed, it fills with the text color. A hidden checkbox next to it carries name, value and ref, so it works in a plain form and with React Hook Form's register().
Settings
Toggles
Examples
Controlled, with the icon swapping
Style bar with React Hook Form
Plain form
Ghost and outline
Installation
The command creates components/ui/toggle.tsx in your project and installs the theme with it. The file is yours: edit it as you like.
npx @ravox-ui/cli add toggleProps
| Prop | Type | Default | Description |
|---|---|---|---|
| pressed | boolean | — | Current state (controlled mode). |
| defaultPressed | boolean | false | Pressed at the start (uncontrolled mode). |
| onPressedChange | (pressed: boolean) => void | — | Called when it toggles. |
| variant | "ghost" | "outline" | "ghost" | Without a border (toolbars) or with a border (standing alone). |
| size | "sm" | "md" | "lg" | "icon" | "icon-sm" | "md" | The icon sizes are square: give them an aria-label. |
| name / value | string | — | When pressed, the form receives the value (or "on"); when released, nothing. |
| ref / onChange / onBlur | do checkbox escondido | — | What register() uses: {...register("bold")} returns true/false. |
| buttonRef | Ref<HTMLButtonElement> | — | Ref of the visible <button>. |
| ...props | ComponentProps<"button"> | — | The rest goes to the <button> (aria-label, onClick, disabled). |