ComponentsCore
Switch
A switch allows a user to turn a setting on or off.
Example
Usage
Features
There is no native HTML element with switch styling. <input type="checkbox"> is the closest semantically, but isn't styled or exposed to assistive technology as a switch. Switch helps achieve accessible switches that can be styled as needed.
- Styleable – Hover, press, keyboard focus, and selection states are provided for easy styling. These states only apply when interacting with an appropriate input device, unlike CSS pseudo classes.
- Accessible – Uses a visually hidden
<input>element withrole="switch"under the hood, which also enables HTML form integration and autofill. A label element is built-in to ensure the switch is usable with assistive technologies. - Cross-browser – Mouse, touch, keyboard, and focus interactions are normalized to ensure consistency across browsers and devices.
Installation
Required Component
This component depends on Field. Make sure you have installed and configured it before using this component.Install following dependencies:
npm install react-aria-components tw-animate-css tailwindcss-react-aria-components class-variance-authority lucide-react clsx tailwind-merge motionAdd cn helper using clsx and twMerge for conditional class merging in Tailwind components.
Add composeTailwindRenderProps helper using cn and composeRenderProps from react-aria-components for conditional class rendering.
Copy and paste the following code into your project.
npx libravelui@latest add switchAnatomy
import { Switch } from "@/components/ui/core/switch";<Switch
label="A label"
description="Some description"
/>
<Switch>
{/* Some Content */}
</Switch>Another Example
With Card
Usage
Props
Loading types…