Form Field

Example Code

<!-- Use the 'field' class as a wrapper for form fields to style both the field and related label/help/error text. Use either of the two formats below for the markup: -->

<!-- Option 1 -->
<label class="field">
  Email Address
  <input type="email" />
</label>

<!-- Option 2 -->
<div class="field">
  <label for="field1">Email Address</label>
  <input id="field1" type="email" />
</div>

Result

Options

Supported Form Controls

The field wrapper supports the following form control elements:

Read-only/Disabled

Fields with the disabled or readonly attributes will have styling applied. The styles for each are slightly different, as readonly fields are focusable and disabled fields are not.

Help & Error Text

Fields may have help text, error text, or both.

This is printed on the back of your badge.
Your ID Number must be 8 digits long.

Compact Variant

Fields can be given a more condensed look by adding the compact class to either the field itself or to the containing form, .form, or fieldset element.

Compact Form

Regular Form

Prefix/Suffix

Fields may have a prefix (label that comes before) and/or suffix (label that comes after). This may be useful for providing context on how the data in the input field will be used. Use the class prefix if the item is before the input field in the markup, or suffix if it comes after. Wrap any prefixes, suffixes, and inputs in a div with the class input-group.

Action

Fields may have a button attached to the beginning or end. Similarly to prefixes and suffixes, you'll need to wrap the input (or select) and action button in a div that has the class input-group. The action button must also have the class action.

Fieldset

You can use a fieldset element with a corresponding legend to define a group of related input fields.

Deposit Amount
Console