Input Field

Input fields are an easily discoverable, efficient, and accessible way for users to input information. They typically appear in forms or dialogue modals.

Types

There are a few different types of input field that the user can interact with:

Input Type Type
text Text Default text input 
<form class="form u-width-full-line u-max-width-500">
  <ul class="form-list">
    <li class="form-item">
      <label class="label">Label</label>
      <div class="input-text-wrapper">
        <input type="text" class="input-text" placeholder="Placeholder" />
      </div>
    </li>
  </ul>
</form>
Input Type Type
text Search Used to input one or more terms to conduct a search. 
<div
  class="input-text-wrapper is-with-end-button u-width-full-line u-max-width-500"
  style="--amount-of-buttons:1"
>
  <input type="search" placeholder="Search" />
  <div class="icon-search" aria-hidden="true"></div>
  <button
    class="button is-text is-only-icon"
    aria-label="Clear search"
    style="--button-size:1.5rem;"
  >
    <span class="icon-x" aria-hidden="true"></span>
  </button>
</div>
Input Type Type
password Password Used to input passwords or other sensitive data.
- Input with two buttons Displays up to two trailing icons to provide additional functionality to the text (for example: clear, copy, hide, edit). 
<form class="form u-width-full-line u-max-width-500">
  <ul class="form-list">
    <li class="form-item">
      <label class="label">Label</label>
      <div class="input-text-wrapper" style="--amount-of-buttons: 1;">
        <input type="password" class="input-text" placeholder="Placeholder" />
        <button class="show-password-button" aria-label="show password" type="button">
          <span class="icon-eye" aria-hidden="true"></span>
        </button>
      </div>
    </li>
    <li class="form-item">
      <label class="label">Label</label>
      <div class="input-text-wrapper" style="--amount-of-buttons:2">
        <input type="text" placeholder="Placeholder" />
        <div class="options-list">
          <button
            class="options-list-button"
            aria-label="show password / hide password"
            type="button"
          >
            <span class="icon-eye" aria-hidden="true"></span>
          </button>
          <button class="options-list-button" aria-label="copy text" type="button">
            <span class="icon-duplicate" aria-hidden="true"></span>
          </button>
        </div>
      </div>
    </li>
  </ul>
</form>
Input Type Type
file Upload file Used in case upload a file is necessary. 
<form class="form u-width-full-line u-max-width-500">
  <ul class="form-list">
    <li class="form-item">
      <label class="label">Label</label>
      <input type="file" name="file" id="file-file" size="1" />
    </li>
  </ul>
</form>
Input Type Type
text Multi Select Used to create ‘tags’ when the user types in the input field.
    • role
<form class="form u-width-full-line u-max-width-500">
  <ul class="form-list">
    <li class="form-item">
      <label class="label">Label</label>
      <div class="tags-input">
        <div class="tags">
          <ul class="tags-list">
            <li class="tags-item">
              <div class="input-tag">
                <span class="tag-text">
                  role
                  <div></div>
                </span>
                <button
                  class="input-tag-delete-button"
                  aria-label="delete all:role tag"
                  type="button"
                >
                  <span class="icon-x" aria-hidden="true"></span>
                </button>
              </div>
            </li>
          </ul>
        </div>
        <input type="text" class="tags-input-text" placeholder="Placeholder" />
      </div>
    </li>
  </ul>
</form>
Input Type Type
select Dropdown Allows users to choose one option from a list of values. 
<form class="form u-width-full-line u-max-width-500">
  <ul class="form-list">
    <li class="form-item">
      <label class="label">Label</label>
      <div class="select u-width-full-line">
        <select name="pets" id="pet-select">
          <option value="">Select option</option>
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
          <option value="3">Option 3</option>
          <option value="4">Option 4</option>
          <option value="5">Option 5</option>
          <option value="6">Option 6</option>
        </select>
        <span class="icon-cheveron-down" aria-hidden="true"></span>
      </div>
    </li>
  </ul>
</form>

Custom Select

Dropdown is made with drop-list. To hide items use the u-hide class.









