Input

Text

Deprecated
Numeric input field was not designed by UX team and is now deprecated. Please use text input field instead.

<!-- basic example -->
<div class="ui-form__group">
  <label>
    <div class="ui-form__label">...</div>
    <div class="ui-form__sublabel">...</div>
    <div class="ui-form__input-wrapper">
      <input class="ui-input" type="text" placeholder="..." />
    </div>
  </label>
</div>

<!-- with error -->
<div class="ui-form__group ui-form__group--error">
  <label>
    <div class="ui-form__label">...</div>
    <div class="ui-form__sublabel">...</div>
    <div class="ui-form__input-wrapper">
      <input class="ui-input" type="text" placeholder="..." />
    </div>
    <div class="ui-form__message">...</div>
  </label>
</div>

<!-- numeric example -->
<div class="ui-form__group">
  <label>
    <div class="ui-form__label">...</div>
    <div class="ui-form__sublabel">...</div>
    <div class="ui-form__input-wrapper">
      <input class="ui-input" type="number" placeholder="..." />
    </div>
  </label>
</div>

Password

For input password, an extra wrapper div is necessary to position the visibility toggle button over the input element.

<!-- input password (default hidden) -->
<div class="ui-form__group">
  <label>
    <div class="ui-form__label">...</div>
    <div class="ui-form__sublabel">...</div>
    <div class="ui-form__input-wrapper">
      <input class="ui-input ui-input--password" type="password" placeholder="...">

      <!-- we add a button (inside the .ui-form__input-wrapper) to toggle password visibility -->
      <button class="ui-input__icon"></button>
    </div>
  </label>
</div>

Search

For search input, a magnifier is displayed. This magnifier acts as a submit button and will trigger the search form submission when clicked.

As per UX, the icon does NOT change to an x when text is typed.

<!-- input search -->
<div class="ui-form__group">
  <label>
    <div class="ui-form__label">...</div>
    <div class="ui-form__sublabel">...</div>
    <div class="ui-form__input-wrapper">
      <input class="ui-input ui-input--search" type="search" placeholder="...">

      <!-- button (type submit, with negative tabindex) for the magnifier icon -->
      <button class="ui-input__icon" type="submit" tabindex="-1"></button>
    </div>
  </label>
</div>