Forms

Search

Pill-shaped search field with an icon and a keyboard shortcut beside it.

CSS only

Example

⌘K

<label class="u-search">
  <svg class="u-i" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
  <input type="search" placeholder="Quick search" aria-label="Quick search">
  <kbd class="u-kbd">⌘K</kbd>
</label>

Installation

Search ships in the full package, in unslop.css:

curl -fsSL unslop.leallabs.dev/i | sh

No build It's just CSS: with unslop.css on the page, the classes already work.

Classes and variants

Class	What it does
`u-search`	The pill label. It gets a tile background when the input has focus.
`u-kbd`	Shortcut key, in a mono font. Also works on its own inside text.

Accessibility and keyboard

State and roles

Where	Attribute	What it says
`aria-label`	on the input	Required: the placeholder is not a name.
kbd	native element	It only shows the shortcut. Wiring the shortcut is up to your code.

Keyboard

Key	Does
Tab	focuses the field