Text Field

Styled native form inputs. No classes needed.

Works with

Kbd: Shortcut hint as a suffix
Button: Action as a suffix
Loading: Spinner while the input is busy

Standalone

<link rel="stylesheet" href="https://esm.sh/@erikt/ui/text-field.css" />

Text

<input type="text" placeholder="First name" />

With icon

Wrap an input and adornments in a <label>. Add data-prefix for leading adornments and data-suffix for trailing ones.

⌘K USD

<!-- leading icon -->
<label>
  <svg data-prefix>...</svg>
  <input type="search" placeholder="Search..." />
</label>

<!-- leading + trailing -->
<label>
  <svg data-prefix>...</svg>
  <input type="text" placeholder="Card number" />
  <svg data-suffix>...</svg>
</label>

<!-- multiple trailing -->
<label>
  <input type="text" placeholder="Card number" />
  <svg data-suffix>...</svg>
  <svg data-suffix>...</svg>
</label>

<!-- kbd shortcut hint -->
<label>
  <input type="text" placeholder="Search..." />
  <kbd data-suffix>⌘K</kbd>
</label>

<!-- text suffix -->
<label>
  <input type="number" placeholder="0.00" />
  <small data-suffix>USD</small>
</label>

<!-- button suffix -->
<label>
  <input type="text" placeholder="Enter invite code" />
  <button data-suffix>Apply</button>
</label>

Loading

Add aria-busy to the input to show a spinner. It works with or without adornments.

The input has to be wrapped in a <label>. The spinner is drawn on the label's ::before.

Loading

<!-- standalone input -->
<label>
  <input type="text" placeholder="Loading..." aria-busy />
</label>

<!-- with adornment -->
<label>
  <svg data-prefix>...</svg>
  <input type="search" placeholder="Searching..." aria-busy />
</label>

API reference

Type	Classes / attributes	What it does
Prefix	`[data-prefix]`	Places the element at the start, inside the field
Suffix	`[data-suffix]`	Places the element at the end, inside the field
Loading	`[aria-busy]`	Shows a spinner in the field