A basic form field is made up of an input field and a possible combination of six additional elements (as shown below):
for="input-id"
attribute that points to the ID of the input that the label is defining.
You can apply help text to any input by adding a <small>
HTML tag with a .help-text
class applied to it. Typically, you would also include an <i>
tag inside of the <small>
tag to make the text italic.
An inline form control consists of an icon that has an actionable link attached to it. In order to position the icon, you must wrap the input and icon in a <div>
with the following classes:
.input-group
(required) - applies generic input-group styling..input-group__icon-inside-[direction]
(left or right) - places the icon inside the input to the left or right.You must also wrap the icon with a class of .icon--inside
. If the icon triggers an action when clicked, you would wrap the icon using an <a>
tag.
An inline form control consists of an icon that has an actionable link attached to it. In order to position the icon, you must wrap the input and icon in a <div>
with the following classes:
.input-group
(required) - applies generic input-group styling..input-group__icon-inside-[direction]
(left or right) - places the icon inside the input to the left or right.You must also wrap the icon with a class of .icon--inside
. If the icon triggers an action when clicked, you would wrap the icon using an <a>
tag.
The .field-validation-feedback
class is used as a wrapper for both validation text and live input feedback information. This class adds a default max width of 415px (the same default width of a form field), but can be adjusted if you need the feedback container to span the exact width of your input:
.field-validation-feedback (required) (default 415px width)
.field-validation-feedback__extra-small
.field-validation-feedback__small
.field-validation-feedback__medium
.field-validation-feedback__large
.field-validation-feedback__extra-large
.field-validation-feedback__full
<form action="">
<fieldset>
<label for="validation-example-default">Input with Default Validation Container</label>
<input type="text" name="validation-example-default" id="validation-example-default">
<div class="field-validation-feedback">
...
</div>
<label for="validation-example-full">Input with Default Full Validation Container</label>
<input type="text" name="validation-example-full" id="validation-example-full" maxlength="150">
<div class="field-validation-feedback field-validation-feedback__full">
...
</div>
</fieldset>
</form>
Add validation text to your input by adding a <div>
with a .field-validation
class on it. Additionally, you can add a <small>
HTML tag with a .validation__success
or .validation__error
class in order to apply the correct color to the validation text.
Add feedback to your input by adding a <div>
with a .field-validation
class on it. This will move your feedback text to the right of the input and will format the feedback side-by-side of the validation text if you have that in there as well.
You can add a character counter to your input field by adding a class and data attributes to the input.
js-char-counter
- Class that is added to the inputdata-char-feedback-target=""
- the ID of the field-feedback text container. This tells the character count module where to write the feedback text.maxlength
- The maxlength attribute is required so that the character count module knows the max number of characters to account for.