Input Fields

Class

No IconLeading IconTrailing IconNo Icon + Supp. TextLeading Icon + Supp. TextTrailing Icon + Supp. TextLeading + Trailing IconLeading + Trailing Icon + Supporting Text

Label

States

Outlined/EnabledFilled/EnabledOutlined/HoveredFilled/HoveredOutlined/FocusedFilled/FocusedOutlined/ErrorFilled/ErrorOutlined/DisabledFilled/Disabled

Label

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-outlined">
            <input
                id="ue"
                class="input-field"
                type="text"
                aria-label="Unpopulated enabled input field"
            />
            <label class="input-label" for="ue">Label</label>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

Label

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-filled">
            <input
                id="ue"
                class="input-field"
                type="text"
                aria-label="Unpopulated enabled input field"
            />
            <label class="input-label" for="ue">Label</label>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

Label

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-outlined">
            <input
            class="input-field is-hover"
            type="text"
            aria-label="Hovered input"
            >
            <label class="input-label" for="ue">Label</label>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

Label

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-filled">
            <input
                id="ue"
                class="input-field is-hover"
                type="text"
            />
            <label class="input-label" for="ue">Label</label>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

Label

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-outlined">
            <input
            class="input-field is-focus"
            type="text"
            autofocus
            >
            <label class="input-label" for="ue">Label</label>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

Label

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-filled">
            <input
                id="ue"
                class="input-field is-focus"
                type="text"
                autofocus
            />
            <label class="input-label" for="ue">Label</label>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

Label

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-outlined">
            <input
            class="input-field error"
            type="text"
            >
            <label class="input-label" for="ue">Label</label>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

Label

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-filled">
            <input
                id="ue"
                class="input-field error"
                type="text"
            />
            <label class="input-label" for="ue">Label</label>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

Label

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-outlined">
            <input
                id="ue"
                class="input-field"
                type="text"
                disabled
            />
            <label class="input-label" for="ue">Label</label>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

Label

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-filled">
            <input
                id="ue"
                class="input-field"
                type="text"
                disabled
            />
            <label class="input-label" for="ue">Label</label>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

Label

States

Outlined/EnabledFilled/EnabledOutlined/HoveredFilled/HoveredOutlined/Focused

Label

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-outlined leading-icon">
            <span class="input-icon leading">
                <svg viewBox="0 0 24 24" fill="none">
                    <circle cx="11" cy="11" r="7"
                            stroke="currentColor"
                            stroke-width="2"/>
                    <line x1="16.65" y1="16.65" x2="21" y2="21"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"/>
                </svg>
            </span>
            <input
                id="ls-ue"
                class="input-field leading-icon"
                type="text"
                aria-label="Unpopulated enabled input field"
            />
            <label class="input-label" for="ls-ue">Label</label>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

Label

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-filled leading-icon">
            <span class="input-icon leading">
                <svg viewBox="0 0 24 24" fill="none">
                    <circle cx="11" cy="11" r="7"
                            stroke="currentColor"
                            stroke-width="2"/>
                    <line x1="16.65" y1="16.65" x2="21" y2="21"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"/>
                </svg>
            </span>
            <input
                id="ls-ue"
                class="input-field leading-icon"
                type="text"
                aria-label="Unpopulated enabled input field"
            />
            <label class="input-label" for="ls-ue">Label</label>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

Label

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-outlined leading-icon">
            <span class="input-icon leading">
                <svg viewBox="0 0 24 24" fill="none">
                    <circle cx="11" cy="11" r="7"
                            stroke="currentColor"
                            stroke-width="2"/>
                    <line x1="16.65" y1="16.65" x2="21" y2="21"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"/>
                </svg>
            </span>
            <input
            class="input-field leading-icon is-hover"
            type="text"
            aria-label="Hovered input"
            >
            <label class="input-label" for="ls-ue">Label</label>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

Label

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-filled leading-icon">
            <span class="input-icon leading">
                <svg viewBox="0 0 24 24" fill="none">
                    <circle cx="11" cy="11" r="7"
                            stroke="currentColor"
                            stroke-width="2"/>
                    <line x1="16.65" y1="16.65" x2="21" y2="21"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"/>
                </svg>
            </span>
            <input
                id="ls-ue"
                class="input-field leading-icon is-hover"
                type="text"
            />
            <label class="input-label" for="ls-ue">Label</label>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

Label

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-outlined leading-icon">
            <span class="input-icon leading">
                <svg viewBox="0 0 24 24" fill="none">
                    <circle cx="11" cy="11" r="7"
                            stroke="currentColor"
                            stroke-width="2"/>
                    <line x1="16.65" y1="16.65" x2="21" y2="21"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"/>
                </svg>
            </span>
            <input
            class="input-field leading-icon is-focus"
            type="text"
            autofocus
            >
            <label class="input-label" for="ls-ue">Label</label>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

Label

States

Outlined/EnabledFilled/EnabledOutlined/HoveredFilled/HoveredOutlined/FocusedFilled/FocusedOutlined/ErrorFilled/ErrorOutlined/DisabledFilled/Disabled

Label

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-outlined trailing-icon">
            <input
                id="ts-ue"
                class="input-field trailing-icon"
                type="text"
                aria-label="Unpopulated enabled input field"
            />
            <label class="input-label" for="lts-ue">Label</label>
            <span class="input-icon trailing" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none">
                    <circle cx="12" cy="12" r="10"
                            stroke="currentColor"
                            stroke-width="2"/>
                    <path d="M9 9L15 15M15 9L9 15"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"/>
                </svg>
            </span>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

Label

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-filled trailing-icon">
            <input
                id="ts-ue"
                class="input-field trailing-icon"
                type="text"
                aria-label="Unpopulated enabled input field"
            />
            <label class="input-label" for="lts-ue">Label</label>
            <span class="input-icon trailing" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none">
                    <circle cx="12" cy="12" r="10"
                            stroke="currentColor"
                            stroke-width="2"/>
                    <path d="M9 9L15 15M15 9L9 15"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"/>
                </svg>
            </span>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

Label

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-outlined trailing-icon">
            <input
            class="input-field trailing-icon is-hover"
            type="text"
            aria-label="Hovered input"
            >
            <label class="input-label" for="lts-ue">Label</label>
            <span class="input-icon trailing" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none">
                    <circle cx="12" cy="12" r="10"
                            stroke="currentColor"
                            stroke-width="2"/>
                    <path d="M9 9L15 15M15 9L9 15"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"/>
                </svg>
            </span>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

