Switch
unreleasedstable
A Core-backed switch for toggling a boolean setting.
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
export function Component() {
return (
<Label>
<Switch name="notifications" />
Enable notifications
</Label>
);
}Switch
Root switch component that renders a styled control, animated thumb, and hidden native checkbox input by default.
SwitchControl
Styled button control with role=switch and checked, disabled, and focus state styling.
SwitchThumb
Animated visual thumb that follows checked state.
SwitchHiddenInput
Hidden checkbox used for native form submission and reset behavior.