Select
Single-select dropdown with label, hint and error. Opens a list of Menu items.
Preview
HTML and CSS
The same component as plain HTML with pixels-ui.css, no framework needed.
Team member
This person will be notified.
<div class="px-field">
<span class="px-label" id="sel-l">Team member</span>
<div class="px-select" data-px-select>
<button type="button" class="px-input px-select__trigger" aria-labelledby="sel-l sel-v">
<svg class="px-icon" aria-hidden="true">…</svg><span class="px-select__value" id="sel-v" data-placeholder="Select team member"></span><svg class="px-icon px-select__chev" aria-hidden="true">…</svg>
</button>
<div class="px-menu" role="listbox" aria-labelledby="sel-l" hidden>
<button type="button" class="px-menu__item" role="option" aria-selected="false"><span class="px-avatar px-avatar--xs">OR</span><span class="px-select__label">Olivia Rhye</span><svg class="px-icon px-menu__item-check" aria-hidden="true">…</svg></button>
<button type="button" class="px-menu__item" role="option" aria-selected="false"><span class="px-avatar px-avatar--xs">PB</span><span class="px-select__label">Phoenix Baker</span><svg class="px-icon px-menu__item-check" aria-hidden="true">…</svg></button>
<button type="button" class="px-menu__item" role="option" aria-selected="false"><span class="px-avatar px-avatar--xs">LS</span><span class="px-select__label">Lana Steiner</span><svg class="px-icon px-menu__item-check" aria-hidden="true">…</svg></button>
<button type="button" class="px-menu__item" role="option" aria-selected="false"><span class="px-avatar px-avatar--xs">DW</span><span class="px-select__label">Demi Wilkinson</span><svg class="px-icon px-menu__item-check" aria-hidden="true">…</svg></button>
</div>
</div>
<p class="px-hint">This person will be notified.</p>
</div>Usage
- Use for 6+ options. Fewer? Show Radios.
- On mobile a native <select> is often better (see example).
Installation
Included in the core files. No extra install.
<link rel="stylesheet" href="/css/pixels-tokens.css">
<link rel="stylesheet" href="/css/pixels-ui.css">
<script src="/js/pixels-ui.js" defer></script>Examples
Native select
Same field style on a native element. Best on mobile.
<div class="px-field">
<label class="px-label" for="sel-n">Country</label>
<div class="px-input">
<select id="sel-n" class="px-input__control px-select__native"><option>United States</option><option>India</option><option>United Arab Emirates</option><option>United Kingdom</option></select>
<svg class="px-icon px-select__chev" aria-hidden="true">…</svg>
</div>
</div>API reference
| Class / attribute | Type | Description |
|---|---|---|
px-select | class | Host. Add data-px-select for behaviour. |
px-select__trigger | class | The button (combine with px-input). |
px-select__value | class | Shows the chosen label; data-placeholder for empty. |
role="listbox" / role="option" | attribute | List and items (px-menu / px-menu__item). |
px-change | event | Fires on the host with detail.value. |
Figma properties
Select42 variants · page “Dropdown”Open
Single-select dropdown with label, hint and error. Open shows the option list (Menu items) below the trigger. Use a native <select> on mobile where possible. RTL text: Label/Hint properties driv…
| Property | Type | Values |
|---|---|---|
| Label | Text | “Team member” |
| Hint | Text | “This person will be notified.” |
| Leading icon | Boolean | — |
| Size | Variant | Small Medium Large |
| State | Variant | Active Hover Focused Filled Disabled Error Open |
| Direction | Variant | LTR RTL |
Design tokens
Component tokens from the Figma Component collection. Override them to restyle just this component.
| Token | Alias | Light value |
|---|---|---|
--px-input-content-placeholder | color-content-neutral-placeholder | #667085 |
--px-input-content-label | color-content-neutral-secondary | #475467 |
--px-input-content-hint | color-content-neutral-tertiary | #667085 |
--px-input-content-error | color-content-danger-default | #b42318 |
--px-input-radius | radius-12 | 12px |
--px-input-height-md | spacing-40 | 40px |
--px-input-padding-x | spacing-12 | 12px |
--px-selection-gap | spacing-sm | 8px |
--px-input-height-sm | spacing-36 | 36px |
--px-input-height-lg | control-height-lg | 48px |
--px-input-gap | spacing-8 | 8px |
--px-input-field-gap | spacing-8 | 8px |
--px-input-width | 320px | 320px |
--px-menu-background | color-surface-overlay | #ffffff |
Show all 30 tokens
| Token | Alias | Light value |
|---|---|---|
--px-menu-border | color-border-neutral-subtle | #f2f4f7 |
--px-menu-item-background-hover | color-background-neutral-default | #f2f4f7 |
--px-menu-item-background-selected | color-background-brand-subtle | #eff6ff |
--px-menu-item-content-selected | color-content-brand-default | #2563eb |
--px-menu-item-content-destructive | color-content-danger-default | #b42318 |
--px-menu-item-icon | color-content-neutral-secondary | #475467 |
--px-menu-section | color-content-neutral-tertiary | #667085 |
--px-menu-radius | radius-12 | 12px |
--px-menu-item-radius | radius-8 | 8px |
--px-menu-padding | spacing-xs | 4px |
--px-menu-item-padding-x | spacing-12 | 12px |
--px-menu-item-gap | spacing-sm | 8px |
--px-menu-item-height-sm | control-height-sm | 32px |
--px-menu-item-height-md | control-height-md | 40px |
--px-menu-width | 240px | 240px |
--px-input-focus-halo | #2563eb2e | #2563eb2e |
Accessibility
- Arrow keys move, Enter selects, Escape closes and returns focus.
- aria-expanded on the trigger.