Source

Command Palette

Search for a command to run...

Select

Displays a list of options for users to choose from.

About Select

A dropdown selection component that presents a list of options when triggered. Users can select a single option from the list using mouse or keyboard navigation. The component is built on Radix UI primitives and includes full keyboard accessibility support.

Installation

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

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

Usage

The simplest form of the component with default styling.
Basic Usage

Sizes

Component sizes for different contexts and visual hierarchy.
Sizes

Features

Additional features and capabilities of the component.
Controlled

Disabled

Grouped

Variants

With Separator

Composition

Select
├── SelectTrigger
│ └── SelectValue
└── SelectContent
├── SelectScrollUpButton
├── SelectViewport
└── SelectScrollDownButton

API Reference

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

Accessibility

The component follows accessibility best practices for screen readers and keyboard navigation.
Keyboard Navigation
Keyboard shortcuts and navigation
• Tab - Navigate to/from the select component• Enter or Space - Open the select or select the highlighted option• Arrow Up/Down - Navigate between options• Page Up/Page Down - Navigate through options faster• Home/End - Jump to first/last option• Escape - Close the select without making changes
ARIA Attributes
Proper ARIA attributes for screen readers
• role="listbox" is applied to SelectContent• role="option" is applied to each SelectItem• aria-expanded indicates open/closed state on trigger• aria-controls links trigger to content• aria-selected indicates the currently selected item• aria-activedescendant identifies the keyboard-focused option• aria-label provides accessible labels when no visible label exists• aria-disabled indicates disabled items
Focus States
Visible focus indicators for keyboard users
• Focus moves to the first option when dropdown opens• Focus returns to trigger when option is selected• Focus is trapped in dropdown when open• Keyboard navigation manages highlighted option focus• Clicking outside closes dropdown and returns focus
Switch