Form
Toggle
Pressable button with active/inactive state. Use ToggleGroup for exclusive selection.
Install
pnpm add @codefast/ui
Import path
@codefast/ui/toggle
Examples
Sizes
sm, default, and lg toggles.
Disabled
A two-state button that can be either on or off.
Outline
Use variant='outline' for an outline style.
RTL
Right-to-left layout support for languages such as Arabic and Hebrew.
Translations are AI-generated for demonstration and may be imperfect.
With Text
A two-state button that can be either on or off.
Anatomy
How the parts compose. Copy this skeleton and fill in the slots.
import { Toggle } from "@codefast/ui/toggle";
<Toggle pressed={on} onPressedChange={setOn} aria-label="Bold">
<BoldIcon />
</Toggle>
API reference
Props for each part of the component. All native element props are also forwarded.
Toggle
A two-state pressable button.
| Prop | Type | Default | Description |
|---|---|---|---|
| pressed / onPressedChange | boolean / (pressed: boolean) => void | — | Controlled state and its handler. |
| defaultPressed | boolean | false | Initial state when uncontrolled. |
| variant | "default" | "outline" | "default" | Visual style. |
| size | "sm" | "default" | "lg" | "default" | Button size. |
Accessibility
Built to be keyboard-navigable and screen-reader friendly out of the box.
| Key | Function |
|---|---|
| Tab | Moves focus to the toggle. |
| Space | Flips the pressed state. |
| Enter | Flips the pressed state. |
- Exposes aria-pressed so the on/off state is announced.
- Icon-only toggles must set an aria-label.
- Use a Switch instead for a setting that reads as on/off rather than pressed.
Guidelines
Conventions that keep usage consistent across an app.
Do
- Use for a single independent on/off, like a formatting mark.
- Group related toggles with Toggle Group.
Don’t
- Don’t use a Toggle where a Switch or Checkbox fits better.
- Don’t leave icon toggles unlabelled.