Switch

A toggle control for switching between on and off states.

Import

import { Switch } from "@retents/ui/switch"

Usage Guidelines

When to use

For binary settings that take effect immediately, like "Enable notifications" or "Dark mode".
When the toggle represents an on/off state with an immediate, real-time effect.

When NOT to use

For form fields that require a submit action — use Checkbox instead.
For selecting one of several options — use RadioGroup instead.
For a toolbar action button that toggles a mode — use Toggle instead.

Preview

Airplane Mode

Off

Usage

<div className="flex items-center gap-2">
  <Switch id="airplane-mode" />
  <Label htmlFor="airplane-mode">Airplane Mode</Label>
</div>

Source

Slider

A control for selecting a numeric value within a range.

Table

A structured data table with header, body, and footer sections.

On this page

Import Usage Guidelines When to use When NOT to use Preview Usage Source