Default

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.

Required

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

Inline

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