Switch
A control that allows the user to toggle between checked and not checked.
"use client"
import { Label, Switch } from "uilab-core"
export function SwitchPreview() {Usage
import { Switch } from "@/components/ui/switch"<Switch />Examples
Description
Focus is shared across devices, and turns off when you leave the app.
"use client"
import {
Field,
FieldContent,Choice Card
Card-style selection where FieldLabel wraps the entire Field for a clickable card pattern.
"use client"
import {
Field,
FieldContent,Sizes
Use the size prop to change the size of the switch.
"use client"
import { Field, FieldGroup, FieldLabel, Switch } from "uilab-core"
export function SwitchSizesExample() {Disabled
Add the disabled prop to the Switch component to disable the switch. Add the data-disabled prop to the Field component for styling.
"use client"
import { Field, FieldLabel, Switch } from "uilab-core"
export function SwitchDisabledExample() {Invalid
Add the aria-invalid prop to the Switch component to indicate an invalid state. Add the data-invalid prop to the Field component for styling.
You must accept the terms and conditions to continue.
"use client"
import {
Field,
FieldContent,