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="info@bxswiss.com" required>
</div>
<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}}
</div>
{
"id": "field-id",
"type": "email",
"label": "Email address:",
"placeholder": "info@bxswiss.com",
"hideLabel": null,
"required": true,
"modifier": "field--required"
}