Select

v0.6.2

Documentation Under Review

The Select component provides a dropdown interface for selecting one or multiple options from a list. The product variant features compact sizing and efficient spacing optimized for data-dense application interfaces.

Installation

Install the Select component from the Catalyst component library:

npm install '@pmi/catalyst-select'

Examples

Basic Usage

A simple select with standard options:

Danger State

Select with error/danger styling for validation feedback:

Size Variants

The product variant provides compact sizes for efficient use of space:

Precomposed with Label and SubText

Complete form field composition with label and helper text:

Scrollable Content

Select with scroll buttons for long option lists:

Multi-Select with Avatars

Compact team member selection for application interfaces:

Multi-Select with Country Flags

Compact language or region selection:

Custom Styling with Theme Override

Product variant supports custom theme overrides for white-label applications:

API Reference

SelectRoot

The root container component that manages select state.

SelectTrigger

The button that toggles the select dropdown.

SelectContent

The dropdown content container with styling and positioning.

SelectItem

Individual selectable option within the dropdown.

SelectIcon

SelectLabel

SelectViewport

SelectSeparator

SelectScrollUpButton

SelectScrollDownButton

Size Specifications

Accessibility

The Select component implements WCAG 2.1 AA accessibility standards:

Keyboard Navigation

• Enter/Space: Open dropdown and select focused item
• Arrow Down/Up: Navigate through options
• Home/End: Jump to first/last option
• Escape: Close dropdown
• Type-ahead: Type to search options

Screen Reader Support

• Proper ARIA attributes via Radix UI primitives
• aria-labelledby connects label to select
• aria-describedby associates helper text
• Selected value announced on change
• Disabled state communicated to assistive technology

Focus Management

• Clear focus indicators with focus-visible:ring-1
• Focus trap within dropdown when open
• Focus returns to trigger on close
• High contrast focus ring colors in both light and dark modes

Color Contrast

• Text meets WCAG AA standards (4.5:1 minimum)
• Danger state uses high-contrast red tones
• Dark mode maintains proper contrast ratios
• Disabled state uses 40% opacity for clear visual feedback

Design Tokens

The component uses Catalyst design tokens for consistent theming:

Colors

• Background: bg-white, dark:bg-pmi-off-black-800
• Border: border-pmi-neutral-400
• Text: text-pmi-off-black-800, dark:text-white
• Hover: hover:bg-pmi-violet-50, dark:hover:bg-pmi-violet-700
• Focus: focus-visible:border-pmi-off-black-800, focus-visible:ring-pmi-off-black-800
• Danger: bg-pmi-red-50, border-pmi-red-500, text-pmi-red-500

Typography

• Uses font-display for consistent typography
• Compact sizes: text-sm, text-base, text-lg

Spacing

• Efficient padding via CVA: px-2 (sm), px-3 (md), px-4 (lg)
• Content margins: m-1, mx-2 my-1

Related Components

• Label - Form labels
• SubText - Helper text
• Checkbox - Multi-select alternatives
• Tag - For multi-select display

See Also

• Marketing Select - Larger variant for promotional contexts
• Form Patterns - Form composition guidelines
• Radix UI Select - Base primitive documentation