Source

Command Palette

Search for a command to run...

Toggle-group

Groups togglable buttons together for single or multiple selection

About ToggleGroup

Groups togglable buttons in a visually connected way. Supports single selection (radio behavior) or multiple selection (checkbox behavior).

Installation

Import the ToggleGroup component from LSD:
import { ToggleGroup } from '@nipsys/lsd'

export default function MyComponent() {
  return <ToggleGroup />
}

Usage

The simplest form of the component with default styling.
Basic

Sizes

Component sizes for different contexts and visual hierarchy.
Sizes

Features

Additional features and capabilities of the component.
Multiple

Single

Composition

ToggleGroup
└── ToggleGroupItem

API Reference

ToggleGroup

groupLabel
Accessible label for the toggle group.
Type: string
size
Size of the toggle items in the group.
Type: "sm" | "md"

Accessibility

The component follows accessibility best practices for screen readers and keyboard navigation.
Keyboard Navigation
Keyboard shortcuts and navigation
• Tab - Moves focus to pressed item or first item in group• Enter or Space - Activates/deactivates focused item• ArrowDown/Right - Moves focus to next item• ArrowUp/Left - Moves focus to previous item• Home - Moves focus to first item in group• End - Moves focus to last item in group
ARIA Attributes
Proper ARIA attributes for screen readers
• groupLabel prop provides required aria-label for screen readers• role="group" on the ToggleGroup container• aria-pressed on items is automatically managed
Focus States
Visible focus indicators for keyboard users
• Uses roving tabindex to manage focus movement among items. Focused item receives visible focus indicator.
Alert-dialog