Text Field – Design Portal

Text fields allow users to enter text into a UI. They typically appear in forms and dialogs.

Demo

Label Name

<label class="form-label" for="formInput">Label Name</label>
<input type="text" id="formInput" class="form-control" placeholder="Placeholder text"/>

.form-label {
  display: inline-block;
  font-size: 0.9rem;
  margin-block-end: 0.25rem;
}

.form-control {
  @include font(normal, 400, 1rem, 1.5, var(--body-font));
  appearance: none;
  background-clip: padding-box;
  background-color: var(--white);
  border-radius: var(--border-radius);
  border: .0625rem solid var(--light-gray-1);
  color: var(--black);
  display: block;
  inline-size: 100%;
  padding: 0.375rem 0.75rem;
}

No JS! 😀

States & Variations

Default

A custom text box with a label.

Label Name

<label class="form-label" for="formInput">Label Name</label>
<input type="text" id="formInput" class="form-control" placeholder="Placeholder text"/>

Floating label

A custom text box with a persistent floating label.

Label Name

<div class="form-floating">
  <label class="form-floating__label" for="formControl2">Label Name</label>
  <input type="text" id="formControl2" class="form-floating__control" placeholder="Placeholder text"/>
</div>

Password

A custom text box with a type of "password".

Label Name

<label class="form-label" for="formInput2">Label Name</label>
<input type="pasword" id="formInput2" class="form-control"/>

Disabled

A custom text box that is disabled.

<input type="text" id="formInput3" class="form-control" placeholder="Placeholder text" disabled/>

Anatomy

Text Box / Input
Label
Placeholder