Search
Search filters a list or catalog as the user types.
Components · Form
Search is a purpose-built recipe of input: a leading search icon identifies the field's job at a glance, and a trailing clear action appears once there's something to clear. It shares every --nm-input-* token, so it inherits sizes, states, and theming for free.
Overview
The Search component helps users quickly find items within a large or unstructured collection. Instead of choosing from a predefined list, users enter a search term to filter or locate relevant results.
When to use
Use the Search component when:
- Users need to filter tables, lists, or catalogs based on their input.
- Users need to search across content, commands, or resources, such as in a global search or command palette.
- The collection is too large to browse efficiently, for example when finding contacts, templates, documents, or products.
Anatomy
Search is .nm-input__container with a leading search icon and a conditional trailing clear button — no dedicated CSS of its own beyond what input already defines.
Reuse .nm-input__icon-leading for the search glyph and .nm-input__icon-trailing for clear — the same slots used by input's icon variants — so search never needs its own token group.
Sizes
Same five sizes as input — pick the one that matches the surface search lives in.
With results
Pair search with a .nm-dropdown to show live matches beneath the field — the same menu component used by select, so results inherit its hover, selection, and separator styling for free.
Matches, then a separator, then a "search everything" fallback action
No results
States
Empty → hover → focused with a query typed
Clear only appears with content
The trailing clear button should mount only once the field has a value — an empty search box shows just the leading icon, keeping the affordance honest about what it does.
Light & dark theme
Both previews are locked — they don't follow the page theme switcher.
Do & don't
Accessibility
Semantics
- Use
<input type="search">— it gets the platform's native clear affordance on some browsers and is announced correctly by assistive tech. - If results update live below the field, mark the results container with
aria-live="polite"so screen reader users hear the match count change.
Keyboard
- Escape clears the field when it has focus and a value (mirrors native
type="search"behavior in most browsers — replicate it if you intercept the keydown). - Arrow Down from the field should move focus into the results list when one is open.
Labeling
- A search field with no visible label still needs one — use
aria-label="Search documents"or a visually-hidden<label>. - The clear button requires
aria-label="Clear search"; the icon alone isn't accessible.
Playground
Implementation
Search is markup-only for the base field. Live filtering and the results dropdown need a small amount of JavaScript to wire input events to your data source.
<link rel="stylesheet" href="namirial-theme.css">
<div class="nm-input nm-input--md">
<div class="nm-input__container">
<span class="nm-input__icon-leading"><!-- search icon --></span>
<input type="search" class="nm-input__field" placeholder="Search documents" aria-label="Search documents">
</div>
</div>CSS classes
| Class | Values | Default |
|---|---|---|
nm-input--{size} | xs · sm · md · lg · xl | sm |
nm-input__icon-leading | Houses the search glyph | — |
nm-input__icon-trailing | Houses the clear button — mount conditionally | — |