Select

A native select dropdown with consistent styling across browsers. Uses the same token system as Input for visual consistency.

Preview

CountrySelect a countryUnited KingdomUnited StatesGermanyFrance

RoleSelect a roleAdminEditorViewerPlease select a role.

Status (disabled)Active

Sizes

SmallOption AOption B

MediumOption AOption B

LargeOption AOption B

Features

• Native <select> element for maximum compatibility and accessibility.
• Custom chevron indicator via CSS background image.
• Matches Input heights, borders, and focus styles.
• Browser-native dropdown menu for option selection.

States

State	Appearance
Default	Resting with chevron indicator
Focus	Brand-purple border with focus shadow
Disabled	Reduced opacity, no interaction
Error	Red border with error message below

Props

Prop	Type	Default	Description
label	string	--	Visible label text
helper	string	--	Helper text below the select
error	string	--	Error message
size	'sm' | 'md' | 'lg'	'md'	Select height
disabled	boolean	false	Disables the select
placeholder	string	--	Placeholder option text
options	{ label: string; value: string }[]	--	Option items

Code example

React

import { Select } from '@thepace/lexicon/components';

<Select
  label="Country"
  placeholder="Select a country"
  options={[
    { label: 'United Kingdom', value: 'uk' },
    { label: 'United States', value: 'us' },
    { label: 'Germany', value: 'de' },
  ]}
/>

Vanilla HTML

<div class="lex-input-wrapper">
  <label class="lex-input__label">Country</label>
  <select class="lex-select lex-select--md">
    <option value="" disabled selected>Select a country</option>
    <option>United Kingdom</option>
    <option>United States</option>
  </select>
</div>

CSS class reference

Class	Purpose
.lex-select	Base select styles
.lex-select--sm	Small size
.lex-select--md	Medium size (default)
.lex-select--lg	Large size
.lex-select-wrapper--error	Error state on wrapper

Accessibility

• Label connected via htmlFor/id.
• aria-invalid="true" when error is set.
• aria-describedby points to helper or error text.
• Native <select> provides built-in keyboard navigation (arrow keys, type-ahead).

Guidelines

Do

• Include a disabled placeholder option as the first item (e.g. "Select a country").
• Use native select for 5+ options — for 2–4 options, consider a Radio group.

Don't

• Don't use a custom dropdown when native select provides better accessibility.
• Don't populate with more than 20 options without a search/filter mechanism.