Components

Toggle

A pressable on/off control for formatting actions, filters, and lightweight option states.

Tap to show a QR code for the Expo showcase deep link. The web preview below runs in the browser.

Installation

Install the registry item directly, then add any package dependencies if you are setting the component up manually.

Run the registry command below to add toggle to your project.

watermelon add toggle

Import Toggle from your local UI registry output.

Import

import { Toggle } from "@/components/ui/toggle";

import { Toggle } from "@/components/ui/toggle";

Use toggle for binary formatting controls and option chips that should stay compact.

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.