Label

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-filled trailing-icon">
            <input
                id="lts-ue"
                class="input-field trailing-icon is-hover"
                type="text"
            />
            <label class="input-label" for="lts-ue">Label</label>
            <span class="input-icon trailing" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none">
                    <circle cx="12" cy="12" r="10"
                            stroke="currentColor"
                            stroke-width="2"/>
                    <path d="M9 9L15 15M15 9L9 15"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"/>
                </svg>
            </span>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

Label

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-outlined trailing-icon">
            <input
            class="input-field trailing-icon is-focus"
            type="text"
            autofocus
            >
            <label class="input-label" for="lts-ue">Label</label>
            <span class="input-icon trailing" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none">
                    <circle cx="12" cy="12" r="10"
                            stroke="currentColor"
                            stroke-width="2"/>
                    <path d="M9 9L15 15M15 9L9 15"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"/>
                </svg>
            </span>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

Label

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-filled trailing-icon">
            <input
                id="lts-ue"
                class="input-field trailing-icon is-focus"
                type="text"
                autofocus
            />
            <label class="input-label" for="lts-ue">Label</label>
            <span class="input-icon trailing" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none">
                    <circle cx="12" cy="12" r="10"
                            stroke="currentColor"
                            stroke-width="2"/>
                    <path d="M9 9L15 15M15 9L9 15"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"/>
                </svg>
            </span>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

Label

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-outlined trailing-icon">
            <input
            class="input-field trailing-icon error"
            type="text"
            >
            <label class="input-label" for="lts-ue">Label</label>
            <span class="input-icon trailing" aria-hidden="true">
                <svg viewBox="0 0 24 24">
                    <circle cx="12" cy="12" r="10" fill="currentColor"/>
                    <rect x="11" y="6" width="2" height="8" fill="#fff" rx="1"/>
                    <circle cx="12" cy="17" r="1.2" fill="#fff"/>
                </svg>
            </span>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

Label

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-filled trailing-icon">
            <input
                id="lts-ue"
                class="input-field trailing-icon error"
                type="text"
            />
            <label class="input-label" for="lts-ue">Label</label>
            <span class="input-icon trailing" aria-hidden="true">
                <svg viewBox="0 0 24 24">
                    <circle cx="12" cy="12" r="10" fill="currentColor"/>
                    <rect x="11" y="6" width="2" height="8" fill="#fff" rx="1"/>
                    <circle cx="12" cy="17" r="1.2" fill="#fff"/>
                </svg>
            </span>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

Label

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-outlined trailing-icon">
            <input
                id="ts-ue"
                class="input-field trailing-icon"
                type="text"
                disabled
            />
            <label class="input-label" for="lts-ue">Label</label>
            <span class="input-icon trailing" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none">
                    <circle cx="12" cy="12" r="10"
                            stroke="currentColor"
                            stroke-width="2"/>
                    <path d="M9 9L15 15M15 9L9 15"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"/>
                </svg>
            </span>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

Label

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-filled trailing-icon">
            <input
                id="ts-ue"
                class="input-field trailing-icon"
                type="text"
                disabled
            />
            <label class="input-label" for="lts-ue">Label</label>
            <span class="input-icon trailing" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none">
                    <circle cx="12" cy="12" r="10"
                            stroke="currentColor"
                            stroke-width="2"/>
                    <path d="M9 9L15 15M15 9L9 15"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"/>
                </svg>
            </span>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

Label

Supporting text

States

Outlined/EnabledFilled/EnabledOutlined/HoveredFilled/HoveredOutlined/FocusedFilled/FocusedOutlined/ErrorFilled/ErrorOutlined/DisabledFilled/Disabled

Label

Supporting text

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-outlined has-supporting">
            <input
                id="lts-ue"
                class="input-field"
                type="text"
                aria-label="Unpopulated enabled input field"
            />
            <label class="input-label" for="lts-ue">Label</label>
            <p class="input-helper">Supporting text</p>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

Label

Supporting text

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-filled has-supporting">
            <input
                id="ls-ue"
                class="input-field"
                type="text"
                aria-label="Unpopulated enabled input field"
            />
            <label class="input-label" for="ls-ue">Label</label>
            <p class="input-helper">Supporting text</p>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

Label

Supporting text

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-outlined has-supporting">
            <input
            class="input-field is-hover"
            type="text"
            aria-label="Hovered input"
            >
            <label class="input-label" for="ls-ue">Label</label>
            <p class="input-helper">Supporting text</p>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

Label

Supporting text

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-filled has-supporting">
            <input
                id="lts-ue"
                class="input-field is-hover"
                type="text"
            />
            <label class="input-label" for="ls-ue">Label</label>
            <p class="input-helper">Supporting text</p>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

Label

Supporting text

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-outlined has-supporting">
            <input
            class="input-field is-focus"
            type="text"
            autofocus
            >
            <label class="input-label" for="ls-ue">Label</label>
            <p class="input-helper">Supporting text</p>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

Label

Supporting text

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-filled has-supporting">
            <input
                id="lts-ue"
                class="input-field is-focus"
                type="text"
                autofocus
            />
            <label class="input-label" for="ls-ue">Label</label>
            <p class="input-helper">Supporting text</p>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

Label

Supporting text

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-outlined has-supporting">
            <input
            class="input-field error"
            type="text"
            >
            <label class="input-label" for="ls-ue">Label</label>
            <p class="input-helper">Supporting text</p>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

Label

Supporting text

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-filled has-supporting">
            <input
                id="lts-ue"
                class="input-field error"
                type="text"
            />
            <label class="input-label" for="ls-ue">Label</label>
            <p class="input-helper">Supporting text</p>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

Label

Supporting text

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-outlined has-supporting">
            <input
                id="ls-ue"
                class="input-field"
                type="text"
                disabled
            />
            <label class="input-label" for="lts-ue">Label</label>
            <p class="input-helper">Supporting text</p>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

Label

Supporting text

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-filled has-supporting">
            <input
                id="lts-ue"
                class="input-field"
                type="text"
                disabled
            />
            <label class="input-label" for="lts-ue">Label</label>
            <p class="input-helper">Supporting text</p>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

Label

Supporting text

States

Outlined/EnabledFilled/EnabledOutlined/HoveredFilled/HoveredOutlined/FocusedFilled/FocusedOutlined/ErrorFilled/ErrorOutlined/DisabledFilled/Disabled

Label