<form class="form u-width-full-line u-max-width-500">
  <ul class="form-list">
    <li class="form-item">
      <label class="label">Label</label>
      <div class="custom-select is-open">
        <button
          class="input-text-wrapper u-width-full-line"
          type="button"
          style="--amount-of-buttons:1"
        >
          <span class="input-text"><span class="text">Placeholder</span></span>
          <div class="options-list is-no-separator">
            <div class="options-list-button">
              <span class="icon-cheveron-down" aria-hidden="true"></span>
            </div>
          </div>
        </button>
        <div class="drop is-block-end is-no-arrow">
          <section class="drop-section">
            <ul class="drop-list">
              <li class="drop-list-item">
                <button class="drop-button"><span class="text">Item 1</span></button>
              </li>
              <li class="drop-list-item">
                <button class="drop-button"><span class="text">Item 2</span></button>
              </li>
            </ul>
          </section>
        </div>
      </div>
    </li>
  </ul>
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
</form>
  • Dropdown is made with drop-list. To hide items use the u-hide class.
  • To adjust arrow upl add the is-open class, where the element with custom-select class.
  • To show/hide the button clear field, toggle the u-hide class.








<form class="form u-width-full-line u-max-width-500">
  <ul class="form-list">
    <li class="form-item">
      <label class="label">Label</label>
      <div class="custom-select is-open">
        <div class="input-text-wrapper" style="--amount-of-buttons:1">
          <input type="text" class="input-text" placeholder="Placeholder" />
          <div class="options-list">
            <button class="options-list-button u-hide" aria-label="clear field">
              <span class="icon-x" aria-hidden="true"></span>
            </button>
            <button class="options-list-button">
              <span class="icon-cheveron-down" aria-hidden="true"></span>
            </button>
          </div>
        </div>
        <div class="drop is-block-end is-no-arrow">
          <section class="drop-section">
            <ul class="drop-list">
              <li class="drop-list-item">
                <button class="drop-button"><span class="text">Item 1</span></button>
              </li>
              <li class="drop-list-item">
                <button class="drop-button"><span class="text">Item 2</span></button>
              </li>
            </ul>
          </section>
        </div>
      </div>
    </li>
  </ul>
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
</form>
 








<form class="form u-width-full-line u-max-width-500">
  <ul class="form-list">
    <li class="form-item">
      <label class="label">Label</label>
      <div class="custom-select is-open">
        <div class="input-text-wrapper" style="--amount-of-buttons:2">
          <input type="text" class="input-text" placeholder="Placeholder" value="bessie" />
          <div class="options-list">
            <button class="options-list-button" aria-label="clear field">
              <span class="icon-x" aria-hidden="true"></span>
            </button>
            <button class="options-list-button">
              <span class="icon-cheveron-down" aria-hidden="true"></span>
            </button>
          </div>
        </div>
        <div class="drop is-block-end is-no-arrow">
          <section class="drop-section">
            <ul class="drop-list">
              <li class="drop-list-item">
                <button class="drop-button">
                  <div class="u-flex u-cross-baseline u-gap-12">
                    <span
                      class="u-flex-basis-140 u-flex-shrink-0 u-text-start u-trim-start u-x-small u-color-text-gray"
                    >
                      63f1efg667fg6fg67fc68ac3515e4bc06
                    </span>
                    <span class="u-flex-1 u-trim-1">
                      Bessie, Cooper,
                      <a class="link" href="mailto:bessiecooper@gmail.com">
                        bessiecooper@gmail.com
                      </a>
                      , bessiecooper.com
                    </span>
                  </div>
                </button>
              </li>
              <li class="drop-list-item">
                <button class="drop-button">
                  <div class="u-flex u-cross-baseline u-gap-12">
                    <span
                      class="u-flex-basis-140 u-flex-shrink-0 u-text-start u-trim-start u-x-small u-color-text-gray"
                    >
                      63f1efg6673515e4bc06
                    </span>
                    <span class="u-flex-1 u-trim-1">
                      Baseball, Football,
                      <a class="link" href="mailto:ball@gmail.com">ball@gmail.com</a>
                      , playingball.com
                    </span>
                  </div>
                </button>
              </li>
            </ul>
          </section>
        </div>
      </div>
    </li>
  </ul>
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
</form>

  • Sorry we couldn’t find ‘63f1ec68ac3515e4bc0663f1’

    There are no documents that match your search.

















