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--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"
}