Supporting text

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-outlined leading-icon has-supporting">
            <span class="input-icon leading">
                <svg viewBox="0 0 24 24" fill="none">
                    <circle cx="11" cy="11" r="7"
                            stroke="currentColor"
                            stroke-width="2"/>
                    <line x1="16.65" y1="16.65" x2="21" y2="21"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"/>
                </svg>
            </span>
            <input
                id="lts-ue"
                class="input-field leading-icon"
                type="text"
                aria-label="Unpopulated enabled input field"
            />
            <label class="input-label" for="lts-ue">Label</label>
            <p class="input-helper">Supporting text</p>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

Label

Supporting text

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-filled leading-icon has-supporting">
            <span class="input-icon leading">
                <svg viewBox="0 0 24 24" fill="none">
                    <circle cx="11" cy="11" r="7"
                            stroke="currentColor"
                            stroke-width="2"/>
                    <line x1="16.65" y1="16.65" x2="21" y2="21"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"/>
                </svg>
            </span>
            <input
                id="ls-ue"
                class="input-field leading-icon"
                type="text"
                aria-label="Unpopulated enabled input field"
            />
            <label class="input-label" for="ls-ue">Label</label>
            <p class="input-helper">Supporting text</p>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

Label

Supporting text

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-outlined leading-icon has-supporting">
            <span class="input-icon leading">
                <svg viewBox="0 0 24 24" fill="none">
                    <circle cx="11" cy="11" r="7"
                            stroke="currentColor"
                            stroke-width="2"/>
                    <line x1="16.65" y1="16.65" x2="21" y2="21"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"/>
                </svg>
            </span>
            <input
            class="input-field leading-icon is-hover"
            type="text"
            aria-label="Hovered input"
            >
            <label class="input-label" for="ls-ue">Label</label>
            <p class="input-helper">Supporting text</p>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

Label

Supporting text

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-filled leading-icon has-supporting">
            <span class="input-icon leading">
                <svg viewBox="0 0 24 24" fill="none">
                    <circle cx="11" cy="11" r="7"
                            stroke="currentColor"
                            stroke-width="2"/>
                    <line x1="16.65" y1="16.65" x2="21" y2="21"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"/>
                </svg>
            </span>
            <input
                id="lts-ue"
                class="input-field leading-icon is-hover"
                type="text"
            />
            <label class="input-label" for="ls-ue">Label</label>
            <p class="input-helper">Supporting text</p>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

Label

Supporting text

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-outlined leading-icon has-supporting">
            <span class="input-icon leading">
                <svg viewBox="0 0 24 24" fill="none">
                    <circle cx="11" cy="11" r="7"
                            stroke="currentColor"
                            stroke-width="2"/>
                    <line x1="16.65" y1="16.65" x2="21" y2="21"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"/>
                </svg>
            </span>
            <input
            class="input-field leading-icon is-focus"
            type="text"
            autofocus
            >
            <label class="input-label" for="ls-ue">Label</label>
            <p class="input-helper">Supporting text</p>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

Label

Supporting text

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-filled leading-icon has-supporting">
            <span class="input-icon leading">
                <svg viewBox="0 0 24 24" fill="none">
                    <circle cx="11" cy="11" r="7"
                            stroke="currentColor"
                            stroke-width="2"/>
                    <line x1="16.65" y1="16.65" x2="21" y2="21"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"/>
                </svg>
            </span>
            <input
                id="lts-ue"
                class="input-field leading-icon is-focus"
                type="text"
                autofocus
            />
            <label class="input-label" for="ls-ue">Label</label>
            <p class="input-helper">Supporting text</p>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

Label

Supporting text

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-outlined leading-icon has-supporting">
            <span class="input-icon leading">
                <svg viewBox="0 0 24 24" fill="none">
                    <circle cx="11" cy="11" r="7"
                            stroke="currentColor"
                            stroke-width="2"/>
                    <line x1="16.65" y1="16.65" x2="21" y2="21"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"/>
                </svg>
            </span>
            <input
            class="input-field leading-icon error"
            type="text"
            >
            <label class="input-label" for="ls-ue">Label</label>
            <p class="input-helper">Supporting text</p>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

Label

Supporting text

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-filled leading-icon has-supporting">
            <span class="input-icon leading">
                <svg viewBox="0 0 24 24" fill="none">
                    <circle cx="11" cy="11" r="7"
                            stroke="currentColor"
                            stroke-width="2"/>
                    <line x1="16.65" y1="16.65" x2="21" y2="21"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"/>
                </svg>
            </span>
            <input
                id="lts-ue"
                class="input-field leading-icon trailing-icon error"
                type="text"
            />
            <label class="input-label" for="ls-ue">Label</label>
            <p class="input-helper">Supporting text</p>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

Label

Supporting text

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-outlined leading-icon has-supporting">
            <span class="input-icon leading">
                <svg viewBox="0 0 24 24" fill="none">
                    <circle cx="11" cy="11" r="7"
                            stroke="currentColor"
                            stroke-width="2"/>
                    <line x1="16.65" y1="16.65" x2="21" y2="21"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"/>
                </svg>
            </span>
            <input
                id="ls-ue"
                class="input-field leading-icon"
                type="text"
                disabled
            />
            <label class="input-label" for="lts-ue">Label</label>
            <p class="input-helper">Supporting text</p>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

Label

Supporting text

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-filled leading-icon has-supporting">
            <span class="input-icon leading">
                <svg viewBox="0 0 24 24" fill="none">
                    <circle cx="11" cy="11" r="7"
                            stroke="currentColor"
                            stroke-width="2"/>
                    <line x1="16.65" y1="16.65" x2="21" y2="21"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"/>
                </svg>
            </span>
            <input
                id="lts-ue"
                class="input-field leading-icon"
                type="text"
                disabled
            />
            <label class="input-label" for="lts-ue">Label</label>
            <p class="input-helper">Supporting text</p>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

Label

Supporting text

States

Outlined/EnabledFilled/EnabledOutlined/HoveredFilled/HoveredOutlined/FocusedFilled/FocusedOutlined/ErrorFilled/ErrorOutlined/DisabledFilled/Disabled

Label

Supporting text

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-outlined trailing-icon has-supporting">
            <input
                id="ts-ue"
                class="input-field leading-icon trailing-icon"
                type="text"
                aria-label="Unpopulated enabled input field"
            />
            <label class="input-label" for="lts-ue">Label</label>
            <span class="input-icon trailing" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none">
                    <circle cx="12" cy="12" r="10"
                            stroke="currentColor"
                            stroke-width="2"/>
                    <path d="M9 9L15 15M15 9L9 15"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"/>
                </svg>
            </span>
            <p class="input-helper">Supporting text</p>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

