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 ">
    <label for="field-id" class="field__label">Instrument:</label>
    <input id="field-id" type="text" name="field-name" class="field__input" placeholder="ISIN / Ticker / Name">
<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": "text",
  "label": "Instrument:",
  "placeholder": "ISIN / Ticker / Name",
  "hideLabel": null