Input

Input elements are used to accept data from the user.

Class Default Disabled
.input
HTML
<input class="input" type="text" placeholder="Placeholder" />

Usage

Here is an example of a standard usage of input paired with a label.

HTML
<label class="label margin-bottom-xxs" for="input-demo">Label</label>
<input class="input" id="input-demo" type="text" placeholder="Placeholder" />

Sizes

input-sm/input-lg makes input a little bigger or smaller than the default.

HTML
<input class="input input-sm" type="text" placeholder="Placeholder" />
<input class="input margin-top-xs" type="text" placeholder="Placeholder" />
<input class="input input-lg margin-top-xs" type="text" placeholder="Placeholder" />

Validation states

input-danger/input-success helps with visual reflection of validation states.

State Class
Danger .input .input-danger
Success .input .input-success
HTML
<input class="input input-danger" type="text" placeholder="Placeholder" />

Figma