Label

Supporting text

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-filled trailing-icon has-supporting">
            <input
                id="ts-ue"
                class="input-field trailing-icon"
                type="text"
                aria-label="Unpopulated enabled input field"
            />
            <label class="input-label" for="lts-ue">Label</label>
            <span class="input-icon trailing" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none">
                    <circle cx="12" cy="12" r="10"
                            stroke="currentColor"
                            stroke-width="2"/>
                    <path d="M9 9L15 15M15 9L9 15"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"/>
                </svg>
            </span>
            <p class="input-helper">Supporting text</p>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

Label

Supporting text

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-outlined trailing-icon has-supporting">
            <input
            class="input-field trailing-icon is-hover"
            type="text"
            aria-label="Hovered input"
            >
            <label class="input-label" for="lts-ue">Label</label>
            <span class="input-icon trailing" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none">
                    <circle cx="12" cy="12" r="10"
                            stroke="currentColor"
                            stroke-width="2"/>
                    <path d="M9 9L15 15M15 9L9 15"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"/>
                </svg>
            </span>
            <p class="input-helper">Supporting text</p>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

Label

Supporting text

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-filled trailing-icon has-supporting">
            <input
                id="lts-ue"
                class="input-field trailing-icon is-hover"
                type="text"
            />
            <label class="input-label" for="lts-ue">Label</label>
            <span class="input-icon trailing" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none">
                    <circle cx="12" cy="12" r="10"
                            stroke="currentColor"
                            stroke-width="2"/>
                    <path d="M9 9L15 15M15 9L9 15"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"/>
                </svg>
            </span>
            <p class="input-helper">Supporting text</p>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

Label

Supporting text

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-outlined trailing-icon has-supporting">
            <input
            class="input-field trailing-icon is-focus"
            type="text"
            autofocus
            >
            <label class="input-label" for="lts-ue">Label</label>
            <span class="input-icon trailing" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none">
                    <circle cx="12" cy="12" r="10"
                            stroke="currentColor"
                            stroke-width="2"/>
                    <path d="M9 9L15 15M15 9L9 15"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"/>
                </svg>
            </span>
            <p class="input-helper">Supporting text</p>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

Label

Supporting text

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-filled trailing-icon has-supporting">
            <input
                id="lts-ue"
                class="input-field trailing-icon is-focus"
                type="text"
                autofocus
            />
            <label class="input-label" for="lts-ue">Label</label>
            <span class="input-icon trailing" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none">
                    <circle cx="12" cy="12" r="10"
                            stroke="currentColor"
                            stroke-width="2"/>
                    <path d="M9 9L15 15M15 9L9 15"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"/>
                </svg>
            </span>
            <p class="input-helper">Supporting text</p>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

Label

Supporting text

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-outlined trailing-icon has-supporting">
            <input
            class="input-field trailing-icon error"
            type="text"
            >
            <label class="input-label" for="lts-ue">Label</label>
            <span class="input-icon trailing" aria-hidden="true">
                <svg viewBox="0 0 24 24">
                    <circle
                        cx="12"
                        cy="12"
                        r="10"
                        fill="currentColor"
                    />
                    <rect
                        x="11"
                        y="6"
                        width="2"
                        height="8"
                        fill="#fff"
                        rx="1"
                    />
                    <circle
                        cx="12"
                        cy="17"
                        r="1.2"
                        fill="#fff"
                    />
                </svg>
            </span>
            <p class="input-helper">Supporting text</p>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

Label

Supporting text

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-filled trailing-icon has-supporting">
            <input
                id="lts-ue"
                class="input-field trailing-icon error"
                type="text"
            />
            <label class="input-label" for="lts-ue">Label</label>
            <span class="input-icon trailing" aria-hidden="true">
                <svg viewBox="0 0 24 24">
                    <circle
                        cx="12"
                        cy="12"
                        r="10"
                        fill="currentColor"
                    />
                    <rect
                        x="11"
                        y="6"
                        width="2"
                        height="8"
                        fill="#fff"
                        rx="1"
                    />
                    <circle
                        cx="12"
                        cy="17"
                        r="1.2"
                        fill="#fff"
                    />
                </svg>
            </span>
            <p class="input-helper">Supporting text</p>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

Label

Supporting text

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-outlined trailing-icon has-supporting">
            <input
                id="ts-ue"
                class="input-field trailing-icon"
                type="text"
                disabled
            />
            <label class="input-label" for="lts-ue">Label</label>
            <span class="input-icon trailing" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none">
                    <circle cx="12" cy="12" r="10"
                            stroke="currentColor"
                            stroke-width="2"/>
                    <path d="M9 9L15 15M15 9L9 15"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"/>
                </svg>
            </span>
            <p class="input-helper">Supporting text</p>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

Label

Supporting text

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-filled trailing-icon has-supporting">
            <input
                id="ts-ue"
                class="input-field trailing-icon"
                type="text"
                disabled
            />
            <label class="input-label" for="lts-ue">Label</label>
            <span class="input-icon trailing" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none">
                    <circle cx="12" cy="12" r="10"
                            stroke="currentColor"
                            stroke-width="2"/>
                    <path d="M9 9L15 15M15 9L9 15"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"/>
                </svg>
            </span>
            <p class="input-helper">Supporting text</p>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

Label

States

Outlined/EnabledFilled/EnabledOutlined/HoveredFilled/HoveredOutlined/FocusedFilled/FocusedOutlined/ErrorFilled/ErrorOutlined/DisabledFilled/Disabled

Label

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-outlined leading-icon trailing-icon">
            <span class="input-icon leading">
                <svg viewBox="0 0 24 24" fill="none">
                    <circle cx="11" cy="11" r="7"
                            stroke="currentColor"
                            stroke-width="2"/>
                    <line x1="16.65" y1="16.65" x2="21" y2="21"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"/>
                </svg>
            </span>
            <input
                id="lts-ue"
                class="input-field leading-icon trailing-icon"
                type="text"
                aria-label="Unpopulated enabled input field"
            />
            <label class="input-label" for="lts-ue">Label</label>
            <span class="input-icon trailing" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none">
                    <circle cx="12" cy="12" r="10"
                            stroke="currentColor"
                            stroke-width="2"/>
                    <path d="M9 9L15 15M15 9L9 15"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"/>
                </svg>
            </span>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

