Switch

Toggle control for switching between two states. Built on the Radix UI Switch primitive.

<Switch defaultChecked aria-label="Example switch" />

Usage

import { Switch } from "@reva/ui";

<Switch defaultChecked />

Airplane mode

<HStack align="center" gap={2}>  <Switch id="airplane" />  <Label htmlFor="airplane">Airplane mode</Label></HStack>

<HStack align="center" gap={2}>  <Switch disabled id="sw-dis" />  <Label className="opacity-70" htmlFor="sw-dis">Disabled</Label></HStack>

Switch forwards props to Radix Switch (SwitchPrimitive.Root). See the Radix UI Switch documentation.

Slider

Drag handle to select a value or range from a continuous interval. Built on the Radix UI Slider primitive.

Switch Card

Toggle card control. Extends Switch into a clickable panel with label, description, and optional icon.