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
`numeric`	Numeric	Used for numeric input
-	Input with two buttons	Display with two buttons


      <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 u-width-full-line u-max-width-500"

              style="--amount-of-buttons: 1;"

            >

              <input

                type="number"

                class="input-text u-remove-input-number-buttons"

                placeholder="Placeholder"

              />

              <button

                class="button is-text u-height-auto u-padding-0 u-position-absolute u-inset-block-start-4 u-inset-inline-end-8"

                aria-label="Up value of numeric field"

                type="button"

              >

                <span class="icon-cheveron-up u-line-height-0-7" aria-hidden="true"></span>

              </button>

              <button

                class="button is-text u-height-auto u-padding-0 u-position-absolute u-inset-block-end-4 u-inset-inline-end-8"

                aria-label="Down value of numeric field"

                type="button"

              >

                <span class="icon-cheveron-down u-line-height-0-7" aria-hidden="true"></span>

              </button>

            </div>

          </li>

          <li class="form-item">

            <label class="label">Disabled</label>

            <div

              class="input-text-wrapper u-width-full-line u-max-width-500"

              style="--amount-of-buttons: 1;"

            >

              <input

                type="number"

                class="input-text u-remove-input-number-buttons"

                placeholder="Placeholder"

                disabled

              />

              <button

                class="button is-text u-height-auto u-padding-0 u-position-absolute u-inset-block-start-4 u-inset-inline-end-8"

                aria-label="Up value of numeric field"

                type="button"

                disabled

              >

                <span class="icon-cheveron-up u-line-height-0-7" aria-hidden="true"></span>

              </button>

              <button

                class="button is-text u-height-auto u-padding-0 u-position-absolute u-inset-block-end-4 u-inset-inline-end-8"

                aria-label="Down value of numeric field"

                type="button"

                disabled

              >

                <span class="icon-cheveron-down u-line-height-0-7" aria-hidden="true"></span>

              </button>

            </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.


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

Custom Select with Search

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-width-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-width-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>


      <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-bold 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


      <form class="form u-width-full-line u-max-width-500">

        <ul class="form-list">

          <li class="form-item">

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

          </li>

          <li class="form-item">

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

                placeholder="placeholder text"

              />

              <ul

                class="buttons-list u-cross-center u-position-absolute u-inset-block-start-8 u-inset-block-end-8 u-inset-inline-end-12"

              >

                <li class="buttons-list-item">

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

                </li>

                <li class="buttons-list-item u-margin-inline-start-8">

                  <label class="u-flex u-cross-center u-gap-8 u-margin-inline-start-8">

                    <input type="checkbox" class="is-small" />

                    <span class="eyebrow-heading-3 u-x-small u-color-text-gray">NULL</span>

                  </label>

                </li>

              </ul>

            </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>

          </li>

          <li class="form-item">

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

              <textarea

                class="input-text is-warning u-padding-block-end-32"

                placeholder="Type here..."

                style="--amount-of-buttons: 0.25;"

              ></textarea>

              <ul

                class="buttons-list u-cross-center u-position-absolute d u-inset-block-end-1 u-inset-inline-end-1 u-padding-block-8 u-padding-inline-12"

                style="border-end-end-radius:0.0625rem;"

              >

                <li class="buttons-list-item">

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

                </li>

                <li class="buttons-list-item u-margin-inline-start-8">

                  <label class="u-flex u-cross-center u-gap-8 u-margin-inline-start-8">

                    <input type="checkbox" class="is-small" />

                    <span class="eyebrow-heading-3 u-x-small u-color-text-gray">NULL</span>

                  </label>

                </li>

              </ul>

            </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>

          </li>

        </ul>

      </form>