Label

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-filled leading-icon trailing-icon">
            <span class="input-icon leading">
                <svg viewBox="0 0 24 24" fill="none">
                    <circle cx="11" cy="11" r="7"
                            stroke="currentColor"
                            stroke-width="2"/>
                    <line x1="16.65" y1="16.65" x2="21" y2="21"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"/>
                </svg>
            </span>
            <input
                id="lts-ue"
                class="input-field leading-icon trailing-icon"
                type="text"
                aria-label="Unpopulated enabled input field"
            />
            <label class="input-label" for="lts-ue">Label</label>
            <span class="input-icon trailing" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none">
                    <circle cx="12" cy="12" r="10"
                            stroke="currentColor"
                            stroke-width="2"/>
                    <path d="M9 9L15 15M15 9L9 15"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"/>
                </svg>
            </span>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

Label

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-outlined leading-icon trailing-icon">
            <span class="input-icon leading">
                <svg viewBox="0 0 24 24" fill="none">
                    <circle cx="11" cy="11" r="7"
                            stroke="currentColor"
                            stroke-width="2"/>
                    <line x1="16.65" y1="16.65" x2="21" y2="21"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"/>
                </svg>
            </span>
            <input
            class="input-field leading-icon trailing-icon is-hover"
            type="text"
            aria-label="Hovered input"
            >
            <label class="input-label" for="lts-ue">Label</label>
            <span class="input-icon trailing" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none">
                    <circle cx="12" cy="12" r="10"
                            stroke="currentColor"
                            stroke-width="2"/>
                    <path d="M9 9L15 15M15 9L9 15"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"/>
                </svg>
            </span>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

Label

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-filled leading-icon trailing-icon">
            <span class="input-icon leading">
                <svg viewBox="0 0 24 24" fill="none">
                    <circle cx="11" cy="11" r="7"
                            stroke="currentColor"
                            stroke-width="2"/>
                    <line x1="16.65" y1="16.65" x2="21" y2="21"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"/>
                </svg>
            </span>
            <input
                id="lts-ue"
                class="input-field leading-icon trailing-icon is-hover"
                type="text"
            />
            <label class="input-label" for="lts-ue">Label</label>
            <span class="input-icon trailing" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none">
                    <circle cx="12" cy="12" r="10"
                            stroke="currentColor"
                            stroke-width="2"/>
                    <path d="M9 9L15 15M15 9L9 15"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"/>
                </svg>
            </span>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

Label

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-outlined leading-icon trailing-icon">
            <span class="input-icon leading">
                <svg viewBox="0 0 24 24" fill="none">
                    <circle cx="11" cy="11" r="7"
                            stroke="currentColor"
                            stroke-width="2"/>
                    <line x1="16.65" y1="16.65" x2="21" y2="21"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"/>
                </svg>
            </span>
            <input
            class="input-field leading-icon trailing-icon is-focus"
            type="text"
            autofocus
            >
            <label class="input-label" for="lts-ue">Label</label>
            <span class="input-icon trailing" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none">
                    <circle cx="12" cy="12" r="10"
                            stroke="currentColor"
                            stroke-width="2"/>
                    <path d="M9 9L15 15M15 9L9 15"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"/>
                </svg>
            </span>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

Label

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-filled leading-icon trailing-icon">
            <span class="input-icon leading">
                <svg viewBox="0 0 24 24" fill="none">
                    <circle cx="11" cy="11" r="7"
                            stroke="currentColor"
                            stroke-width="2"/>
                    <line x1="16.65" y1="16.65" x2="21" y2="21"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"/>
                </svg>
            </span>
            <input
                id="lts-ue"
                class="input-field leading-icon trailing-icon is-focus"
                type="text"
                autofocus
            />
            <label class="input-label" for="lts-ue">Label</label>
            <span class="input-icon trailing" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none">
                    <circle cx="12" cy="12" r="10"
                            stroke="currentColor"
                            stroke-width="2"/>
                    <path d="M9 9L15 15M15 9L9 15"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"/>
                </svg>
            </span>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

Label

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-outlined leading-icon trailing-icon">
            <span class="input-icon leading">
                <svg viewBox="0 0 24 24" fill="none">
                    <circle cx="11" cy="11" r="7"
                            stroke="currentColor"
                            stroke-width="2"/>
                    <line x1="16.65" y1="16.65" x2="21" y2="21"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"/>
                </svg>
            </span>
            <input
            class="input-field leading-icon trailing-icon error"
            type="text"
            >
            <label class="input-label" for="lts-ue">Label</label>
            <span class="input-icon trailing" aria-hidden="true">
                <svg viewBox="0 0 24 24">
                    <circle
                        cx="12"
                        cy="12"
                        r="10"
                        fill="currentColor"
                    />
                    <rect
                        x="11"
                        y="6"
                        width="2"
                        height="8"
                        fill="#fff"
                        rx="1"
                    />
                    <circle
                        cx="12"
                        cy="17"
                        r="1.2"
                        fill="#fff"
                    />
                </svg>
            </span>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

Label

Code

HTML

html <div data-theme> <div class="state-box"> <div class="input-wrapper input-filled leading-icon trailing-icon"> <span class="input-icon leading"> <svg viewBox="0 0 24 24" fill="none"> <circle cx="11" cy="11" r="7" stroke="currentColor" stroke-width="2"/> <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="currentColor" stroke-width="2" stroke-linecap="round"/> </svg> </span> <input id="lts-ue" class="input-field leading-icon trailing-icon error" type="text" /> <label class="input-label" for="lts-ue">Label</label> <span class="input-icon trailing" aria-hidden="true"> <svg viewBox="0 0 24 24"> <circle cx="12" cy="12" r="10" fill="currentColor" /> <rect x="11" y="6" width="2" height="8" fill="#fff" rx="1" /> <circle cx="12" cy="17" r="1.2" fill="#fff" /> </svg> </span> </div> </div> </div>

CSS

