Whenever a form input is used that’s not a radio button or checkbox, the field component should be used to make sure the label and input are properly styled.


The field–required class adds a visual queue for the user to indicate that the form field is a required field.


The field–inline class places the label in front of the input field.

This should be used sparingly because this can cause accessibility issues for users who use a magnifying tool to view the website.

<div class="field field--required">
    <label for="field-id" class="field__label">Email address:</label>
    <input id="field-id" type="email" name="field-name" class="field__input" placeholder="" required>
<div class="field {{modifier}}">
	{{> @form-label text=label for=id class="field__label" hideLabel=hideLabel}}
	{{> @input type=type id=id class="field__input" placeholder=placeholder required=required}}
  "id": "field-id",
  "type": "email",
  "label": "Email address:",
  "placeholder": "",
  "hideLabel": null,
  "required": true,
  "modifier": "field--required"