<form class="form u-width-full-line u-max-width-500">
  <ul class="form-list">
    <li class="form-item">
      <label class="label">Label</label>
      <div class="custom-select">
        <div class="input-text-wrapper">
          <input type="text" class="input-text" placeholder="Placeholder" />
          <div class="options-list">
            <button class="options-list-button u-hide" aria-label="clear field">
              <span class="icon-x" aria-hidden="true"></span>
            </button>
            <button class="options-list-button">
              <span class="icon-cheveron-down" aria-hidden="true"></span>
            </button>
          </div>
        </div>
        <div class="drop is-block-end is-no-arrow">
          <section class="drop-section">
            <div class="u-flex u-flex-vertical u-cross-center">
              <div>
                <img
                  class="u-only-light"
                  src="/empty-state-light.svg"
                  alt=""
                  aria-hidden="true"
                  height="120"
                  width="128"
                />
                <img
                  class="u-only-dark"
                  src="/empty-state-dark.svg"
                  alt=""
                  aria-hidden="true"
                  height="120"
                  width="128"
                />
              </div>
              <div class="u-text-center u-margin-block-start-4">
                <h2 class="body-text-2 u-trim-1">
                  <span class="text">Sorry we couldn’t find ‘63f1ec68ac3515e4bc0663f1’</span>
                </h2>
                <p class="text">There are no documents that match your search.</p>
              </div>
              <div class="u-flex u-gap-16 u-main-center u-margin-block-start-16">
                <button class="button is-secondary" type="button">
                  <span class="text">Clear Search</span>
                </button>
              </div>
            </div>
          </section>
        </div>
      </div>
    </li>
  </ul>
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
</form>
Input Type Type
textarea Textarea For inputs containing more than two lines of text (for example: articles, blog posts, user feedback). 
<form class="form u-width-full-line u-max-width-500">
  <ul class="form-list">
    <li class="form-item">
      <label class="label">Label</label>
      <textarea class="input-text" placeholder="Type here..."></textarea>
    </li>
  </ul>
</form>

States

States can be applied to all inputs fields:

Attribute Type
- Default Default text input
disabled Disabled Used in case the user can’t interact with an input field
readonly Readonly Used in case the user can’t change the content in the input field. Sometimes in read-only fields there is a copy button. 
<form class="form u-width-full-line u-max-width-500">
  <ul class="form-list">
    <li class="form-item">
      <label class="label">Label</label>
      <input type="text" class="input-text" value="placeholder text" />
    </li>
    <li class="form-item">
      <label class="label">Label</label>
      <input type="text" class="input-text" value="placeholder text" disabled />
    </li>
    <li class="form-item">
      <label class="label">Label</label>
      <input type="text" class="input-text" value="placeholder text" readonly />
    </li>
  </ul>
</form>

Helper Text

Helper text provides information and feedback about what to enter in an input. Use the helper class to add helper text below an input field.

Class Type
- Default Used to provide information about what should be entered into the input field.
u-success Success An indication that the information entered into a field is valid/correct.
u-warning Warning Used underneath the input field when the user provides incorrect information. This message should provide contextual instructions on how to fix the error.
u-error Error An indication that the information entered into a field is invalid/incorrect.

This is a helper

This is success

This is a warning

This is an error

<p class="helper">
  <span class="icon-info" aria-hidden="true"></span>
  <span class="text">This is a helper</span>
</p>
<p class="helper u-color-text-success">
  <span class="icon-check-circle" aria-hidden="true"></span>
  <span class="text">This is success</span>
</p>
<p class="helper u-color-text-warning">
  <span class="icon-exclamation" aria-hidden="true"></span>
  <span class="text">This is a warning</span>
</p>
<p class="helper u-color-text-danger">
  <span class="icon-exclamation-circle" aria-hidden="true"></span>
  <span class="text">This is an error</span>
</p>

Input with All Parameters Applied

(optional)
420

This is a warning

<div class="u-width-full-line u-max-width-500">
  <label class="label is-required">Label</label>
  <span class="optional">(optional)</span>
  <button class="tooltip" aria-label="variables info">
    <span class="icon-info" aria-hidden="true"></span>
    <span class="tooltip-popup" role="tooltip">
      <p class="text u-margin-block-start-8">
        Set variables or secret keys that will be passed as env vars to your function at runtime.
      </p>
    </span>
  </button>
  <div class="input-text-wrapper">
    <input
      type="text"
      class="input-text is-warning u-padding-inline-end-56"
      placeholder="placeholder text"
    />
    <span class="text-counter">
      <span class="text-counter-count">4</span>
      <span class="text-counter-separator"></span>
      <span class="text-counter-max">20</span>
    </span>
  </div>
  <p class="helper u-color-text-warning u-margin-block-start-8">
    <span class="icon-exclamation" aria-hidden="true"></span>
    <span class="text">This is a warning</span>
  </p>
</div>