Search
Search field with leading icon, clear button when filled and an optional keyboard shortcut hint.
Preview
HTML and CSS
The same component as plain HTML with pixels-ui.css, no framework needed.
<form role="search" class="px-field" onsubmit="return false">
<div class="px-input">
<svg class="px-icon" aria-hidden="true">…</svg>
<input type="search" placeholder="Search projects" aria-label="Search projects">
<button type="button" class="px-icon-btn px-input__clear" aria-label="Clear" onclick="this.previousElementSibling.value='';this.previousElementSibling.focus()"><svg class="px-icon" aria-hidden="true">…</svg></button>
<kbd class="px-kbd">⌘K</kbd>
</div>
</form>Usage
- Use role="search" on the form.
- Show the shortcut only on desktop.
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>API reference
| Class / attribute | Type | Description |
|---|---|---|
px-input__clear | class | Shown automatically when the field has text. |
px-kbd | class | Keyboard shortcut hint. |
Figma properties
Search30 variants · page “Input Fields”Open
Search field with leading icon, clear button when filled and an optional keyboard shortcut hint. Use role=search on the surrounding form.
| Property | Type | Values |
|---|---|---|
| Shortcut | Boolean | — |
| Size | Variant | Small Medium Large |
| State | Variant | Active Hover Focused 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-input-focus-halo | #2563eb2e | #2563eb2e |
Accessibility
- The clear button needs aria-label="Clear".