Input
Text-like inputs: text, email, password, search, tel, url, number, and the date and time family, which get an icon on the trailing edge.
| Class | Does what |
|---|---|
input | Full-width field with the shared control surface |
input-error | Error color, for when aria-invalid is not available |
Basic
<input type="text" class="input" placeholder="Text" />
<input type="email" class="input" placeholder="you@example.com" />
<input type="password" class="input" value="hunter2" /><input type="text" placeholder="Text" />
<input type="email" placeholder="you@example.com" />
<input type="password" value="hunter2" />Date and time
<input type="date" class="input" />
<input type="time" class="input" />
<input type="month" class="input" /><input type="date" />
<input type="time" />
<input type="month" />Invalid and disabled
<input type="text" class="input" aria-invalid="true" value="Invalid" />
<input type="text" class="input" value="Disabled" disabled /><input type="text" aria-invalid="true" value="Invalid" />
<input type="text" value="Disabled" disabled />Classless: every <code>input</code> gets this styling except checkbox, radio, range, file, color, and the button types, which are styled as buttons.