Toggle Group

Copy MarkdownOpen

Example

Controlled

Manage the toggle group’s state externally, allowing full control over which toggles are active and enabling dynamic interactions.

Features

There is no built in element for toggle button groups in HTML. ToggleButtonGroup helps achieve accessible toggle button groups that can be styled as needed.

• Accessible – Represented as an ARIA radiogroup when using single selection, or a toolbar when using multiple selection.
• Keyboard navigation – Users can navigate between buttons with the arrow keys. Selection can be toggled using the Enter or Space keys.
• Styleable – Hover, press, keyboard focus, and selection states are provided for easy styling.

Installation

npm install react-aria-components tw-animate-css tailwindcss-react-aria-components class-variance-authority lucide-react clsx tailwind-merge motion

npx @libravelui@latest add toggle-group

Anatomy

import { ToggleGroup, ToggleItem } from "@/components/ui/core/toggle-group";

<ToggleGroup>
  <ToggleItem id="1d">1d</ToggleItem>
  <ToggleItem id="3d">3d</ToggleItem>
  <ToggleItem id="7d">7d</ToggleItem>
  <ToggleItem id="2w">2w</ToggleItem>
</ToggleGroup>

Props

Loading types…