║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Switch description: A control that allows the user to toggle between checked and not checked. author: name: imskyleen url: https://github.com/imskyleen

<ComponentPreview name="demo-components-radix-switch" />

Installation

<ComponentInstallation name="components-radix-switch" />

Usage

<Switch />

API Reference

Switch

<div className="flex flex-col gap-2"> <ExternalLink href="https://animate-ui.com/docs/primitives/radix/switch#switch" text="Animate UI API Reference - Switch Primitive" />

<ExternalLink href="https://www.radix-ui.com/primitives/docs/components/switch#root" text="Radix UI API Reference - Switch.Root" />

</div>

<TypeTable type={{ startIcon: { description: 'The icon to display on the left of the switch.', type: 'React.ReactElement', required: false, }, endIcon: { description: 'The icon to display on the right of the switch.', type: 'React.ReactElement', required: false, }, thumbIcon: { description: 'The icon to display on the thumb of the switch.', type: 'React.ReactElement', required: false, }, pressedWidth: { description: 'The width of the switch indicator when pressed.', type: 'number', required: false, default: '19', }, '...props': { description: 'The props of the Switch component.', type: 'HTMLMotionProps<"button">', required: false, }, }} />

<Callout type="info"> The `asChild` property is not supported in the `Switch` component, as it is used for animation. </Callout>

Credits

• Radix UI Switch
• Credit to shadcn/ui for style inspiration.

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║