Source

Command Palette

Search for a command to run...

Checkbox

Interactive checkbox control with checked, unchecked, and indeterminate states

About Checkbox

A checkbox control for binary selection that supports three states: checked, unchecked, and indeterminate. Built on Radix UI primitives for full keyboard accessibility and screen reader support. When used within forms, it includes proper form submission handling.

Installation

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

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

Usage

The simplest form of the component with default styling.
Basic

Features

Additional features and capabilities of the component.
Controlled

With Label

API Reference

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

Accessibility

The component follows accessibility best practices for screen readers and keyboard navigation.
Keyboard Navigation
Keyboard shortcuts and navigation
• Tab - Navigate to the checkbox• Space - Toggle between checked and unchecked states
ARIA Attributes
Proper ARIA attributes for screen readers
• role="checkbox" is applied by the Radix primitive• aria-checked indicates current state (true, false, or mixed)• aria-invalid marks invalid state when applicable• aria-required indicates if the checkbox must be checked• aria-disabled indicates the checkbox cannot be interacted with
Focus States
Visible focus indicators for keyboard users
• Checkbox receives keyboard focus via Tab. Visible focus ring is applied when focused. Pressing Space toggles the checkbox state.
Input