```css [data-theme] {

.input-wrapper { position: relative; width: var(--token-input-width); font-family: var(--text-font-stack); }

/ ================= FIELD ================= /

.input-field { width: 100%; height: 56px; box-sizing: border-box;

padding: 0 16px;
padding-top: 24px;

font-size: 0.9rem;
font-weight: 400;
line-height: 24px;

color: var(--token-input-text-color);
background: var(--token-input-filled-background);

border: 0;
border-bottom: 2px solid var(--token-input-active-indicator-focus);
border-radius: 4px 4px 0 0;

outline: none;
transition: all 0.15s ease;

&::placeholder {
  color: transparent;
}

}

/ ================= LABEL ================= /

.input-label { position: absolute; left: 16px; top: 8px; transform: none;

font-size: 0.75rem;
font-weight: 400;
line-height: 1rem;

color: var(--token-input-label-color-focus);

pointer-events: none;
transition: 0.15s ease;

}

/ ================= ICONS ================= /

.input-icon { position: absolute; top: 16px;

width: 24px;
height: 24px;

display: flex;
align-items: center;
justify-content: center;

color: var(--token-input-icon-color);

svg {
  width: 24px;
  height: 24px;
  display: block;
}

&.leading { left: 12px; }
&.trailing { right: 12px; }

}

/ ================= ICON PADDING ================= /

.input-field.leading-icon { padding-left: 52px; }

.input-field.trailing-icon { padding-right: 52px; }

.input-field.leading-icon ~ .input-label { left: 52px; }

.input-field.error ~ .input-icon { color: var(--token-input-icon-color-error); }

.input-field:disabled ~ .input-icon { color: var(--token-input-icon-color-disabled); }

/ ================= SUPPORTING TEXT ================= /

.input-helper { margin-top: 4px; margin-left: 16px;

font-size: 0.75rem;

color: var(--token-input-supporting-color);

}

.input-helper.error { color: var(--token-input-supporting-color-error); }

.input-field:disabled ~ .input-helper { color: var(--token-input-supporting-color-disabled); }

/ ================= HOVER STATES ================= /

.input-field.is-hover:hover { background: var(--token-input-filled-background-hover); border-bottom-color: var(--token-input-active-indicator-hover); }

.input-wrapper.input-outlined .input-field.is-hover:hover { border-color: var(--token-input-outline-hover); }

/ ================= FOCUS STATES ================= /

.input-field.is-focus:focus { border-bottom: 3px solid var(--token-input-active-indicator-focus); }

.input-field.is-focus:focus ~ .input-label { color: var(--token-input-label-color-focus); }

.input-wrapper.input-outlined .input-field.is-focus:focus { border: 3px solid var(--token-input-outline-focus); }

.input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label { color: var(--token-input-label-color-focus); }

/ ================= ERROR STATES ================= /

.input-field.error { border-bottom: 3px solid var(--token-input-active-indicator-error); }

.input-field.error ~ .input-label { color: var(--token-input-label-color-error); }

.input-field.error ~ .input-helper { color: var(--token-input-supporting-color-error); }

.input-field.error ~ .input-icon.trailing { color: var(--token-input-icon-color-error); }

/ Outlined error / .input-wrapper.input-outlined .input-field.error { border: 3px solid var(--token-input-outline-error); }

/ ================= DISABLED STATES ================= /

.input-field:disabled { border-bottom-color: var(--token-input-active-indicator-disabled); color: var(--token-input-text-disabled); cursor: not-allowed; }

.input-field:disabled ~ .input-label { color: var(--token-input-label-color-disabled); }

.input-field:disabled ~ .input-helper { color: var(--token-input-supporting-color-disabled); }

.input-field:disabled ~ .input-icon { color: var(--token-input-icon-color-disabled); }

/ Outlined disabled / .input-wrapper.input-outlined .input-field:disabled { border-color: var(--token-input-outline-disabled); }

/ ================= OUTLINED ================= /

.input-wrapper.input-outlined .input-field { background: #fff;

border: 2px solid var(--token-input-outline-focus);
border-radius: 4px;

padding-top: 16px;
padding-bottom: 16px;

}

.state-hover .input-wrapper.input-outlined .input-field:hover { border-color: var(--token-input-outline-hover); }

.input-wrapper.input-outlined .input-field.error { border: 3px solid var(--token-input-outline-error); }

.input-wrapper.input-outlined .input-field:disabled { border-color: var(--token-input-outline-disabled); }

.input-wrapper.input-outlined .input-label { background: #fff; padding: 0 4px; top: 0; transform: translateY(-50%); z-index: 1; }

.input-wrapper.input-outlined .input-field.leading-icon ~ .input-label { left: 16px; }

/ ================= DEMO BOX ================= /

.state-box { width: 100%;

display: flex;
justify-content: center;
align-items: center;

padding: 24px;
margin: 8px 0 16px;

}

}

```

Label

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-outlined leading-icon trailing-icon">
            <span class="input-icon leading">
                <svg viewBox="0 0 24 24" fill="none">
                    <circle cx="11" cy="11" r="7"
                            stroke="currentColor"
                            stroke-width="2"/>
                    <line x1="16.65" y1="16.65" x2="21" y2="21"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"/>
                </svg>
            </span>
            <input
                id="lts-ue"
                class="input-field leading-icon trailing-icon"
                type="text"
                disabled
            />
            <label class="input-label" for="lts-ue">Label</label>
            <span class="input-icon trailing" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none">
                    <circle cx="12" cy="12" r="10"
                            stroke="currentColor"
                            stroke-width="2"/>
                    <path d="M9 9L15 15M15 9L9 15"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"/>
                </svg>
            </span>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

Label

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-filled leading-icon trailing-icon">
            <span class="input-icon leading">
                <svg viewBox="0 0 24 24" fill="none">
                    <circle cx="11" cy="11" r="7"
                            stroke="currentColor"
                            stroke-width="2"/>
                    <line x1="16.65" y1="16.65" x2="21" y2="21"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"/>
                </svg>
            </span>
            <input
                id="lts-ue"
                class="input-field leading-icon trailing-icon"
                type="text"
                disabled
            />
            <label class="input-label" for="lts-ue">Label</label>
            <span class="input-icon trailing" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none">
                    <circle cx="12" cy="12" r="10"
                            stroke="currentColor"
                            stroke-width="2"/>
                    <path d="M9 9L15 15M15 9L9 15"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"/>
                </svg>
            </span>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

Label

Supporting text

States

Outlined/EnabledFilled/EnabledOutlined/HoveredFilled/HoveredOutlined/FocusedFilled/FocusedOutlined/ErrorFilled/ErrorOutlined/DisabledFilled/Disabled

Label

Supporting text

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-outlined leading-icon trailing-icon has-supporting">
            <span class="input-icon leading">
                <svg viewBox="0 0 24 24" fill="none">
                    <circle cx="11" cy="11" r="7"
                            stroke="currentColor"
                            stroke-width="2"/>
                    <line x1="16.65" y1="16.65" x2="21" y2="21"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"/>
                </svg>
            </span>
            <input
                id="lts-ue"
                class="input-field leading-icon trailing-icon"
                type="text"
                aria-label="Unpopulated enabled input field"
            />
            <label class="input-label" for="lts-ue">Label</label>
            <span class="input-icon trailing" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none">
                    <circle cx="12" cy="12" r="10"
                            stroke="currentColor"
                            stroke-width="2"/>
                    <path d="M9 9L15 15M15 9L9 15"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"/>
                </svg>
            </span>
            <p class="input-helper">Supporting text</p>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

