Source

Command Palette

Search for a command to run...

Switch

Toggle control for binary states with size variants.

About Switch

A control that allows the user to toggle between checked and not checked states. Supports controlled and uncontrolled modes with size variants (sm, md, lg). Includes proper accessibility attributes and keyboard navigation.

Installation

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

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

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.
Controlled

API Reference

Switch

size
The size of the switch. Controls the visual size of the switch component.
Type: "sm" | "md" | "lg"

Accessibility

The component follows accessibility best practices for screen readers and keyboard navigation.
Keyboard Navigation
Keyboard shortcuts and navigation
• Space - Toggles the switch state• Enter - Toggles the switch state
ARIA Attributes
Proper ARIA attributes for screen readers
• role="switch" is set on the root element• aria-checked indicates the current state (checked/unchecked)• aria-disabled is present when disabled• aria-readonly is present when the switch is read-only• aria-required indicates if the switch is required• aria-invalid is present when the switch has an error
Focus States
Visible focus indicators for keyboard users
• Component is focusable and receives focus when tabbed to. Focus visible state is shown with a ring indicator.
Textarea