Form
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>