Combobox
Searchable select. Single: typing filters options. Multi: chosen values become removable Tags.
Preview
HTML and CSS
The same component as plain HTML with pixels-ui.css, no framework needed.
<div class="px-field">
<label class="px-label" for="cb-1">Skills</label>
<div class="px-select px-combobox" data-px-combobox="multi">
<div class="px-input">
<div class="px-combobox__tags">
<input id="cb-1" role="combobox" aria-controls="cb-1-list" aria-autocomplete="list" placeholder="Add skills">
</div>
<svg class="px-icon px-select__chev" aria-hidden="true">…</svg>
</div>
<div class="px-menu" role="listbox" id="cb-1-list" aria-multiselectable="true" hidden>
<div class="px-menu__item" role="option" id="cb-1-a" aria-selected="false">Product design<svg class="px-icon px-menu__item-check" aria-hidden="true">…</svg></div>
<div class="px-menu__item" role="option" id="cb-1-b" aria-selected="false">UX research<svg class="px-icon px-menu__item-check" aria-hidden="true">…</svg></div>
<div class="px-menu__item" role="option" id="cb-1-c" aria-selected="false">Design systems<svg class="px-icon px-menu__item-check" aria-hidden="true">…</svg></div>
<div class="px-menu__item" role="option" id="cb-1-d" aria-selected="false">Prototyping<svg class="px-icon px-menu__item-check" aria-hidden="true">…</svg></div>
<div class="px-menu__item" role="option" id="cb-1-e" aria-selected="false">Front-end development<svg class="px-icon px-menu__item-check" aria-hidden="true">…</svg></div>
<div class="px-menu__empty" hidden>No matches</div>
</div>
</div>
</div>Usage
- Use when there are many options and people know what they want.
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
Single
data-px-combobox="single".
<div class="px-field">
<label class="px-label" for="cb-2">Timezone</label>
<div class="px-select px-combobox" data-px-combobox="single">
<div class="px-input"><svg class="px-icon" aria-hidden="true">…</svg><div class="px-combobox__tags"><input id="cb-2" role="combobox" aria-controls="cb-2-list" aria-autocomplete="list" placeholder="Search timezone"></div><svg class="px-icon px-select__chev" aria-hidden="true">…</svg></div>
<div class="px-menu" role="listbox" id="cb-2-list" hidden>
<div class="px-menu__item" role="option" id="cb-2-a">Pacific Time (UTC−08:00)<svg class="px-icon px-menu__item-check" aria-hidden="true">…</svg></div>
<div class="px-menu__item" role="option" id="cb-2-b">Eastern Time (UTC−05:00)<svg class="px-icon px-menu__item-check" aria-hidden="true">…</svg></div>
<div class="px-menu__item" role="option" id="cb-2-c">London (UTC+00:00)<svg class="px-icon px-menu__item-check" aria-hidden="true">…</svg></div>
<div class="px-menu__item" role="option" id="cb-2-d">Dubai (UTC+04:00)<svg class="px-icon px-menu__item-check" aria-hidden="true">…</svg></div>
<div class="px-menu__item" role="option" id="cb-2-e">India (UTC+05:30)<svg class="px-icon px-menu__item-check" aria-hidden="true">…</svg></div>
<div class="px-menu__empty" hidden>No matches</div>
</div>
</div>
</div>API reference
| Class / attribute | Type | Description |
|---|---|---|
data-px-combobox="single|multi" | attribute | Mode (Figma Type). |
input[role="combobox"] | element | Filter input with aria-controls. |
px-combobox__tags | class | Holds Tags and the input (multi). |
Figma properties
Combobox16 variants · page “Dropdown”Open
Searchable select. Single: typing filters options; Multi: selected values become removable Tags inside the field. ARIA: role=combobox with aria-expanded and aria-activedescendant.
| Property | Type | Values |
|---|---|---|
| Type | Variant | Single Multi |
| State | Variant | Active Open Filled Disabled |
| 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-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-tag-background | color-surface-default | #ffffff |
--px-tag-border | color-border-neutral-default | #eaecf0 |
Show all 35 tokens
| Token | Alias | Light value |
|---|---|---|
--px-tag-content | color-content-neutral-secondary | #475467 |
--px-tag-icon | color-content-neutral-placeholder | #667085 |
--px-tag-radius | radius-sm | 4px |
--px-tag-gap | spacing-xs | 4px |
--px-menu-background | color-surface-overlay | #ffffff |
--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
- role=combobox with aria-expanded and aria-activedescendant.
- Backspace in an empty multi field removes the last tag.