Components
Toggle
A pressable on/off control for formatting actions, filters, and lightweight option states.
Loading...
Installation
Install the registry item directly, then add any package dependencies if you are setting the component up manually.
1
Install the component
Run the registry command below to add toggle to your project.
watermelon add toggle2
Import the component
Import Toggle from your local UI registry output.
Import
import { Toggle } from "@/components/ui/toggle";Import
Import
import { Toggle } from "@/components/ui/toggle";Usage
Use toggle for binary formatting controls and option chips that should stay compact.
Loading...
API Reference
| prop | type | default | description |
|---|---|---|---|
| pressed / defaultPressed | boolean | false | Controls whether the toggle is on. |
| onPressedChange | (pressed: boolean) => void | - | Called when the pressed state changes. |
| variant | "default" | "outline" | "outline" | Adjusts the visual treatment for active and inactive states. |