Label

Supporting text

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-filled leading-icon trailing-icon has-supporting">
            <span class="input-icon leading">
                <svg viewBox="0 0 24 24" fill="none">
                    <circle cx="11" cy="11" r="7"
                            stroke="currentColor"
                            stroke-width="2"/>
                    <line x1="16.65" y1="16.65" x2="21" y2="21"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"/>
                </svg>
            </span>
            <input
                id="lts-ue"
                class="input-field leading-icon trailing-icon"
                type="text"
                aria-label="Unpopulated enabled input field"
            />
            <label class="input-label" for="lts-ue">Label</label>
            <span class="input-icon trailing" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none">
                    <circle cx="12" cy="12" r="10"
                            stroke="currentColor"
                            stroke-width="2"/>
                    <path d="M9 9L15 15M15 9L9 15"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"/>
                </svg>
            </span>
            <p class="input-helper">Supporting text</p>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

Label

Supporting text

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-outlined leading-icon trailing-icon has-supporting">
            <span class="input-icon leading">
                <svg viewBox="0 0 24 24" fill="none">
                    <circle cx="11" cy="11" r="7"
                            stroke="currentColor"
                            stroke-width="2"/>
                    <line x1="16.65" y1="16.65" x2="21" y2="21"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"/>
                </svg>
            </span>
            <input
            class="input-field leading-icon trailing-icon is-hover"
            type="text"
            aria-label="Hovered input"
            >
            <label class="input-label" for="lts-ue">Label</label>
            <span class="input-icon trailing" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none">
                    <circle cx="12" cy="12" r="10"
                            stroke="currentColor"
                            stroke-width="2"/>
                    <path d="M9 9L15 15M15 9L9 15"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"/>
                </svg>
            </span>
            <p class="input-helper">Supporting text</p>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

Label

Supporting text

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-filled leading-icon trailing-icon has-supporting">
            <span class="input-icon leading">
                <svg viewBox="0 0 24 24" fill="none">
                    <circle cx="11" cy="11" r="7"
                            stroke="currentColor"
                            stroke-width="2"/>
                    <line x1="16.65" y1="16.65" x2="21" y2="21"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"/>
                </svg>
            </span>
            <input
                id="lts-ue"
                class="input-field leading-icon trailing-icon is-hover"
                type="text"
            />
            <label class="input-label" for="lts-ue">Label</label>
            <span class="input-icon trailing" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none">
                    <circle cx="12" cy="12" r="10"
                            stroke="currentColor"
                            stroke-width="2"/>
                    <path d="M9 9L15 15M15 9L9 15"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"/>
                </svg>
            </span>
            <p class="input-helper">Supporting text</p>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

Label

Supporting text

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-outlined leading-icon trailing-icon has-supporting">
            <span class="input-icon leading">
                <svg viewBox="0 0 24 24" fill="none">
                    <circle cx="11" cy="11" r="7"
                            stroke="currentColor"
                            stroke-width="2"/>
                    <line x1="16.65" y1="16.65" x2="21" y2="21"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"/>
                </svg>
            </span>
            <input
            class="input-field leading-icon trailing-icon is-focus"
            type="text"
            autofocus
            >
            <label class="input-label" for="lts-ue">Label</label>
            <span class="input-icon trailing" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none">
                    <circle cx="12" cy="12" r="10"
                            stroke="currentColor"
                            stroke-width="2"/>
                    <path d="M9 9L15 15M15 9L9 15"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"/>
                </svg>
            </span>
            <p class="input-helper">Supporting text</p>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

Label

Supporting text

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-filled leading-icon trailing-icon has-supporting">
            <span class="input-icon leading">
                <svg viewBox="0 0 24 24" fill="none">
                    <circle cx="11" cy="11" r="7"
                            stroke="currentColor"
                            stroke-width="2"/>
                    <line x1="16.65" y1="16.65" x2="21" y2="21"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"/>
                </svg>
            </span>
            <input
                id="lts-ue"
                class="input-field leading-icon trailing-icon is-focus"
                type="text"
                autofocus
            />
            <label class="input-label" for="lts-ue">Label</label>
            <span class="input-icon trailing" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none">
                    <circle cx="12" cy="12" r="10"
                            stroke="currentColor"
                            stroke-width="2"/>
                    <path d="M9 9L15 15M15 9L9 15"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"/>
                </svg>
            </span>
            <p class="input-helper">Supporting text</p>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

Label

Supporting text

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-outlined leading-icon trailing-icon has-supporting">
            <span class="input-icon leading">
                <svg viewBox="0 0 24 24" fill="none">
                    <circle cx="11" cy="11" r="7"
                            stroke="currentColor"
                            stroke-width="2"/>
                    <line x1="16.65" y1="16.65" x2="21" y2="21"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"/>
                </svg>
            </span>
            <input
            class="input-field leading-icon trailing-icon error"
            type="text"
            >
            <label class="input-label" for="lts-ue">Label</label>
            <span class="input-icon trailing" aria-hidden="true">
                <svg viewBox="0 0 24 24">
                    <circle
                        cx="12"
                        cy="12"
                        r="10"
                        fill="currentColor"
                    />
                    <rect
                        x="11"
                        y="6"
                        width="2"
                        height="8"
                        fill="#fff"
                        rx="1"
                    />
                    <circle
                        cx="12"
                        cy="17"
                        r="1.2"
                        fill="#fff"
                    />
                </svg>
            </span>
            <p class="input-helper">Supporting text</p>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

Label

Supporting text

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-filled leading-icon trailing-icon has-supporting">
            <span class="input-icon leading">
                <svg viewBox="0 0 24 24" fill="none">
                    <circle cx="11" cy="11" r="7"
                            stroke="currentColor"
                            stroke-width="2"/>
                    <line x1="16.65" y1="16.65" x2="21" y2="21"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"/>
                </svg>
            </span>
            <input
                id="lts-ue"
                class="input-field leading-icon trailing-icon error"
                type="text"
            />
            <label class="input-label" for="lts-ue">Label</label>
            <span class="input-icon trailing" aria-hidden="true">
                <svg viewBox="0 0 24 24">
                    <circle
                        cx="12"
                        cy="12"
                        r="10"
                        fill="currentColor"
                    />
                    <rect
                        x="11"
                        y="6"
                        width="2"
                        height="8"
                        fill="#fff"
                        rx="1"
                    />
                    <circle
                        cx="12"
                        cy="17"
                        r="1.2"
                        fill="#fff"
                    />
                </svg>
            </span>
            <p class="input-helper">Supporting text</p>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

