Switch
Toggle control for on and off states
import { Switch } from "@plexui/ui/components/Switch";Examples
Base
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.
Reference
| 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 | — | Value when submitted |
className | string | — | CSS classes applied to wrapper node |
id | string | — | The id of the switch element |