Components

• Introduction
• Link
• List
• Description-list
• Table
• Button
• Button-group
• Message
• Input
• Select
• Textarea
• Checkbox
• Radio-group
• Segmented-control
• Content-container
• Form-container
• Media
• Summary
• Skip-link
• Header
• Footer
• Icons

Input

The input component represents an <input> element with an explicitly associated <label> element. The component also supports additional information and/or error messages associated with the input.

Overall usage

• Used within forms where single-line user input required.
• The type can include: text, tel, email, password, search, url and other valid options.
• The placeholder attribute can be added to the <input> element but should never be used as a replacement for the <label> element.
• For required fields, the boolean required attribute must also be applied to the <input> element.
• When errors occur, the input--invalid attribute should be injected into the parent container.
• The input--disabled attribute can be added to the parent container if the form control needs to be disabled.

Accessibility

• The <label> must be prgrammatically associated with the <input> element.
• The <label> element should only be hidden in cases where there is no other choices available, and only when the form is extremely simple and its purpose is clear to sighted users.
• For required fields, the required attribute must also be applied to the <input> element.
• The static, focus and hover states of the <input> element should be defined
• There must be a clearly visible focus state, and the method should be consistent across all focusable elements.

---

.input

Used to display an <input> form control and an explicitly associated <label>.

<div class="input">
  <label class="input__label" for="example1">
    <span class="input__content">Label for input</span>
    <input class="input__control" type="text" name="example1" id="example1">
  </label>
</div>

A help mesage can be placed directly after the <label> element using the message--help class.

<div class="input">
  <label class="input__label" for="example5">
    <span class="input__content">Label for input</span>
    <span class="message--help">Help message</span>
    <input class="input__control" type="text" id="example5">
  </label>
</div>

A required flag can be placed inside the <label> element using the message--required class. The required boolean attribute must be added to the <input>.

<div class="input">
  <label class="input__label" for="example6">
    <span class="input__content">Label for input <span class="message--required">(Required)</span></span>
    <input class="input__control" type="text" id="example6" required>
  </label>
</div>

---

.input--hidden

Used to display an <input> form control and an explicitly associated <label>. The <label> is not displayed on-screen, but is still available to assistive technologies.

<div class="input input--hidden">
  <label class="input__label" for="example4">
    <span class="input__content">Label for input</span>
    <input class="input__control" type="text" id="example4">
  </label>
</div>

---

.input--invalid

Used to inform the user that the form control has not been filled-in correctly.

<div class="input input--invalid">
  <label class="input__label" for="example7">
    <span class="input__content">Label for input <span class="message--required">(Required)</span></span>
    <input class="input__control" type="text" id="example7" required>
    <!-- Error message -->
    <span class="message--error">
      <span class="fas fa-times">
        <span class="u-hidden">Error</span>
      </span>
      Error message
    </span>
  </label>
</div>

---

.input--disabled

Used to present a disabled <input> element and label. The disabled boolean attribute must be added to the <input>.

<div class="input input--disabled">
  <label class="input__label" for="example8">
    <span class="input__content">Label for input</span>
    <input class="input__control" type="text" id="example8" disabled>
  </label>
</div>