Input

The input component (.input) wraps a native <input> element in a styled container that handles the border, focus ring, leading/trailing icon slots, and an optional clear button — without the input itself losing any native behavior. The wrapper is a <label> containing .input-el, so clicking anywhere in the styled box focuses the real field.

<label class="input">
  <input class="input-el" type="text" placeholder="you@example.com" aria-label="Email">
</label>