Source

Command Palette

Search for a command to run...

Toggle

Button that switches between on and off states with visual feedback.

About Toggle

A togglable button that switches between enabled and disabled states. Provides visual feedback through styling changes to indicate the current state, making it ideal for settings, filters, and options that can be toggled.

Installation

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

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

Usage

The simplest form of the component with default styling.
Basic

Variants

Component variants for different visual styles and use cases.
With Text

Sizes

Component sizes for different contexts and visual hierarchy.
Sizes

Features

Additional features and capabilities of the component.
Pressed

API Reference

Radix UI Documentation
Toggle wraps Radix UI primitives
View Radix UI Toggle documentation →

Accessibility

The component follows accessibility best practices for screen readers and keyboard navigation.
Keyboard Navigation
Keyboard shortcuts and navigation
• Tab - Navigate to the toggle• Enter or Space - Toggle state
ARIA Attributes
Proper ARIA attributes for screen readers
• aria-pressed is automatically managed based on pressed state• Use aria-label when toggle text is not descriptive
Focus States
Visible focus indicators for keyboard users
• Visible focus ring indicates keyboard focus• Keyboard users can see which toggle has focus
Toggle-group