← Back to Components

Form Selects

Select dropdown components with multiple sizes and states. Supports single selection with custom styling, grouped options, and comprehensive accessibility features.

Basic Select Usage

Standard select dropdowns with custom styling that matches the design system.

Basic Select

Choose from available options

Department

Select your department

Select Sizes

Three sizes available: Small (28px), Medium (36px), and Large (48px) heights.

Large Select (48px)

Use for prominent selection fields

Medium Select (36px)

Standard size for most forms

Small Select (28px)

Compact size for dense layouts

Select States

Interactive states provide visual feedback for user interactions and validation.

Default State

Normal select appearance

Focused State

Blue border when active

Error State

Please select a valid option

Disabled State

Cannot be changed

Select with Validation

Examples showing validation states, required fields, and helper text.

Required Selection

This field is required

Department Selection

This will determine your access permissions

Select Variants Showcase

Complete showcase of all select size and state combinations.

Large Selects (48px)

Large Default

Large Error

Error message

Large Disabled

Medium Selects (36px)

Medium Default

Medium Error

Error message

Medium Disabled

Small Selects (28px)

Small Default

Small Error

Error message

Small Disabled

Advanced Select Examples

Real-world examples with grouped options and longer option lists.

Employee Directory

Select an employee from the directory

Meeting Duration

How long will this meeting be?