Search field, Number input, Kbd

Search and number

<div class="dsgn-grid" data-cols="1" data-cols-tablet="2">
  <div class="dsgn-field"><label class="dsgn-label" for="dx-q">Search</label>
    <form class="dsgn-input dsgn-search" role="search" onsubmit="return false"><span class="dsgn-icon" aria-hidden="true">search</span><input type="search" id="dx-q" placeholder="Invoice or client">
    <button type="button" class="dsgn-field-button dsgn-search-clear" aria-label="Clear search"><span class="dsgn-icon" aria-hidden="true">close</span></button><kbd class="dsgn-kbd" aria-hidden="true">/</kbd></form></div>
  <div class="dsgn-field"><label class="dsgn-label" for="dx-days">Due in (days)</label>
    <div class="dsgn-input dsgn-number"><button type="button" class="dsgn-field-button" data-step="down" aria-label="Fewer days"><span class="dsgn-icon" aria-hidden="true">remove</span></button>
    <input type="number" id="dx-days" value="14" min="1" max="90" inputmode="numeric">
    <button type="button" class="dsgn-field-button" data-step="up" aria-label="More days"><span class="dsgn-icon" aria-hidden="true">add</span></button></div></div>
</div>

Usage

Search (clear button needs dsgn.js; "/" focuses the field that has data-dsgn-shortcut="/"):

The clear button shows only when there is text (needs a placeholder, :placeholder-shown). role="search" is a landmark: give each one a distinct aria-label when a page has more than one. The shortcut hint hides while the field is focused or filled.

Number input (steps need dsgn.js; they disable themselves at min / max):

Field buttons are 1 line-height square (so the field keeps the control height) with a hit area grown by pad-y on every side: a full control height, well above 24 × 24 (WCAG 2.5.8).

Details

Classes

.dsgn-search .dsgn-search-clear .dsgn-kbd .dsgn-field-button .dsgn-icon .dsgn-input .dsgn-number

Tokens used

--dsgn-border-strong --dsgn-border-width --dsgn-control-line-height --dsgn-control-pad-y --dsgn-focus --dsgn-focus-width --dsgn-font-sans --dsgn-font-size-caption --dsgn-font-weight-medium --dsgn-line-height-caption --dsgn-radius-s --dsgn-space-2 --dsgn-space-4 --dsgn-text --dsgn-text-disabled --dsgn-text-muted

In Figma

Search field · Number input · Kbd

Import alone

dsgn.systems/components/search.css