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 theu-hideclass. - To adjust arrow upl add the
is-openclass, where the element withcustom-selectclass. - To show/hide the button clear field, toggle the
u-hideclass.
<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>
Verification code input
| Input Type | Type | |
|---|---|---|
verification-code-input
|
character | Usualy used for code with numbers, but can use with amy type of input, limited for one char per textbox |
<form class="form u-width-full-line u-max-width-500">
<ul class="form-list">
<li class="form-item">
<label class="label">Enter Code</label>
<ol class="u-flex u-gap-16">
<li>
<input
type="text"
class="verification-code-input u-remove-input-number-buttons"
maxlength="1"
/>
</li>
<li>
<input
type="text"
class="verification-code-input u-remove-input-number-buttons"
maxlength="1"
/>
</li>
<li>
<input
type="text"
class="verification-code-input u-remove-input-number-buttons"
maxlength="1"
/>
</li>
<li>
<input
type="text"
class="verification-code-input u-remove-input-number-buttons"
maxlength="1"
/>
</li>
<li>
<input
type="text"
class="verification-code-input u-remove-input-number-buttons"
maxlength="1"
/>
</li>
<li>
<input
type="text"
class="verification-code-input u-remove-input-number-buttons"
maxlength="1"
/>
</li>
</ol>
</li>
</ul>
</form>
State large for verification code input:
| Class | Type | |
|---|---|---|
| is-large | size | inrease size to 60px width & height |
<form class="form u-width-full-line u-max-width-500">
<ul class="form-list">
<li class="form-item">
<label class="label">Enter Code</label>
<ol class="u-flex u-gap-16">
<li>
<input
type="text"
class="verification-code-input is-large u-remove-input-number-buttons"
maxlength="1"
/>
</li>
<li>
<input
type="text"
class="verification-code-input is-large u-remove-input-number-buttons"
maxlength="1"
/>
</li>
<li>
<input
type="text"
class="verification-code-input is-large u-remove-input-number-buttons"
maxlength="1"
/>
</li>
<li>
<input
type="text"
class="verification-code-input is-large u-remove-input-number-buttons"
maxlength="1"
/>
</li>
<li>
<input
type="text"
class="verification-code-input is-large u-remove-input-number-buttons"
maxlength="1"
/>
</li>
<li>
<input
type="text"
class="verification-code-input is-large u-remove-input-number-buttons"
maxlength="1"
/>
</li>
</ol>
</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>