Text Field
Styled native form inputs — no classes needed.
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.
<!-- 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="true" to the input to show a spinner. It
works with or without adornments.
The input must be wrapped in a <label> — the spinner
is rendered via the label's ::before pseudo-element.
<!-- standalone input -->
<label>
<input type="text" placeholder="Loading..." aria-busy="true" />
</label>
<!-- with adornment -->
<label>
<svg data-prefix>...</svg>
<input type="search" placeholder="Searching..." aria-busy="true" />
</label>