Select Component

Overview

Purpose

The Select component dropdown (native/custom).within our design system. It follows our compound layer principles, ensuring consistency and reusability across applications.

When to Use

Use when you need collecting user input
Appropriate for inputs contexts
Follows compound component patterns

When Not to Use

Avoid when simpler alternatives exist
Don't use for display-only content
Consider alternatives for edge cases

Live Example

import React from 'react';
import Select from './components/Select';
import props from '/props.json';

export default function App() {
  return (
    <div style={{ padding: '2rem', display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh' }}>
      <Select {...props}>
        {props.children || 'Example select content'}
      </Select>
    </div>
  );
}

Open Sandbox

Anatomy

Understanding the structure of the Select component helps ensure proper implementation and customization.

Property	Description	Type
root	Slot rendered into [data-slot="select"].	Root
content	Content region of the component.	Slot
options	Available options	Slot
search	Search region of the component.	Slot
trigger	Trigger region of the component.	Slot
selectContainer	Select container region of the component.	Part
selectIndicator	Select indicator region of the component.	Part
indicatorIcon	Indicator icon region of the component.	Part
clearButton	Clear button region of the component.	Part
clearIcon	Clear icon region of the component.	Part
comboboxContainer	Combobox container region of the component.	Part
comboboxInput	Combobox input region of the component.	Part
comboboxList	Combobox list region of the component.	Part
comboboxOption	Combobox option region of the component.	Part
searchInput	Search input region of the component.	Part
text	Text region of the component.	Part
icons	Icons region of the component.	Part
clear	Clear region of the component.	Part
chevronIcon	Chevron icon region of the component.	Part
searchContainer	Search container region of the component.	Part
emptyState	Empty state region of the component.	Part
option	Slot rendered into [data-slot="select-option"].	Slot (required)
check	Check region of the component.	Part

Variants & States

import React from 'react';
import Select from './components/Select';
import props from '/props.json';

export default function App() {
  return (
    <div style={{ padding: '2rem', display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh' }}>
      <Select {...props}>
        {props.children || 'Example select content'}
      </Select>
    </div>
  );
}

Open Sandbox

API Reference

Props

Name	Type	Required	Default	Description
`placeholder`	`string`	No	`'Select an option...'`	—
`className`	`string`	No	`''`	—
`size`	`ControlSize`	No	`'md'`	—
`clearable`	`boolean`	No	`false`	—
`loading`	`boolean`	No	`false`	—
`name`	`string`	No	—	—
`required`	`boolean`	No	—	—
`onBlur`	`React.FocusEventHandler<HTMLElement>`	No	`{onBlur`	—

Accessibility

Standards Compliance

This component follows WCAG 2.1 AA guidelines and includes proper ARIA attributes, keyboard navigation, and screen reader support.

Common Pitfalls

Custom menus often inaccessible
no keyboard support.

Accessibility Checklist

○ Keyboard navigation support
○ Screen reader compatibility
○ Color contrast compliance
○ Focus management
○ ARIA attributes
○ Reduced motion support

Usage Guidelines

✓ Do

Use consistent spacing and sizing
Follow established patterns
Provide clear labels and descriptions
Test with assistive technologies

✗ Don't

Override core functionality
Use without proper context
Ignore accessibility requirements
Modify without design system approval

Examples

Basic Usage

Simple implementation with default props and common configurations.

import React from 'react';
import Select from './components/Select';
import props from '/props.json';

export default function App() {
  return (
    <div style={{ padding: '2rem', display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh' }}>
      <Select {...props}>
        {props.children || 'Example select content'}
      </Select>
    </div>
  );
}

Open Sandbox

Advanced Usage

Complex patterns including composition, state management, and real-world scenarios.

import React from 'react';

export default function App() {
  return (
    <div style={{ 
      padding: '2rem', 
      display: 'flex',
      flexDirection: 'column',
      gap: '1.5rem'
    }}>
      <h3>Select - Advanced Patterns</h3>
      <p>Advanced usage patterns for Select include:</p>
      <ul>
        <li>Composition with other components</li>
        <li>Custom styling and theming</li>
        <li>Controlled vs uncontrolled patterns</li>
        <li>Form integration</li>
        <li>Accessibility enhancements</li>
      </ul>
      <p style={{ color: '#6b7280', fontStyle: 'italic' }}>
        Full advanced examples coming soon.
      </p>
    </div>
  );
}

Open Sandbox

Development Tools

Use these tools to analyze the component's performance, design tokens, and accessibility during development.

Contribute

Help us improve the Select component documentation. Found an issue or have suggestions?

Edit this page Report an issue Contribution guidelines

Select

Overview

Purpose

When to Use

When Not to Use

Live Example

Anatomy

Variants & States

API Reference

Props

Accessibility

Standards Compliance

Common Pitfalls

Accessibility Checklist

Usage Guidelines

✓ Do

✗ Don't

Examples

Basic Usage

Advanced Usage

Development Tools

Contribute

Related Components

Checkbox

CheckboxGroup

ColorPicker

DatePicker

FileInput

Input