Label

Supporting text

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-outlined leading-icon trailing-icon has-supporting">
            <span class="input-icon leading">
                <svg viewBox="0 0 24 24" fill="none">
                    <circle cx="11" cy="11" r="7"
                            stroke="currentColor"
                            stroke-width="2"/>
                    <line x1="16.65" y1="16.65" x2="21" y2="21"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"/>
                </svg>
            </span>
            <input
                id="lts-ue"
                class="input-field leading-icon trailing-icon"
                type="text"
                disabled
            />
            <label class="input-label" for="lts-ue">Label</label>
            <span class="input-icon trailing" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none">
                    <circle cx="12" cy="12" r="10"
                            stroke="currentColor"
                            stroke-width="2"/>
                    <path d="M9 9L15 15M15 9L9 15"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"/>
                </svg>
            </span>
            <p class="input-helper">Supporting text</p>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

Label

Supporting text

Code

HTMLCSS

<div data-theme>
    <div class="state-box">
        <div class="input-wrapper input-filled leading-icon trailing-icon has-supporting">
            <span class="input-icon leading">
                <svg viewBox="0 0 24 24" fill="none">
                    <circle cx="11" cy="11" r="7"
                            stroke="currentColor"
                            stroke-width="2"/>
                    <line x1="16.65" y1="16.65" x2="21" y2="21"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"/>
                </svg>
            </span>
            <input
                id="lts-ue"
                class="input-field leading-icon trailing-icon"
                type="text"
                disabled
            />
            <label class="input-label" for="lts-ue">Label</label>
            <span class="input-icon trailing" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none">
                    <circle cx="12" cy="12" r="10"
                            stroke="currentColor"
                            stroke-width="2"/>
                    <path d="M9 9L15 15M15 9L9 15"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"/>
                </svg>
            </span>
            <p class="input-helper">Supporting text</p>
        </div>
    </div>
</div>

[data-theme] {

  .input-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* ================= FIELD ================= */

  .input-field {
    width: 100%;
    height: 56px;
    box-sizing: border-box;

    padding: 0 16px;
    padding-top: 24px;

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 24px;

    color: var(--token-input-text-color);
    background: var(--token-input-filled-background);

    border: 0;
    border-bottom: 2px solid var(--token-input-active-indicator-focus);
    border-radius: 4px 4px 0 0;

    outline: none;
    transition: all 0.15s ease;

    &::placeholder {
      color: transparent;
    }
  }

  /* ================= LABEL ================= */

  .input-label {
    position: absolute;
    left: 16px;
    top: 8px;
    transform: none;

    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;

    color: var(--token-input-label-color-focus);

    pointer-events: none;
    transition: 0.15s ease;
  }

  /* ================= ICONS ================= */

  .input-icon {
    position: absolute;
    top: 16px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--token-input-icon-color);

    svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    &.leading { left: 12px; }
    &.trailing { right: 12px; }
  }

  /* ================= ICON PADDING ================= */

  .input-field.leading-icon {
    padding-left: 52px;
  }

  .input-field.trailing-icon {
    padding-right: 52px;
  }

  .input-field.leading-icon ~ .input-label {
    left: 52px;
  }

  .input-field.error ~ .input-icon {
    color: var(--token-input-icon-color-error);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* ================= SUPPORTING TEXT ================= */

  .input-helper {
    margin-top: 4px;
    margin-left: 16px;

    font-size: 0.75rem;

    color: var(--token-input-supporting-color);
  }

  .input-helper.error {
    color: var(--token-input-supporting-color-error);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  /* ================= HOVER STATES ================= */

  .input-field.is-hover:hover {
    background: var(--token-input-filled-background-hover);
    border-bottom-color: var(--token-input-active-indicator-hover);
  }

  .input-wrapper.input-outlined .input-field.is-hover:hover {
    border-color: var(--token-input-outline-hover);
  }

  /* ================= FOCUS STATES ================= */

  .input-field.is-focus:focus {
    border-bottom: 3px solid var(--token-input-active-indicator-focus);
  }

  .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus {
    border: 3px solid var(--token-input-outline-focus);
  }

  .input-wrapper.input-outlined .input-field.is-focus:focus ~ .input-label {
    color: var(--token-input-label-color-focus);
  }

  /* ================= ERROR STATES ================= */

  .input-field.error {
    border-bottom: 3px solid var(--token-input-active-indicator-error);
  }

  .input-field.error ~ .input-label {
    color: var(--token-input-label-color-error);
  }

  .input-field.error ~ .input-helper {
    color: var(--token-input-supporting-color-error);
  }

  .input-field.error ~ .input-icon.trailing {
    color: var(--token-input-icon-color-error);
  }

  /* Outlined error */
  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  /* ================= DISABLED STATES ================= */

  .input-field:disabled {
    border-bottom-color: var(--token-input-active-indicator-disabled);
    color: var(--token-input-text-disabled);
    cursor: not-allowed;
  }

  .input-field:disabled ~ .input-label {
    color: var(--token-input-label-color-disabled);
  }

  .input-field:disabled ~ .input-helper {
    color: var(--token-input-supporting-color-disabled);
  }

  .input-field:disabled ~ .input-icon {
    color: var(--token-input-icon-color-disabled);
  }

  /* Outlined disabled */
  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  /* ================= OUTLINED ================= */

  .input-wrapper.input-outlined .input-field {
    background: #fff;

    border: 2px solid var(--token-input-outline-focus);
    border-radius: 4px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .state-hover .input-wrapper.input-outlined .input-field:hover {
    border-color: var(--token-input-outline-hover);
  }

  .input-wrapper.input-outlined .input-field.error {
    border: 3px solid var(--token-input-outline-error);
  }

  .input-wrapper.input-outlined .input-field:disabled {
    border-color: var(--token-input-outline-disabled);
  }

  .input-wrapper.input-outlined .input-label {
    background: #fff;
    padding: 0 4px;
    top: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .input-wrapper.input-outlined .input-field.leading-icon ~ .input-label {
    left: 16px;
  }

  /* ================= DEMO BOX ================= */

  .state-box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;
    margin: 8px 0 16px;
  }

}

---