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