Switch
A control for toggling an immediate on or off setting.
- Chromium
- Firefox
- WebKit
- WCAG 2.2 AA
Preview
Airplane Mode
import { Label } from "@moe-ui/registry/components/ui/label";
import { Switch } from "@moe-ui/registry/components/ui/switch";
import * as React from "react";
import { View } from "react-native";
export default function SwitchPreview() {
const [enabled, setEnabled] = React.useState(false);
return (
<View className="flex-row items-center gap-2">
<Switch
accessibilityLabel="Airplane Mode"
checked={enabled}
onCheckedChange={setEnabled}
/>
<Label>Airplane Mode</Label>
</View>
);
}
One command, your source
Installation
pnpm dlx @moe-ui/cli@beta add switchUsage
The CLI installs editable source into your application. Import the component from your configured UI directory:
import { Switch } from "@/components/ui/switch";Variants and composition
Compound parts and variants remain regular source in your project, so you can change them without wrapping a package API.
Public API
The canonical source panel below lists every public export, dependency, and the complete implementation shipped by the registry.
Keyboard and accessibility
Associate the control with a visible label. Keyboard focus, disabled state, and validation semantics are covered by the web test matrix.
Browser support
This beta is release-tested in Chromium, Firefox, and WebKit in light and dark themes. See the web compatibility matrix for the current gate.
Nothing hiddenCanonical source and public exports1 exports
Switch"use client";
import { cn } from "../../lib/utils";
import * as SwitchPrimitives from "@rn-primitives/switch";
import { Platform } from "react-native";
function Switch({
className,
...props
}: SwitchPrimitives.RootProps & React.RefAttributes<SwitchPrimitives.RootRef>) {
return (
<SwitchPrimitives.Root
className={cn(
"flex h-[1.15rem] w-8 shrink-0 flex-row items-center rounded-full border border-transparent shadow-sm shadow-black/5",
Platform.select({
web: "focus-visible:border-ring focus-visible:ring-ring/50 peer inline-flex outline-none transition-all focus-visible:ring-[3px] disabled:cursor-not-allowed",
}),
props.checked ? "bg-primary" : "bg-input dark:bg-input/80",
props.disabled && "opacity-50",
className,
)}
{...props}
>
<SwitchPrimitives.Thumb
className={cn(
"bg-background size-4 rounded-full transition-transform",
Platform.select({
web: "pointer-events-none block ring-0",
}),
props.checked
? "dark:bg-primary-foreground translate-x-3.5"
: "dark:bg-foreground translate-x-0",
)}
/>
</SwitchPrimitives.Root>
);
}
export { Switch };