Switch
Toggle switch for turning settings on or off, with an optional label, a supporting description linked for screen readers, and a configurable label position.
import { Switch } from "@plexui/ui/components/Switch";Examples
Overview
With label
With description
Disable user-based API keys across your entire organization.
Label position
Label position with description
Use dark theme across the entire application.
Default checked
Controlled
Disabled
Disabled with label
Disabled with description
Requires an Enterprise plan to configure.
Enforced by organization policy.
With Field
With Field and description
Disable user-based API keys across your entire organization. You can also choose to disable them on a project-by-project basis if needed.
Settings panel
Allow eval runs to use third-party models you configure under Custom model providers.
Make OpenRouter models available for evaluation runs.
Disable user-based API keys across your entire organization.
Grouped sections
Configure how you receive notifications.
Receive push notifications on your devices.
Get notified via email for important updates.
Control your data sharing preferences.
Help us improve by sharing anonymous usage statistics.
Allow personalized recommendations based on your activity.
API
| Prop | Type | Default | Description |
|---|---|---|---|
checked | boolean | — | Controlled state |
defaultChecked | boolean | — | Initial state (uncontrolled) |
onCheckedChange | (next: boolean) => void | — | Called when toggled |
label | ReactNode | — | Accessible label rendered next to the switch |
description | ReactNode | — | Secondary text below the label, linked via aria-describedby |
labelPosition | "start" | "end" | "end" | Label on left (start) or right (end) |
disabled | boolean | false | Prevent interaction |
required | boolean | — | Required for form submission |
name | string | — | Form field name |
value | string | "on" | Value when submitted |
className | string | — | CSS classes applied to wrapper node |
id | string | — | The id of the switch element (generated when omitted) |
onFocus | FocusEventHandler<HTMLButtonElement> | — | Called when the switch gains focus |
onBlur | FocusEventHandler<HTMLButtonElement> | — | Called when the switch loses focus |
Other props, such as aria-label, land on the switch <button>. Built on Radix Switch. Inside a <form>, a hidden native checkbox mirrors the state so the value is submitted with the form.
Styling
Switch reads these component tokens. Override them at any scope to restyle it:
--field-label-font-weight: label font weight (defaultvar(--font-weight-medium))--switch-label-gap: label gap (defaultspacing(2))--switch-thumb-color: thumb color (defaultlight-dark(var(--gray-0), var(--gray-1000)))--switch-thumb-color-disabled: thumb color disabled (defaultlight-dark(var(--gray-0), var(--gray-800)))--switch-thumb-offset: thumb offset (default3px)--switch-thumb-shadow: thumb shadow (default0 1px 2px rgb(0 0 0 / 20%))--switch-thumb-size: thumb size--switch-track-color: track color (defaultlight-dark(var(--gray-150), var(--gray-400)))--switch-track-color-checked: track color checked (defaultlight-dark(var(--gray-900), var(--blue-400)))--switch-track-color-checked-disabled: track color checked disabled (defaultlight-dark(var(--gray-300), var(--blue-700)))--switch-track-color-disabled: track color disabled (defaultlight-dark(var(--gray-100), var(--gray-300)))--switch-track-color-hover: track color hover (defaultlight-dark(var(--gray-200), var(--gray-450)))--switch-track-height: track height (default19px)--switch-track-width: track width (default32px)