ComponentsCore
Toggle
A toggle button allows a user to toggle a selection on or off, for example switching between two states or modes.
Example
Usage
Features
Toggle buttons are similar to action buttons, but support an additional selection state that is toggled when a user presses the button. There is no built-in HTML element that represents a toggle button, so React Aria implements it using ARIA attributes.
- 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 native
<button>element with the aria-pressed attribute, and supports theSpaceandEnterkeys to toggle the selection state. - Cross-browser – Mouse, touch, keyboard, and focus interactions are normalized to ensure consistency across browsers and devices.
Installation
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.
Copy and paste the following code into your project.
npx libravelui@latest add toggleAnatomy
import { Toggle } from "@/components/ui/core/toggle";<Toggle>{({ isSelected }) => <>{isSelected ? "Diselect" : "Select"}</>}</Toggle>Props
Loading types…