Aileron

Input with Button

Input with Button

A text input is an text field that allows users to enter alphanumeric and other character types.

Usage Guidelines

Text fields are either optional or required. This should be indicated next to the text label. Also, content should be validated when possible, after the user has finished interacting with the field.

Text label

Labels should:

  • Clearly state what information needs to be entered
  • Be short and succinct (1–3 words)

Placeholder text

Placeholder text is located inside the text field to show what to input. It should be used only for supplementary information because its format doesn’t pass color contrast and is not visible when real input begins.

Icon buttons

Buttons can be placed inside the fields to trigger widgets that will aid the user in making the proper choices through visual reference like a calendar or airport lookup.

Size

Text fields expand to the width of their container.

Accessibility

Hidden text should be added to the label if context requires so. Icon buttons should be focusable within navigation order.

<!-- Default -->
<div class="form-field-container field--button-group">
    <input type="text" class="field_input" value="" id="input1" name="input1" placeholder="Placeholder text">
    <label for="input1">
    Input label
  </label>
    <button type="button" class="field__button"><span class="icon-info" aria-hidden="true"></span></button>
</div>


<!-- Error -->
<div class="form-field-container field--button-group error">
    <input type="text" class="field_input" value="" id="input1-error" name="input1-error">
    <label for="input1-error">
    Input label - error
      <span class="show-for-sr">Error message</span>
  </label>
    <button type="button" class="field__button"><span class="icon-info" aria-hidden="true"></span></button>
    <span class="error-message" aria-hidden="true">Error message</span>
</div>