Input Fields

Figma open_in_new

Class

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

Label Text

States

Unpopulated/EnabledPopulated/EnabledUnpopulated/HoveredPopulated/HoveredUnpopulated/FocusedPopulated/FocusedUnpopulated/ErrorPopulated/ErrorUnpopulated/DisabledPopulated/Disabled

Label Text

Code

HTMLCSS

<div class="input-wrapper">
    <input id="noicon-ue" class="input-field with-label" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated enabled input field">
    <label class="input-label" for="noicon-ue">Label Text</label>
</div>

.input-wrapper.no-icon {
  // Populated: float label above input
  .input-field.has-value + .input-label {
    top: 0;                           // sit on top border
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;                 // a touch lighter than input text
    color: var(--text-color);         // same color as input text
    background: #fff;                 // mask the border behind label
    padding: 0 4px;                   // small mask padding
    line-height: 1;
  }

  // Input text when populated
  .input-field.has-value {
    line-height: 1.5;                 // normal text line-height
    padding-top: 16px;                // 16 + 16 = 32; with borders keeps 56px total
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Focused + populated label color
  .input-field.has-value.is-focused + .input-label {
    color: var(--input-border-color-focus, #247984);
  }

  // Error label color (already sets input/helper via base)
  .input-field.error + .input-label {
    color: var(--input-label-color-error, #D32F2F);
  }

  // Disabled label color
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
}

Label text

Code

HTMLCSS

<div class="input-wrapper no-icon">
    <input id="noicon-pe" class="input-field has-value" type="text" value="Input Text" aria-label="Populated enabled input field">
    <label class="input-label" for="noicon-pe">Label text</label>
</div>

.input-wrapper.no-icon {
  // Populated: float label above input
  .input-field.has-value + .input-label {
    top: 0;                           // sit on top border
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;                 // a touch lighter than input text
    color: var(--text-color);         // same color as input text
    background: #fff;                 // mask the border behind label
    padding: 0 4px;                   // small mask padding
    line-height: 1;
  }

  // Input text when populated
  .input-field.has-value {
    line-height: 1.5;                 // normal text line-height
    padding-top: 16px;                // 16 + 16 = 32; with borders keeps 56px total
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Focused + populated label color
  .input-field.has-value.is-focused + .input-label {
    color: var(--input-border-color-focus, #247984);
  }

  // Error label color (already sets input/helper via base)
  .input-field.error + .input-label {
    color: var(--input-label-color-error, #D32F2F);
  }

  // Disabled label color
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
}

Label Text

Code

HTMLCSS

<div class="input-wrapper">
    <input id="noicon-uh" class="input-field with-label is-hover" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated hovered input field">
    <label class="input-label" for="noicon-uh">Label Text</label>
</div>

.input-wrapper.no-icon {
  // Populated: float label above input
  .input-field.has-value + .input-label {
    top: 0;                           // sit on top border
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;                 // a touch lighter than input text
    color: var(--text-color);         // same color as input text
    background: #fff;                 // mask the border behind label
    padding: 0 4px;                   // small mask padding
    line-height: 1;
  }

  // Input text when populated
  .input-field.has-value {
    line-height: 1.5;                 // normal text line-height
    padding-top: 16px;                // 16 + 16 = 32; with borders keeps 56px total
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Focused + populated label color
  .input-field.has-value.is-focused + .input-label {
    color: var(--input-border-color-focus, #247984);
  }

  // Error label color (already sets input/helper via base)
  .input-field.error + .input-label {
    color: var(--input-label-color-error, #D32F2F);
  }

  // Disabled label color
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
}

Label text

Code

HTMLCSS

<div class="input-wrapper no-icon">
    <input id="noicon-ph" class="input-field has-value is-hover" type="text" value="Input Text" aria-label="Populated hovered input field">
    <label class="input-label" for="noicon-ph">Label text</label>
</div>

.input-wrapper.no-icon {
  // Populated: float label above input
  .input-field.has-value + .input-label {
    top: 0;                           // sit on top border
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;                 // a touch lighter than input text
    color: var(--text-color);         // same color as input text
    background: #fff;                 // mask the border behind label
    padding: 0 4px;                   // small mask padding
    line-height: 1;
  }

  // Input text when populated
  .input-field.has-value {
    line-height: 1.5;                 // normal text line-height
    padding-top: 16px;                // 16 + 16 = 32; with borders keeps 56px total
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Focused + populated label color
  .input-field.has-value.is-focused + .input-label {
    color: var(--input-border-color-focus, #247984);
  }

  // Error label color (already sets input/helper via base)
  .input-field.error + .input-label {
    color: var(--input-label-color-error, #D32F2F);
  }

  // Disabled label color
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
}

Label Text

Code

HTMLCSS

<div class="input-wrapper">
    <input id="noicon-uf" class="input-field with-label is-focused" 
        type="text" placeholder="Placeholder" readonly>
    <label class="input-label" for="noicon-uf">Label Text</label>
</div>

.input-wrapper.no-icon {
  // Populated: float label above input
  .input-field.has-value + .input-label {
    top: 0;                           // sit on top border
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;                 // a touch lighter than input text
    color: var(--text-color);         // same color as input text
    background: #fff;                 // mask the border behind label
    padding: 0 4px;                   // small mask padding
    line-height: 1;
  }

  // Input text when populated
  .input-field.has-value {
    line-height: 1.5;                 // normal text line-height
    padding-top: 16px;                // 16 + 16 = 32; with borders keeps 56px total
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Focused + populated label color
  .input-field.has-value.is-focused + .input-label {
    color: var(--input-border-color-focus, #247984);
  }

  // Error label color (already sets input/helper via base)
  .input-field.error + .input-label {
    color: var(--input-label-color-error, #D32F2F);
  }

  // Disabled label color
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
}

Label text

Code

HTMLCSS

<div class="input-wrapper no-icon">
    <input id="noicon-pf" class="input-field has-value is-focused" type="text" value="Input Text" aria-label="Populated focused input field">
    <label class="input-label" for="noicon-pf">Label text</label>
</div>

.input-wrapper.no-icon {
  // Populated: float label above input
  .input-field.has-value + .input-label {
    top: 0;                           // sit on top border
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;                 // a touch lighter than input text
    color: var(--text-color);         // same color as input text
    background: #fff;                 // mask the border behind label
    padding: 0 4px;                   // small mask padding
    line-height: 1;
  }

  // Input text when populated
  .input-field.has-value {
    line-height: 1.5;                 // normal text line-height
    padding-top: 16px;                // 16 + 16 = 32; with borders keeps 56px total
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Focused + populated label color
  .input-field.has-value.is-focused + .input-label {
    color: var(--input-border-color-focus, #247984);
  }

  // Error label color (already sets input/helper via base)
  .input-field.error + .input-label {
    color: var(--input-label-color-error, #D32F2F);
  }

  // Disabled label color
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
}

Label Text

Code

HTMLCSS

<div class="input-wrapper">
    <input id="noicon-uee" class="input-field error with-label" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated error input field">
    <label class="input-label" for="noicon-uee">Label Text</label>
</div>

.input-wrapper.no-icon {
  // Populated: float label above input
  .input-field.has-value + .input-label {
    top: 0;                           // sit on top border
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;                 // a touch lighter than input text
    color: var(--text-color);         // same color as input text
    background: #fff;                 // mask the border behind label
    padding: 0 4px;                   // small mask padding
    line-height: 1;
  }

  // Input text when populated
  .input-field.has-value {
    line-height: 1.5;                 // normal text line-height
    padding-top: 16px;                // 16 + 16 = 32; with borders keeps 56px total
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Focused + populated label color
  .input-field.has-value.is-focused + .input-label {
    color: var(--input-border-color-focus, #247984);
  }

  // Error label color (already sets input/helper via base)
  .input-field.error + .input-label {
    color: var(--input-label-color-error, #D32F2F);
  }

  // Disabled label color
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
}

Label text

Code

HTMLCSS

<div class="input-wrapper no-icon">
    <input id="noicon-pee" class="input-field error has-value" type="text" value="Input Text" aria-label="Populated error input field">
    <label class="input-label" for="noicon-pee">Label text</label>
</div>

.input-wrapper.no-icon {
  // Populated: float label above input
  .input-field.has-value + .input-label {
    top: 0;                           // sit on top border
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;                 // a touch lighter than input text
    color: var(--text-color);         // same color as input text
    background: #fff;                 // mask the border behind label
    padding: 0 4px;                   // small mask padding
    line-height: 1;
  }

  // Input text when populated
  .input-field.has-value {
    line-height: 1.5;                 // normal text line-height
    padding-top: 16px;                // 16 + 16 = 32; with borders keeps 56px total
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Focused + populated label color
  .input-field.has-value.is-focused + .input-label {
    color: var(--input-border-color-focus, #247984);
  }

  // Error label color (already sets input/helper via base)
  .input-field.error + .input-label {
    color: var(--input-label-color-error, #D32F2F);
  }

  // Disabled label color
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
}

Label Text

Code

HTMLCSS

<div class="input-wrapper">
    <input id="noicon-ud" class="input-field with-label" type="text" disabled placeholder="Placeholder" readonly aria-label="Unpopulated disabled input field">
    <label class="input-label" for="noicon-ud">Label Text</label>
</div>

.input-wrapper.no-icon {
  // Populated: float label above input
  .input-field.has-value + .input-label {
    top: 0;                           // sit on top border
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;                 // a touch lighter than input text
    color: var(--text-color);         // same color as input text
    background: #fff;                 // mask the border behind label
    padding: 0 4px;                   // small mask padding
    line-height: 1;
  }

  // Input text when populated
  .input-field.has-value {
    line-height: 1.5;                 // normal text line-height
    padding-top: 16px;                // 16 + 16 = 32; with borders keeps 56px total
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Focused + populated label color
  .input-field.has-value.is-focused + .input-label {
    color: var(--input-border-color-focus, #247984);
  }

  // Error label color (already sets input/helper via base)
  .input-field.error + .input-label {
    color: var(--input-label-color-error, #D32F2F);
  }

  // Disabled label color
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
}

Label text

Code

HTMLCSS

<div class="input-wrapper no-icon">
    <input id="noicon-pd" class="input-field has-value" type="text" value="Input Text" disabled aria-label="Populated disabled input field">
    <label class="input-label" for="noicon-pd">Label text</label>
</div>

.input-wrapper.no-icon {
  // Populated: float label above input
  .input-field.has-value + .input-label {
    top: 0;                           // sit on top border
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;                 // a touch lighter than input text
    color: var(--text-color);         // same color as input text
    background: #fff;                 // mask the border behind label
    padding: 0 4px;                   // small mask padding
    line-height: 1;
  }

  // Input text when populated
  .input-field.has-value {
    line-height: 1.5;                 // normal text line-height
    padding-top: 16px;                // 16 + 16 = 32; with borders keeps 56px total
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Focused + populated label color
  .input-field.has-value.is-focused + .input-label {
    color: var(--input-border-color-focus, #247984);
  }

  // Error label color (already sets input/helper via base)
  .input-field.error + .input-label {
    color: var(--input-label-color-error, #D32F2F);
  }

  // Disabled label color
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
}

Label Text

States

Unpopulated/EnabledPopulated/EnabledUnpopulated/HoveredPopulated/HoveredUnpopulated/FocusedPopulated/FocusedUnpopulated/ErrorPopulated/ErrorUnpopulated/DisabledPopulated/Disabled

Label Text

Code

HTMLCSS

<div class="input-wrapper leading-icon">
    <span class="input-icon leading">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
            <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
            <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
        </svg>
    </span>
    <input id="leading-ue" class="input-field with-label" type="text" placeholder="Placeholder" readonly aria-label="Leading icon unpopulated enabled input">
    <label class="input-label" for="leading-ue">Label Text</label>
</div>

.input-wrapper.leading-icon {
  // Adjust input padding for icon + gap
  .input-field {
    padding-left: 52px;  // 12 (padding) + 24 (icon) + 16 (gap) = 52
  }

  // Icon placement
  .input-icon.leading {
    position: absolute;
    top: 50%;
    left: 12px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
  }

  // Label default (unpopulated) → stays with text start
  .input-label {
    left: 52px;   // inline with input text when unpopulated
  }

  // Populated: float label above border (like No Icon)
  .input-field.has-value + .input-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color);
    background: #fff;
    padding: 0 4px;
    line-height: 1;

    // ⬇️ shift back to match "No Icon" label position
    left: 16px;   // instead of 52px
  }

  // Input text when populated
  .input-field.has-value {
    line-height: 1.5;
    padding-top: 16px;
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Focused + populated label color
  .input-field.has-value.is-focused + .input-label {
    color: var(--input-border-color-focus, #247984);
  }

  // Error label
  .input-field.error + .input-label {
    color: var(--input-label-color-error, #D32F2F);
  }

  // Disabled label
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
}

Label text

Code

HTMLCSS

<div class="input-wrapper leading-icon">
    <span class="input-icon leading">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
            <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
            <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
        </svg>
    </span>
    <input id="leading-pe" class="input-field has-value leading-icon" type="text" value="Label Text" aria-label="Populated enabled input field">
    <label class="input-label" for="leading-pe">Label</label>
</div>

.input-wrapper.leading-icon {
  // Adjust input padding for icon + gap
  .input-field {
    padding-left: 52px;  // 12 (padding) + 24 (icon) + 16 (gap) = 52
  }

  // Icon placement
  .input-icon.leading {
    position: absolute;
    top: 50%;
    left: 12px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
  }

  // Label default (unpopulated) → stays with text start
  .input-label {
    left: 52px;   // inline with input text when unpopulated
  }

  // Populated: float label above border (like No Icon)
  .input-field.has-value + .input-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color);
    background: #fff;
    padding: 0 4px;
    line-height: 1;

    // ⬇️ shift back to match "No Icon" label position
    left: 16px;   // instead of 52px
  }

  // Input text when populated
  .input-field.has-value {
    line-height: 1.5;
    padding-top: 16px;
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Focused + populated label color
  .input-field.has-value.is-focused + .input-label {
    color: var(--input-border-color-focus, #247984);
  }

  // Error label
  .input-field.error + .input-label {
    color: var(--input-label-color-error, #D32F2F);
  }

  // Disabled label
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
}

Label Text

Code

HTMLCSS

<div class="input-wrapper leading-icon">
    <span class="input-icon leading">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
            <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
            <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
        </svg>
    </span>
    <input id="leading-uh" class="input-field with-label is-hover leading-icon" type="text" aria-label="Unpopulated hovered input field">
    <label class="input-label" for="leading-uh">Label Text</label>
</div>

.input-wrapper.leading-icon {
  // Adjust input padding for icon + gap
  .input-field {
    padding-left: 52px;  // 12 (padding) + 24 (icon) + 16 (gap) = 52
  }

  // Icon placement
  .input-icon.leading {
    position: absolute;
    top: 50%;
    left: 12px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
  }

  // Label default (unpopulated) → stays with text start
  .input-label {
    left: 52px;   // inline with input text when unpopulated
  }

  // Populated: float label above border (like No Icon)
  .input-field.has-value + .input-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color);
    background: #fff;
    padding: 0 4px;
    line-height: 1;

    // ⬇️ shift back to match "No Icon" label position
    left: 16px;   // instead of 52px
  }

  // Input text when populated
  .input-field.has-value {
    line-height: 1.5;
    padding-top: 16px;
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Focused + populated label color
  .input-field.has-value.is-focused + .input-label {
    color: var(--input-border-color-focus, #247984);
  }

  // Error label
  .input-field.error + .input-label {
    color: var(--input-label-color-error, #D32F2F);
  }

  // Disabled label
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
}

Label text

Code

HTMLCSS

<div class="input-wrapper leading-icon">
    <span class="input-icon leading">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
            <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
            <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
        </svg>
    </span>
    <input id="leading-ph" class="input-field has-value is-hover leading-icon" type="text" value="Input Text" aria-label="Populated hovered input field">
    <label class="input-label" for="leading-ph">Label text</label>
</div>

.input-wrapper.leading-icon {
  // Adjust input padding for icon + gap
  .input-field {
    padding-left: 52px;  // 12 (padding) + 24 (icon) + 16 (gap) = 52
  }

  // Icon placement
  .input-icon.leading {
    position: absolute;
    top: 50%;
    left: 12px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
  }

  // Label default (unpopulated) → stays with text start
  .input-label {
    left: 52px;   // inline with input text when unpopulated
  }

  // Populated: float label above border (like No Icon)
  .input-field.has-value + .input-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color);
    background: #fff;
    padding: 0 4px;
    line-height: 1;

    // ⬇️ shift back to match "No Icon" label position
    left: 16px;   // instead of 52px
  }

  // Input text when populated
  .input-field.has-value {
    line-height: 1.5;
    padding-top: 16px;
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Focused + populated label color
  .input-field.has-value.is-focused + .input-label {
    color: var(--input-border-color-focus, #247984);
  }

  // Error label
  .input-field.error + .input-label {
    color: var(--input-label-color-error, #D32F2F);
  }

  // Disabled label
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
}

Label text

Code

HTMLCSS

<div class="input-wrapper leading-icon">
    <span class="input-icon leading">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
            <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
            <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
        </svg>
    </span>
    <input id="leading-uf" class="input-field with-label is-focused leading-icon" type="text" aria-label="Unpopulated focused input field">
    <label class="input-label" for="leading-uf">Label text</label>  
</div>

.input-wrapper.leading-icon {
  // Adjust input padding for icon + gap
  .input-field {
    padding-left: 52px;  // 12 (padding) + 24 (icon) + 16 (gap) = 52
  }

  // Icon placement
  .input-icon.leading {
    position: absolute;
    top: 50%;
    left: 12px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
  }

  // Label default (unpopulated) → stays with text start
  .input-label {
    left: 52px;   // inline with input text when unpopulated
  }

  // Populated: float label above border (like No Icon)
  .input-field.has-value + .input-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color);
    background: #fff;
    padding: 0 4px;
    line-height: 1;

    // ⬇️ shift back to match "No Icon" label position
    left: 16px;   // instead of 52px
  }

  // Input text when populated
  .input-field.has-value {
    line-height: 1.5;
    padding-top: 16px;
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Focused + populated label color
  .input-field.has-value.is-focused + .input-label {
    color: var(--input-border-color-focus, #247984);
  }

  // Error label
  .input-field.error + .input-label {
    color: var(--input-label-color-error, #D32F2F);
  }

  // Disabled label
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
}

Label text

Code

HTMLCSS

<div class="input-wrapper leading-icon">
    <span class="input-icon leading">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
            <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
            <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
        </svg>
    </span>
    <input id="leading-pf" class="input-field has-value is-focused leading-icon" type="text" value="Input Text" aria-label="Populated focused input field">
    <label class="input-label" for="leading-pf">Label text</label>
</div>

.input-wrapper.leading-icon {
  // Adjust input padding for icon + gap
  .input-field {
    padding-left: 52px;  // 12 (padding) + 24 (icon) + 16 (gap) = 52
  }

  // Icon placement
  .input-icon.leading {
    position: absolute;
    top: 50%;
    left: 12px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
  }

  // Label default (unpopulated) → stays with text start
  .input-label {
    left: 52px;   // inline with input text when unpopulated
  }

  // Populated: float label above border (like No Icon)
  .input-field.has-value + .input-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color);
    background: #fff;
    padding: 0 4px;
    line-height: 1;

    // ⬇️ shift back to match "No Icon" label position
    left: 16px;   // instead of 52px
  }

  // Input text when populated
  .input-field.has-value {
    line-height: 1.5;
    padding-top: 16px;
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Focused + populated label color
  .input-field.has-value.is-focused + .input-label {
    color: var(--input-border-color-focus, #247984);
  }

  // Error label
  .input-field.error + .input-label {
    color: var(--input-label-color-error, #D32F2F);
  }

  // Disabled label
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
}

Label Text

Code

HTMLCSS

<div class="input-wrapper leading-icon">
    <span class="input-icon leading">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
            <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
            <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
        </svg>
    </span>
    <input id="leading-uee" class="input-field error with-label leading-icon" type="text" aria-label="Unpopulated error input field">
    <label class="input-label" for="leading-uee">Label Text</label>
</div>

.input-wrapper.leading-icon {
  // Adjust input padding for icon + gap
  .input-field {
    padding-left: 52px;  // 12 (padding) + 24 (icon) + 16 (gap) = 52
  }

  // Icon placement
  .input-icon.leading {
    position: absolute;
    top: 50%;
    left: 12px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
  }

  // Label default (unpopulated) → stays with text start
  .input-label {
    left: 52px;   // inline with input text when unpopulated
  }

  // Populated: float label above border (like No Icon)
  .input-field.has-value + .input-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color);
    background: #fff;
    padding: 0 4px;
    line-height: 1;

    // ⬇️ shift back to match "No Icon" label position
    left: 16px;   // instead of 52px
  }

  // Input text when populated
  .input-field.has-value {
    line-height: 1.5;
    padding-top: 16px;
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Focused + populated label color
  .input-field.has-value.is-focused + .input-label {
    color: var(--input-border-color-focus, #247984);
  }

  // Error label
  .input-field.error + .input-label {
    color: var(--input-label-color-error, #D32F2F);
  }

  // Disabled label
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
}

Label text

Code

HTMLCSS

<div class="input-wrapper leading-icon">
    <span class="input-icon leading">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
            <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
            <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
        </svg>
    </span>
    <input id="leading-pee" class="input-field error has-value leading-icon" type="text" value="Input Text" aria-label="Populated error input field">
    <label class="input-label" for="leading-pee">Label text</label>
</div>

.input-wrapper.leading-icon {
  // Adjust input padding for icon + gap
  .input-field {
    padding-left: 52px;  // 12 (padding) + 24 (icon) + 16 (gap) = 52
  }

  // Icon placement
  .input-icon.leading {
    position: absolute;
    top: 50%;
    left: 12px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
  }

  // Label default (unpopulated) → stays with text start
  .input-label {
    left: 52px;   // inline with input text when unpopulated
  }

  // Populated: float label above border (like No Icon)
  .input-field.has-value + .input-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color);
    background: #fff;
    padding: 0 4px;
    line-height: 1;

    // ⬇️ shift back to match "No Icon" label position
    left: 16px;   // instead of 52px
  }

  // Input text when populated
  .input-field.has-value {
    line-height: 1.5;
    padding-top: 16px;
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Focused + populated label color
  .input-field.has-value.is-focused + .input-label {
    color: var(--input-border-color-focus, #247984);
  }

  // Error label
  .input-field.error + .input-label {
    color: var(--input-label-color-error, #D32F2F);
  }

  // Disabled label
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
}

Label

Code

HTMLCSS

<div class="input-wrapper leading-icon">
    <span class="input-icon leading">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
            <circle cx="11" cy="11" r="7" stroke="#9D9F9F" stroke-width="2"/>
            <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#9D9F9F" stroke-width="2"/>
        </svg>
    </span>
    <input id="leading-ud" class="input-field with-label leading-icon" type="text" disabled aria-label="Unpopulated disabled input field">
    <label class="input-label" for="leading-ud">Label</label>
</div>

.input-wrapper.leading-icon {
  // Adjust input padding for icon + gap
  .input-field {
    padding-left: 52px;  // 12 (padding) + 24 (icon) + 16 (gap) = 52
  }

  // Icon placement
  .input-icon.leading {
    position: absolute;
    top: 50%;
    left: 12px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
  }

  // Label default (unpopulated) → stays with text start
  .input-label {
    left: 52px;   // inline with input text when unpopulated
  }

  // Populated: float label above border (like No Icon)
  .input-field.has-value + .input-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color);
    background: #fff;
    padding: 0 4px;
    line-height: 1;

    // ⬇️ shift back to match "No Icon" label position
    left: 16px;   // instead of 52px
  }

  // Input text when populated
  .input-field.has-value {
    line-height: 1.5;
    padding-top: 16px;
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Focused + populated label color
  .input-field.has-value.is-focused + .input-label {
    color: var(--input-border-color-focus, #247984);
  }

  // Error label
  .input-field.error + .input-label {
    color: var(--input-label-color-error, #D32F2F);
  }

  // Disabled label
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
}

Label Text

Code

HTMLCSS

<div class="input-wrapper leading-icon">
    <span class="input-icon leading">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
            <circle cx="11" cy="11" r="7" stroke="#9D9F9F" stroke-width="2"/>
            <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#9D9F9F" stroke-width="2"/>
        </svg>
    </span>
    <input id="leading-pd" class="input-field has-value leading-icon" type="text" value="Label Text" disabled aria-label="Populated disabled input field">
    <label class="input-label" for="leading-pd">Label Text</label>
</div>

.input-wrapper.leading-icon {
  // Adjust input padding for icon + gap
  .input-field {
    padding-left: 52px;  // 12 (padding) + 24 (icon) + 16 (gap) = 52
  }

  // Icon placement
  .input-icon.leading {
    position: absolute;
    top: 50%;
    left: 12px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
  }

  // Label default (unpopulated) → stays with text start
  .input-label {
    left: 52px;   // inline with input text when unpopulated
  }

  // Populated: float label above border (like No Icon)
  .input-field.has-value + .input-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color);
    background: #fff;
    padding: 0 4px;
    line-height: 1;

    // ⬇️ shift back to match "No Icon" label position
    left: 16px;   // instead of 52px
  }

  // Input text when populated
  .input-field.has-value {
    line-height: 1.5;
    padding-top: 16px;
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Focused + populated label color
  .input-field.has-value.is-focused + .input-label {
    color: var(--input-border-color-focus, #247984);
  }

  // Error label
  .input-field.error + .input-label {
    color: var(--input-label-color-error, #D32F2F);
  }

  // Disabled label
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
}

Label

States

Unpopulated/EnabledPopulated/EnabledUnpopulated/HoveredPopulated/HoveredUnpopulated/FocusedPopulated/FocusedUnpopulated/ErrorPopulated/ErrorUnpopulated/DisabledPopulated/Disabled

Label

Code

HTMLCSS

<div class="input-wrapper trailing-icon">
    <input id="trailing-ue" class="input-field with-label trailing-icon" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated enabled input field">
    <label class="input-label" for="trailing-ue">Label</label>
    <span class="input-icon trailing" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>

.input-wrapper.trailing-icon {
  // Input padding adjusted for icon
  .input-field {
    padding-right: 52px; // 12 (padding) + 24 (icon) + 16 (gap)
  }

  // Icon placement
  .input-icon.trailing {
    position: absolute;
    top: 50%;
    right: 12px;               // 12px from right edge
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333;
  }

  // Label default (centered when unpopulated)
  .input-label {
    left: 16px; // same as no-icon
  }

  // Label floats when populated
  .input-field.has-value + .input-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color);
    background: #fff;
    padding: 0 4px;
    line-height: 1;
  }

  // Input text when populated
  .input-field.has-value {
    line-height: 1.5;
    padding-top: 16px;
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Focused label
  .input-field.has-value.is-focused + .input-label {
    color: var(--input-border-color-focus, #247984);
  }

  // Error label
  .input-field.error + .input-label {
    color: var(--input-label-color-error, #D32F2F);
  }

  // Disabled label
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
}

Label text

Code

HTMLCSS

<div class="input-wrapper trailing-icon">
    <input id="trailing-pe" class="input-field has-value trailing-icon" type="text" value="Input Text" aria-label="Populated enabled input field">
    <label class="input-label" for="trailing-pe">Label text</label>
    <span class="input-icon trailing" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>

.input-wrapper.trailing-icon {
  // Input padding adjusted for icon
  .input-field {
    padding-right: 52px; // 12 (padding) + 24 (icon) + 16 (gap)
  }

  // Icon placement
  .input-icon.trailing {
    position: absolute;
    top: 50%;
    right: 12px;               // 12px from right edge
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333;
  }

  // Label default (centered when unpopulated)
  .input-label {
    left: 16px; // same as no-icon
  }

  // Label floats when populated
  .input-field.has-value + .input-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color);
    background: #fff;
    padding: 0 4px;
    line-height: 1;
  }

  // Input text when populated
  .input-field.has-value {
    line-height: 1.5;
    padding-top: 16px;
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Focused label
  .input-field.has-value.is-focused + .input-label {
    color: var(--input-border-color-focus, #247984);
  }

  // Error label
  .input-field.error + .input-label {
    color: var(--input-label-color-error, #D32F2F);
  }

  // Disabled label
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
}

Label Text

Code

HTMLCSS

<div class="input-wrapper trailing-icon">
    <input id="trailing-uh" class="input-field with-label is-hover trailing-icon" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated hovered input field">
    <label class="input-label" for="trailing-uh">Label</label>
    <span class="input-icon trailing" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>

.input-wrapper.trailing-icon {
  // Input padding adjusted for icon
  .input-field {
    padding-right: 52px; // 12 (padding) + 24 (icon) + 16 (gap)
  }

  // Icon placement
  .input-icon.trailing {
    position: absolute;
    top: 50%;
    right: 12px;               // 12px from right edge
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333;
  }

  // Label default (centered when unpopulated)
  .input-label {
    left: 16px; // same as no-icon
  }

  // Label floats when populated
  .input-field.has-value + .input-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color);
    background: #fff;
    padding: 0 4px;
    line-height: 1;
  }

  // Input text when populated
  .input-field.has-value {
    line-height: 1.5;
    padding-top: 16px;
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Focused label
  .input-field.has-value.is-focused + .input-label {
    color: var(--input-border-color-focus, #247984);
  }

  // Error label
  .input-field.error + .input-label {
    color: var(--input-label-color-error, #D32F2F);
  }

  // Disabled label
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
}

Label text

Code

HTMLCSS

<div class="input-wrapper trailing-icon">
    <input id="trailing-ph" class="input-field has-value is-hover trailing-icon" type="text" value="Input Text" aria-label="Populated hovered input field">
    <label class="input-label" for="trailing-ph">Label text</label>
    <span class="input-icon trailing" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>

.input-wrapper.trailing-icon {
  // Input padding adjusted for icon
  .input-field {
    padding-right: 52px; // 12 (padding) + 24 (icon) + 16 (gap)
  }

  // Icon placement
  .input-icon.trailing {
    position: absolute;
    top: 50%;
    right: 12px;               // 12px from right edge
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333;
  }

  // Label default (centered when unpopulated)
  .input-label {
    left: 16px; // same as no-icon
  }

  // Label floats when populated
  .input-field.has-value + .input-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color);
    background: #fff;
    padding: 0 4px;
    line-height: 1;
  }

  // Input text when populated
  .input-field.has-value {
    line-height: 1.5;
    padding-top: 16px;
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Focused label
  .input-field.has-value.is-focused + .input-label {
    color: var(--input-border-color-focus, #247984);
  }

  // Error label
  .input-field.error + .input-label {
    color: var(--input-label-color-error, #D32F2F);
  }

  // Disabled label
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
}

Label Text

Code

HTMLCSS

<div class="input-wrapper trailing-icon">
    <input id="trailing-uf" class="input-field with-label is-focused trailing-icon" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated focused input field">
    <label class="input-label" for="trailing-uf">Label Text</label>
    <span class="input-icon trailing" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>

.input-wrapper.trailing-icon {
  // Input padding adjusted for icon
  .input-field {
    padding-right: 52px; // 12 (padding) + 24 (icon) + 16 (gap)
  }

  // Icon placement
  .input-icon.trailing {
    position: absolute;
    top: 50%;
    right: 12px;               // 12px from right edge
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333;
  }

  // Label default (centered when unpopulated)
  .input-label {
    left: 16px; // same as no-icon
  }

  // Label floats when populated
  .input-field.has-value + .input-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color);
    background: #fff;
    padding: 0 4px;
    line-height: 1;
  }

  // Input text when populated
  .input-field.has-value {
    line-height: 1.5;
    padding-top: 16px;
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Focused label
  .input-field.has-value.is-focused + .input-label {
    color: var(--input-border-color-focus, #247984);
  }

  // Error label
  .input-field.error + .input-label {
    color: var(--input-label-color-error, #D32F2F);
  }

  // Disabled label
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
}

Label text

Code

HTMLCSS

<div class="input-wrapper trailing-icon">
    <input id="trailing-pf" class="input-field has-value is-focused trailing-icon" type="text" value="Input Text" aria-label="Populated focused input field">
    <label class="input-label" for="trailing-pf">Label text</label>
    <span class="input-icon trailing" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>

.input-wrapper.trailing-icon {
  // Input padding adjusted for icon
  .input-field {
    padding-right: 52px; // 12 (padding) + 24 (icon) + 16 (gap)
  }

  // Icon placement
  .input-icon.trailing {
    position: absolute;
    top: 50%;
    right: 12px;               // 12px from right edge
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333;
  }

  // Label default (centered when unpopulated)
  .input-label {
    left: 16px; // same as no-icon
  }

  // Label floats when populated
  .input-field.has-value + .input-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color);
    background: #fff;
    padding: 0 4px;
    line-height: 1;
  }

  // Input text when populated
  .input-field.has-value {
    line-height: 1.5;
    padding-top: 16px;
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Focused label
  .input-field.has-value.is-focused + .input-label {
    color: var(--input-border-color-focus, #247984);
  }

  // Error label
  .input-field.error + .input-label {
    color: var(--input-label-color-error, #D32F2F);
  }

  // Disabled label
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
}

Label Text

Code

HTMLCSS

<div class="input-wrapper trailing-icon">
    <input id="trailing-uee" class="input-field error with-label trailing-icon" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated error input field">
    <label class="input-label" for="trailing-uee">Label Text</label>
    <span class="input-icon trailing error" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
            <circle cx="12" cy="12" r="10" fill="#D32F2F"/>
            <path d="M12 7V13" stroke="white" stroke-width="2" stroke-linecap="round"/>
            <circle cx="12" cy="17" r="1.5" fill="white"/>
        </svg>
    </span>
</div>

.input-wrapper.trailing-icon {
  // Input padding adjusted for icon
  .input-field {
    padding-right: 52px; // 12 (padding) + 24 (icon) + 16 (gap)
  }

  // Icon placement
  .input-icon.trailing {
    position: absolute;
    top: 50%;
    right: 12px;               // 12px from right edge
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333;
  }

  // Label default (centered when unpopulated)
  .input-label {
    left: 16px; // same as no-icon
  }

  // Label floats when populated
  .input-field.has-value + .input-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color);
    background: #fff;
    padding: 0 4px;
    line-height: 1;
  }

  // Input text when populated
  .input-field.has-value {
    line-height: 1.5;
    padding-top: 16px;
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Focused label
  .input-field.has-value.is-focused + .input-label {
    color: var(--input-border-color-focus, #247984);
  }

  // Error label
  .input-field.error + .input-label {
    color: var(--input-label-color-error, #D32F2F);
  }

  // Disabled label
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
}

Label text

Code

HTMLCSS

<div class="input-wrapper trailing-icon">
    <input id="trailing-pee" class="input-field error has-value trailing-icon" type="text" value="Input Text" aria-label="Populated error input field">
    <label class="input-label" for="trailing-pee">Label text</label>
    <span class="input-icon trailing error" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
            <circle cx="12" cy="12" r="10" fill="#D32F2F"/>
            <path d="M12 7V13" stroke="white" stroke-width="2" stroke-linecap="round"/>
            <circle cx="12" cy="17" r="1.5" fill="white"/>
        </svg>
    </span>
</div>

.input-wrapper.trailing-icon {
  // Input padding adjusted for icon
  .input-field {
    padding-right: 52px; // 12 (padding) + 24 (icon) + 16 (gap)
  }

  // Icon placement
  .input-icon.trailing {
    position: absolute;
    top: 50%;
    right: 12px;               // 12px from right edge
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333;
  }

  // Label default (centered when unpopulated)
  .input-label {
    left: 16px; // same as no-icon
  }

  // Label floats when populated
  .input-field.has-value + .input-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color);
    background: #fff;
    padding: 0 4px;
    line-height: 1;
  }

  // Input text when populated
  .input-field.has-value {
    line-height: 1.5;
    padding-top: 16px;
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Focused label
  .input-field.has-value.is-focused + .input-label {
    color: var(--input-border-color-focus, #247984);
  }

  // Error label
  .input-field.error + .input-label {
    color: var(--input-label-color-error, #D32F2F);
  }

  // Disabled label
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
}

Label Text

Code

HTMLCSS

<div class="input-wrapper trailing-icon">
    <input id="trailing-ud" class="input-field with-label trailing-icon" type="text" disabled aria-label="Unpopulated disabled input field">
    <label class="input-label" for="trailing-ud">Label Text</label>
    <span class="input-icon trailing" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>

.input-wrapper.trailing-icon {
  // Input padding adjusted for icon
  .input-field {
    padding-right: 52px; // 12 (padding) + 24 (icon) + 16 (gap)
  }

  // Icon placement
  .input-icon.trailing {
    position: absolute;
    top: 50%;
    right: 12px;               // 12px from right edge
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333;
  }

  // Label default (centered when unpopulated)
  .input-label {
    left: 16px; // same as no-icon
  }

  // Label floats when populated
  .input-field.has-value + .input-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color);
    background: #fff;
    padding: 0 4px;
    line-height: 1;
  }

  // Input text when populated
  .input-field.has-value {
    line-height: 1.5;
    padding-top: 16px;
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Focused label
  .input-field.has-value.is-focused + .input-label {
    color: var(--input-border-color-focus, #247984);
  }

  // Error label
  .input-field.error + .input-label {
    color: var(--input-label-color-error, #D32F2F);
  }

  // Disabled label
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
}

Label text

Code

HTMLCSS

<div class="input-wrapper trailing-icon">
    <input id="trailing-pd" class="input-field has-value trailing-icon" type="text" value="Example Text" disabled aria-label="Populated disabled input field">
    <label class="input-label" for="trailing-pd">Label</label>
    <span class="input-icon trailing" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>

.input-wrapper.trailing-icon {
  // Input padding adjusted for icon
  .input-field {
    padding-right: 52px; // 12 (padding) + 24 (icon) + 16 (gap)
  }

  // Icon placement
  .input-icon.trailing {
    position: absolute;
    top: 50%;
    right: 12px;               // 12px from right edge
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333;
  }

  // Label default (centered when unpopulated)
  .input-label {
    left: 16px; // same as no-icon
  }

  // Label floats when populated
  .input-field.has-value + .input-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color);
    background: #fff;
    padding: 0 4px;
    line-height: 1;
  }

  // Input text when populated
  .input-field.has-value {
    line-height: 1.5;
    padding-top: 16px;
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Focused label
  .input-field.has-value.is-focused + .input-label {
    color: var(--input-border-color-focus, #247984);
  }

  // Error label
  .input-field.error + .input-label {
    color: var(--input-label-color-error, #D32F2F);
  }

  // Disabled label
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
}

Label Text

Supporting text

States

Unpopulated/EnabledPopulated/EnabledUnpopulated/HoveredPopulated/HoveredUnpopulated/FocusedPopulated/FocusedUnpopulated/ErrorPopulated/ErrorUnpopulated/DisabledPopulated/Disabled

Label Text

Supporting text

Code

HTMLCSS

<div class="input-wrapper no-icon-supporting">
    <input id="noicon-support-ue" class="input-field with-label" type="text" aria-label="Unpopulated enabled input field">
    <label class="input-label" for="noicon-support-ue">Label Text</label>
    <p class="input-helper">Supporting text</p>
</div>

.input-wrapper.no-icon-supporting {
  // Float label when populated (same as no-icon)
  .input-field.has-value + .input-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color);
    background: #fff;
    padding: 0 4px;
    line-height: 1;
  }

  .input-field.has-value {
    line-height: 1.5;
    padding-top: 16px;
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Supporting text styles
  .input-helper {
    font-size: 0.75rem;
    line-height: 1.4;
    margin-top: 4px;           // 4px gap below box
    margin-left: 16px;         // align with label/input text
    margin-right: 16px;
    color: #6F6F6F;
  }

  .input-helper.error {
    color: var(--input-supporting-text-error, #D32F2F);
  }

  // Disabled state
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
  .input-field:disabled ~ .input-helper {
    color: #C6C6C6;
  }
}

Label text

Supporting text

Code

HTMLCSS

<div class="input-wrapper no-icon-supporting">
    <input id="noicon-support-pe" class="input-field has-value" type="text" value="Input Text" aria-label="Populated enabled input field">
    <label class="input-label" for="noicon-support-pe">Label text</label>
    <p class="input-helper">Supporting text</p>
</div>

.input-wrapper.no-icon-supporting {
  // Float label when populated (same as no-icon)
  .input-field.has-value + .input-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color);
    background: #fff;
    padding: 0 4px;
    line-height: 1;
  }

  .input-field.has-value {
    line-height: 1.5;
    padding-top: 16px;
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Supporting text styles
  .input-helper {
    font-size: 0.75rem;
    line-height: 1.4;
    margin-top: 4px;           // 4px gap below box
    margin-left: 16px;         // align with label/input text
    margin-right: 16px;
    color: #6F6F6F;
  }

  .input-helper.error {
    color: var(--input-supporting-text-error, #D32F2F);
  }

  // Disabled state
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
  .input-field:disabled ~ .input-helper {
    color: #C6C6C6;
  }
}

Label Text

Supporting text

Code

HTMLCSS

<div class="input-wrapper no-icon-supporting">
    <input id="noicon-support-uh" class="input-field with-label is-hover" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated hovered input field">
    <label class="input-label" for="noicon-support-uh">Label Text</label>
    <p class="input-helper">Supporting text</p>
</div>

.input-wrapper.no-icon-supporting {
  // Float label when populated (same as no-icon)
  .input-field.has-value + .input-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color);
    background: #fff;
    padding: 0 4px;
    line-height: 1;
  }

  .input-field.has-value {
    line-height: 1.5;
    padding-top: 16px;
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Supporting text styles
  .input-helper {
    font-size: 0.75rem;
    line-height: 1.4;
    margin-top: 4px;           // 4px gap below box
    margin-left: 16px;         // align with label/input text
    margin-right: 16px;
    color: #6F6F6F;
  }

  .input-helper.error {
    color: var(--input-supporting-text-error, #D32F2F);
  }

  // Disabled state
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
  .input-field:disabled ~ .input-helper {
    color: #C6C6C6;
  }
}

Label text

Supporting text

Code

HTMLCSS

<div class="input-wrapper no-icon-supporting">
    <input id="noicon-support-ph" class="input-field has-value is-hover" type="text" value="Input Text" aria-label="Populated hovered input field">
    <label class="input-label" for="noicon-support-ph">Label text</label>
    <p class="input-helper">Supporting text</p>
</div>

.input-wrapper.no-icon-supporting {
  // Float label when populated (same as no-icon)
  .input-field.has-value + .input-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color);
    background: #fff;
    padding: 0 4px;
    line-height: 1;
  }

  .input-field.has-value {
    line-height: 1.5;
    padding-top: 16px;
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Supporting text styles
  .input-helper {
    font-size: 0.75rem;
    line-height: 1.4;
    margin-top: 4px;           // 4px gap below box
    margin-left: 16px;         // align with label/input text
    margin-right: 16px;
    color: #6F6F6F;
  }

  .input-helper.error {
    color: var(--input-supporting-text-error, #D32F2F);
  }

  // Disabled state
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
  .input-field:disabled ~ .input-helper {
    color: #C6C6C6;
  }
}

Label Text

Supporting text

Code

HTMLCSS

<div class="input-wrapper no-icon-supporting">
    <input id="noicon-support-uf" class="input-field with-label is-focused" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated focused input field">
    <label class="input-label" for="noicon-support-uf">Label Text</label>
    <p class="input-helper">Supporting text</p>
</div>

.input-wrapper.no-icon-supporting {
  // Float label when populated (same as no-icon)
  .input-field.has-value + .input-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color);
    background: #fff;
    padding: 0 4px;
    line-height: 1;
  }

  .input-field.has-value {
    line-height: 1.5;
    padding-top: 16px;
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Supporting text styles
  .input-helper {
    font-size: 0.75rem;
    line-height: 1.4;
    margin-top: 4px;           // 4px gap below box
    margin-left: 16px;         // align with label/input text
    margin-right: 16px;
    color: #6F6F6F;
  }

  .input-helper.error {
    color: var(--input-supporting-text-error, #D32F2F);
  }

  // Disabled state
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
  .input-field:disabled ~ .input-helper {
    color: #C6C6C6;
  }
}

Label text

Supporting text

Code

HTMLCSS

<div class="input-wrapper no-icon-supporting">
    <input id="noicon-support-pf" class="input-field has-value is-focused" type="text" value="Input Text" aria-label="Populated focused input field">
    <label class="input-label" for="noicon-support-pf">Label text</label>
    <p class="input-helper">Supporting text</p>
</div>

.input-wrapper.no-icon-supporting {
  // Float label when populated (same as no-icon)
  .input-field.has-value + .input-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color);
    background: #fff;
    padding: 0 4px;
    line-height: 1;
  }

  .input-field.has-value {
    line-height: 1.5;
    padding-top: 16px;
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Supporting text styles
  .input-helper {
    font-size: 0.75rem;
    line-height: 1.4;
    margin-top: 4px;           // 4px gap below box
    margin-left: 16px;         // align with label/input text
    margin-right: 16px;
    color: #6F6F6F;
  }

  .input-helper.error {
    color: var(--input-supporting-text-error, #D32F2F);
  }

  // Disabled state
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
  .input-field:disabled ~ .input-helper {
    color: #C6C6C6;
  }
}

Label Text

Supporting text

Code

HTMLCSS

<div class="input-wrapper no-icon-supporting">
    <input id="noicon-support-uee" class="input-field error with-label" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated error input field">
    <label class="input-label" for="noicon-support-uee">Label Text</label>
    <p class="input-helper error">Supporting text</p>
</div>

.input-wrapper.no-icon-supporting {
  // Float label when populated (same as no-icon)
  .input-field.has-value + .input-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color);
    background: #fff;
    padding: 0 4px;
    line-height: 1;
  }

  .input-field.has-value {
    line-height: 1.5;
    padding-top: 16px;
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Supporting text styles
  .input-helper {
    font-size: 0.75rem;
    line-height: 1.4;
    margin-top: 4px;           // 4px gap below box
    margin-left: 16px;         // align with label/input text
    margin-right: 16px;
    color: #6F6F6F;
  }

  .input-helper.error {
    color: var(--input-supporting-text-error, #D32F2F);
  }

  // Disabled state
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
  .input-field:disabled ~ .input-helper {
    color: #C6C6C6;
  }
}

Label text

Supporting Text

Code

HTMLCSS

<div class="input-wrapper no-icon-supporting">
    <input id="noicon-support-pee" class="input-field error has-value" type="text" value="Label Text" aria-label="Populated error input field">
    <label class="input-label" for="noicon-support-pee">Label text</label>
    <p class="input-helper error">Supporting Text</p>
</div>

.input-wrapper.no-icon-supporting {
  // Float label when populated (same as no-icon)
  .input-field.has-value + .input-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color);
    background: #fff;
    padding: 0 4px;
    line-height: 1;
  }

  .input-field.has-value {
    line-height: 1.5;
    padding-top: 16px;
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Supporting text styles
  .input-helper {
    font-size: 0.75rem;
    line-height: 1.4;
    margin-top: 4px;           // 4px gap below box
    margin-left: 16px;         // align with label/input text
    margin-right: 16px;
    color: #6F6F6F;
  }

  .input-helper.error {
    color: var(--input-supporting-text-error, #D32F2F);
  }

  // Disabled state
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
  .input-field:disabled ~ .input-helper {
    color: #C6C6C6;
  }
}

Label Text

Supporting text

Code

HTMLCSS

<div class="input-wrapper no-icon-supporting">
    <input id="noicon-support-ud" class="input-field with-label" type="text" disabled aria-label="Unpopulated disabled input field">
    <label class="input-label" for="noicon-support-ud">Label Text</label>
    <p class="input-helper">Supporting text</p>
</div>

.input-wrapper.no-icon-supporting {
  // Float label when populated (same as no-icon)
  .input-field.has-value + .input-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color);
    background: #fff;
    padding: 0 4px;
    line-height: 1;
  }

  .input-field.has-value {
    line-height: 1.5;
    padding-top: 16px;
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Supporting text styles
  .input-helper {
    font-size: 0.75rem;
    line-height: 1.4;
    margin-top: 4px;           // 4px gap below box
    margin-left: 16px;         // align with label/input text
    margin-right: 16px;
    color: #6F6F6F;
  }

  .input-helper.error {
    color: var(--input-supporting-text-error, #D32F2F);
  }

  // Disabled state
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
  .input-field:disabled ~ .input-helper {
    color: #C6C6C6;
  }
}

Label text

Supporting text

Code

HTMLCSS

<div class="input-wrapper no-icon-supporting">
    <input id="noicon-support-pd" class="input-field has-value" type="text" value="Label Text" disabled aria-label="Populated disabled input field">
    <label class="input-label" for="noicon-support-pd">Label text</label>
    <p class="input-helper">Supporting text</p>
</div>

.input-wrapper.no-icon-supporting {
  // Float label when populated (same as no-icon)
  .input-field.has-value + .input-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color);
    background: #fff;
    padding: 0 4px;
    line-height: 1;
  }

  .input-field.has-value {
    line-height: 1.5;
    padding-top: 16px;
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Supporting text styles
  .input-helper {
    font-size: 0.75rem;
    line-height: 1.4;
    margin-top: 4px;           // 4px gap below box
    margin-left: 16px;         // align with label/input text
    margin-right: 16px;
    color: #6F6F6F;
  }

  .input-helper.error {
    color: var(--input-supporting-text-error, #D32F2F);
  }

  // Disabled state
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
  .input-field:disabled ~ .input-helper {
    color: #C6C6C6;
  }
}

Label Text

Supporting text

States

Unpopulated/EnabledPopulated/EnabledUnpopulated/HoveredPopulated/HoveredUnpopulated/FocusedPopulated/FocusedUnpopulated/ErrorPopulated/ErrorUnpopulated/DisabledPopulated/Disabled

Label Text

Supporting text

Code

HTMLCSS

<div class="input-wrapper leading-icon-supporting">
    <span class="input-icon leading">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
            <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
            <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
        </svg>
    </span>
    <input id="leading-support-ue" class="input-field with-label leading-icon" type="text" aria-label="Unpopulated enabled input field">
    <label class="input-label" for="leading-support-ue">Label Text</label>
    <p class="input-helper">Supporting text</p>
</div>

.input-wrapper.leading-icon-supporting {
  // Adjust input padding for icon + gap
  .input-field {
    padding-left: 52px; // 12 (padding) + 24 (icon) + 16 (gap) = 52
  }

  // Leading icon placement
  .input-icon.leading {
    position: absolute;
    top: 50%;
    left: 12px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333; // dark by default
  }

  // Label (unpopulated, aligned with text start)
  .input-label {
    left: 52px; // after the icon
  }

  // Populated: float label above, shift back to 16px like "no icon"
  .input-field.has-value + .input-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color);
    background: #fff;
    padding: 0 4px;
    line-height: 1;
    left: 16px; // matches no-icon float position
  }

  // Input text when populated
  .input-field.has-value {
    line-height: 1.5;
    padding-top: 16px;
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Supporting text
  .input-helper {
    font-size: 0.75rem;
    line-height: 1.4;
    margin-top: 4px;   // 4px below field
    margin-left: 16px; // inset matches label/input
    margin-right: 16px;
    color: #6F6F6F;
  }

  .input-helper.error {
    color: var(--input-supporting-text-error, #D32F2F);
  }

  // Focused + populated label
  .input-field.has-value.is-focused + .input-label {
    color: var(--input-border-color-focus, #247984);
  }

  // Disabled state
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
  .input-field:disabled ~ .input-helper {
    color: #C6C6C6;
  }
  .input-field:disabled ~ .input-icon.leading {
    color: #C6C6C6;
  }
}

Label text

Supporting text

Code

HTMLCSS

<div class="input-wrapper leading-icon-supporting">
    <span class="input-icon leading">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
            <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
            <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
        </svg>
    </span>
    <input id="leading-support-pe" class="input-field has-value leading-icon" type="text" value="Input Text" aria-label="Populated enabled input field">
    <label class="input-label" for="leading-support-pe">Label text</label>
    <p class="input-helper">Supporting text</p>
</div>

.input-wrapper.leading-icon-supporting {
  // Adjust input padding for icon + gap
  .input-field {
    padding-left: 52px; // 12 (padding) + 24 (icon) + 16 (gap) = 52
  }

  // Leading icon placement
  .input-icon.leading {
    position: absolute;
    top: 50%;
    left: 12px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333; // dark by default
  }

  // Label (unpopulated, aligned with text start)
  .input-label {
    left: 52px; // after the icon
  }

  // Populated: float label above, shift back to 16px like "no icon"
  .input-field.has-value + .input-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color);
    background: #fff;
    padding: 0 4px;
    line-height: 1;
    left: 16px; // matches no-icon float position
  }

  // Input text when populated
  .input-field.has-value {
    line-height: 1.5;
    padding-top: 16px;
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Supporting text
  .input-helper {
    font-size: 0.75rem;
    line-height: 1.4;
    margin-top: 4px;   // 4px below field
    margin-left: 16px; // inset matches label/input
    margin-right: 16px;
    color: #6F6F6F;
  }

  .input-helper.error {
    color: var(--input-supporting-text-error, #D32F2F);
  }

  // Focused + populated label
  .input-field.has-value.is-focused + .input-label {
    color: var(--input-border-color-focus, #247984);
  }

  // Disabled state
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
  .input-field:disabled ~ .input-helper {
    color: #C6C6C6;
  }
  .input-field:disabled ~ .input-icon.leading {
    color: #C6C6C6;
  }
}

Label Text

Supporting text

Code

HTMLCSS

<div class="input-wrapper leading-icon-supporting">
    <span class="input-icon leading">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
            <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
            <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
        </svg>
    </span>
    <input id="leading-support-uh" class="input-field with-label is-hover leading-icon" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated hovered input field">
    <label class="input-label" for="leading-support-uh">Label Text</label>
    <p class="input-helper">Supporting text</p>
</div>

.input-wrapper.leading-icon-supporting {
  // Adjust input padding for icon + gap
  .input-field {
    padding-left: 52px; // 12 (padding) + 24 (icon) + 16 (gap) = 52
  }

  // Leading icon placement
  .input-icon.leading {
    position: absolute;
    top: 50%;
    left: 12px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333; // dark by default
  }

  // Label (unpopulated, aligned with text start)
  .input-label {
    left: 52px; // after the icon
  }

  // Populated: float label above, shift back to 16px like "no icon"
  .input-field.has-value + .input-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color);
    background: #fff;
    padding: 0 4px;
    line-height: 1;
    left: 16px; // matches no-icon float position
  }

  // Input text when populated
  .input-field.has-value {
    line-height: 1.5;
    padding-top: 16px;
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Supporting text
  .input-helper {
    font-size: 0.75rem;
    line-height: 1.4;
    margin-top: 4px;   // 4px below field
    margin-left: 16px; // inset matches label/input
    margin-right: 16px;
    color: #6F6F6F;
  }

  .input-helper.error {
    color: var(--input-supporting-text-error, #D32F2F);
  }

  // Focused + populated label
  .input-field.has-value.is-focused + .input-label {
    color: var(--input-border-color-focus, #247984);
  }

  // Disabled state
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
  .input-field:disabled ~ .input-helper {
    color: #C6C6C6;
  }
  .input-field:disabled ~ .input-icon.leading {
    color: #C6C6C6;
  }
}

Label text

Supporting text

Code

HTMLCSS

<div class="input-wrapper leading-icon-supporting">
    <span class="input-icon leading">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
            <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
            <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
        </svg>
    </span>
    <input id="leading-support-ph" class="input-field has-value is-hover leading-icon" type="text" value="Input Text" aria-label="Populated hovered input field">
    <label class="input-label" for="leading-support-ph">Label text</label>
    <p class="input-helper">Supporting text</p>
</div>

.input-wrapper.leading-icon-supporting {
  // Adjust input padding for icon + gap
  .input-field {
    padding-left: 52px; // 12 (padding) + 24 (icon) + 16 (gap) = 52
  }

  // Leading icon placement
  .input-icon.leading {
    position: absolute;
    top: 50%;
    left: 12px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333; // dark by default
  }

  // Label (unpopulated, aligned with text start)
  .input-label {
    left: 52px; // after the icon
  }

  // Populated: float label above, shift back to 16px like "no icon"
  .input-field.has-value + .input-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color);
    background: #fff;
    padding: 0 4px;
    line-height: 1;
    left: 16px; // matches no-icon float position
  }

  // Input text when populated
  .input-field.has-value {
    line-height: 1.5;
    padding-top: 16px;
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Supporting text
  .input-helper {
    font-size: 0.75rem;
    line-height: 1.4;
    margin-top: 4px;   // 4px below field
    margin-left: 16px; // inset matches label/input
    margin-right: 16px;
    color: #6F6F6F;
  }

  .input-helper.error {
    color: var(--input-supporting-text-error, #D32F2F);
  }

  // Focused + populated label
  .input-field.has-value.is-focused + .input-label {
    color: var(--input-border-color-focus, #247984);
  }

  // Disabled state
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
  .input-field:disabled ~ .input-helper {
    color: #C6C6C6;
  }
  .input-field:disabled ~ .input-icon.leading {
    color: #C6C6C6;
  }
}

Label Text

Supporting text

Code

HTMLCSS

<div class="input-wrapper leading-icon-supporting">
    <span class="input-icon leading">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
            <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
            <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
        </svg>
    </span>
    <input id="leading-support-uf" class="input-field with-label is-focused leading-icon" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated focused input field">
    <label class="input-label" for="leading-support-uf">Label Text</label>
    <p class="input-helper">Supporting text</p>
</div>

.input-wrapper.leading-icon-supporting {
  // Adjust input padding for icon + gap
  .input-field {
    padding-left: 52px; // 12 (padding) + 24 (icon) + 16 (gap) = 52
  }

  // Leading icon placement
  .input-icon.leading {
    position: absolute;
    top: 50%;
    left: 12px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333; // dark by default
  }

  // Label (unpopulated, aligned with text start)
  .input-label {
    left: 52px; // after the icon
  }

  // Populated: float label above, shift back to 16px like "no icon"
  .input-field.has-value + .input-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color);
    background: #fff;
    padding: 0 4px;
    line-height: 1;
    left: 16px; // matches no-icon float position
  }

  // Input text when populated
  .input-field.has-value {
    line-height: 1.5;
    padding-top: 16px;
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Supporting text
  .input-helper {
    font-size: 0.75rem;
    line-height: 1.4;
    margin-top: 4px;   // 4px below field
    margin-left: 16px; // inset matches label/input
    margin-right: 16px;
    color: #6F6F6F;
  }

  .input-helper.error {
    color: var(--input-supporting-text-error, #D32F2F);
  }

  // Focused + populated label
  .input-field.has-value.is-focused + .input-label {
    color: var(--input-border-color-focus, #247984);
  }

  // Disabled state
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
  .input-field:disabled ~ .input-helper {
    color: #C6C6C6;
  }
  .input-field:disabled ~ .input-icon.leading {
    color: #C6C6C6;
  }
}

Label text

Supporting text

Code

HTMLCSS

<div class="input-wrapper leading-icon-supporting">
    <span class="input-icon leading">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
            <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
            <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
        </svg>
    </span>
    <input id="leading-support-pf" class="input-field has-value is-focused leading-icon" type="text" value="Label Text" aria-label="Populated focused input field">
    <label class="input-label" for="leading-support-pf">Label text</label>
    <p class="input-helper">Supporting text</p>
</div>

.input-wrapper.leading-icon-supporting {
  // Adjust input padding for icon + gap
  .input-field {
    padding-left: 52px; // 12 (padding) + 24 (icon) + 16 (gap) = 52
  }

  // Leading icon placement
  .input-icon.leading {
    position: absolute;
    top: 50%;
    left: 12px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333; // dark by default
  }

  // Label (unpopulated, aligned with text start)
  .input-label {
    left: 52px; // after the icon
  }

  // Populated: float label above, shift back to 16px like "no icon"
  .input-field.has-value + .input-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color);
    background: #fff;
    padding: 0 4px;
    line-height: 1;
    left: 16px; // matches no-icon float position
  }

  // Input text when populated
  .input-field.has-value {
    line-height: 1.5;
    padding-top: 16px;
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Supporting text
  .input-helper {
    font-size: 0.75rem;
    line-height: 1.4;
    margin-top: 4px;   // 4px below field
    margin-left: 16px; // inset matches label/input
    margin-right: 16px;
    color: #6F6F6F;
  }

  .input-helper.error {
    color: var(--input-supporting-text-error, #D32F2F);
  }

  // Focused + populated label
  .input-field.has-value.is-focused + .input-label {
    color: var(--input-border-color-focus, #247984);
  }

  // Disabled state
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
  .input-field:disabled ~ .input-helper {
    color: #C6C6C6;
  }
  .input-field:disabled ~ .input-icon.leading {
    color: #C6C6C6;
  }
}

Label Text

Supporting text

Code

HTMLCSS

<div class="input-wrapper leading-icon-supporting">
    <span class="input-icon leading">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
            <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
            <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
        </svg>
    </span>
    <input id="leading-support-uee" class="input-field error with-label leading-icon" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated error input field">
    <label class="input-label" for="leading-support-uee">Label Text</label>
    <p class="input-helper error">Supporting text</p>
</div>

.input-wrapper.leading-icon-supporting {
  // Adjust input padding for icon + gap
  .input-field {
    padding-left: 52px; // 12 (padding) + 24 (icon) + 16 (gap) = 52
  }

  // Leading icon placement
  .input-icon.leading {
    position: absolute;
    top: 50%;
    left: 12px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333; // dark by default
  }

  // Label (unpopulated, aligned with text start)
  .input-label {
    left: 52px; // after the icon
  }

  // Populated: float label above, shift back to 16px like "no icon"
  .input-field.has-value + .input-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color);
    background: #fff;
    padding: 0 4px;
    line-height: 1;
    left: 16px; // matches no-icon float position
  }

  // Input text when populated
  .input-field.has-value {
    line-height: 1.5;
    padding-top: 16px;
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Supporting text
  .input-helper {
    font-size: 0.75rem;
    line-height: 1.4;
    margin-top: 4px;   // 4px below field
    margin-left: 16px; // inset matches label/input
    margin-right: 16px;
    color: #6F6F6F;
  }

  .input-helper.error {
    color: var(--input-supporting-text-error, #D32F2F);
  }

  // Focused + populated label
  .input-field.has-value.is-focused + .input-label {
    color: var(--input-border-color-focus, #247984);
  }

  // Disabled state
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
  .input-field:disabled ~ .input-helper {
    color: #C6C6C6;
  }
  .input-field:disabled ~ .input-icon.leading {
    color: #C6C6C6;
  }
}

Label text

Supporting text

Code

HTMLCSS

<div class="input-wrapper leading-icon-supporting">
    <span class="input-icon leading">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
            <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
            <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
        </svg>
    </span>
    <input id="leading-support-pee" class="input-field error has-value leading-icon" type="text" value="Label Text" aria-label="Populated error input field">
    <label class="input-label" for="leading-support-pee">Label text</label>
    <p class="input-helper error">Supporting text</p>
</div>

.input-wrapper.leading-icon-supporting {
  // Adjust input padding for icon + gap
  .input-field {
    padding-left: 52px; // 12 (padding) + 24 (icon) + 16 (gap) = 52
  }

  // Leading icon placement
  .input-icon.leading {
    position: absolute;
    top: 50%;
    left: 12px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333; // dark by default
  }

  // Label (unpopulated, aligned with text start)
  .input-label {
    left: 52px; // after the icon
  }

  // Populated: float label above, shift back to 16px like "no icon"
  .input-field.has-value + .input-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color);
    background: #fff;
    padding: 0 4px;
    line-height: 1;
    left: 16px; // matches no-icon float position
  }

  // Input text when populated
  .input-field.has-value {
    line-height: 1.5;
    padding-top: 16px;
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Supporting text
  .input-helper {
    font-size: 0.75rem;
    line-height: 1.4;
    margin-top: 4px;   // 4px below field
    margin-left: 16px; // inset matches label/input
    margin-right: 16px;
    color: #6F6F6F;
  }

  .input-helper.error {
    color: var(--input-supporting-text-error, #D32F2F);
  }

  // Focused + populated label
  .input-field.has-value.is-focused + .input-label {
    color: var(--input-border-color-focus, #247984);
  }

  // Disabled state
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
  .input-field:disabled ~ .input-helper {
    color: #C6C6C6;
  }
  .input-field:disabled ~ .input-icon.leading {
    color: #C6C6C6;
  }
}

Label Text

Supporting text

Code

HTMLCSS

<div class="input-wrapper leading-icon-supporting">
    <span class="input-icon leading">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
            <circle cx="11" cy="11" r="7" stroke="stroke="#9D9F9F"" stroke-width="2"/>
            <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="stroke="#9D9F9F" stroke-width="2"/>
        </svg>
    </span>
    <input id="leading-support-ud" class="input-field with-label leading-icon" type="text" disabled aria-label="Unpopulated disabled input field">
    <label class="input-label" for="leading-support-ud">Label Text</label>
    <p class="input-helper">Supporting text</p>
</div>

.input-wrapper.leading-icon-supporting {
  // Adjust input padding for icon + gap
  .input-field {
    padding-left: 52px; // 12 (padding) + 24 (icon) + 16 (gap) = 52
  }

  // Leading icon placement
  .input-icon.leading {
    position: absolute;
    top: 50%;
    left: 12px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333; // dark by default
  }

  // Label (unpopulated, aligned with text start)
  .input-label {
    left: 52px; // after the icon
  }

  // Populated: float label above, shift back to 16px like "no icon"
  .input-field.has-value + .input-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color);
    background: #fff;
    padding: 0 4px;
    line-height: 1;
    left: 16px; // matches no-icon float position
  }

  // Input text when populated
  .input-field.has-value {
    line-height: 1.5;
    padding-top: 16px;
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Supporting text
  .input-helper {
    font-size: 0.75rem;
    line-height: 1.4;
    margin-top: 4px;   // 4px below field
    margin-left: 16px; // inset matches label/input
    margin-right: 16px;
    color: #6F6F6F;
  }

  .input-helper.error {
    color: var(--input-supporting-text-error, #D32F2F);
  }

  // Focused + populated label
  .input-field.has-value.is-focused + .input-label {
    color: var(--input-border-color-focus, #247984);
  }

  // Disabled state
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
  .input-field:disabled ~ .input-helper {
    color: #C6C6C6;
  }
  .input-field:disabled ~ .input-icon.leading {
    color: #C6C6C6;
  }
}

Label text

Supporting text

Code

HTMLCSS

<div class="input-wrapper leading-icon-supporting">
    <span class="input-icon leading">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
            <circle cx="11" cy="11" r="7" stroke="stroke="#9D9F9F"" stroke-width="2"/>
            <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="stroke="#9D9F9F"" stroke-width="2"/>
        </svg>
    </span>
    <input id="leading-support-pd" class="input-field has-value leading-icon" type="text" value="Label Text" disabled aria-label="Populated disabled input field">
    <label class="input-label" for="leading-support-pd">Label text</label>
    <p class="input-helper">Supporting text</p>
</div>

.input-wrapper.leading-icon-supporting {
  // Adjust input padding for icon + gap
  .input-field {
    padding-left: 52px; // 12 (padding) + 24 (icon) + 16 (gap) = 52
  }

  // Leading icon placement
  .input-icon.leading {
    position: absolute;
    top: 50%;
    left: 12px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333; // dark by default
  }

  // Label (unpopulated, aligned with text start)
  .input-label {
    left: 52px; // after the icon
  }

  // Populated: float label above, shift back to 16px like "no icon"
  .input-field.has-value + .input-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color);
    background: #fff;
    padding: 0 4px;
    line-height: 1;
    left: 16px; // matches no-icon float position
  }

  // Input text when populated
  .input-field.has-value {
    line-height: 1.5;
    padding-top: 16px;
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Supporting text
  .input-helper {
    font-size: 0.75rem;
    line-height: 1.4;
    margin-top: 4px;   // 4px below field
    margin-left: 16px; // inset matches label/input
    margin-right: 16px;
    color: #6F6F6F;
  }

  .input-helper.error {
    color: var(--input-supporting-text-error, #D32F2F);
  }

  // Focused + populated label
  .input-field.has-value.is-focused + .input-label {
    color: var(--input-border-color-focus, #247984);
  }

  // Disabled state
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
  .input-field:disabled ~ .input-helper {
    color: #C6C6C6;
  }
  .input-field:disabled ~ .input-icon.leading {
    color: #C6C6C6;
  }
}

Label Text

Supporting text

States

Unpopulated/EnabledPopulated/EnabledUnpopulated/HoveredPopulated/HoveredUnpopulated/FocusedPopulated/FocusedUnpopulated/ErrorPopulated/ErrorUnpopulated/DisabledPopulated/Disabled

Label Text

Supporting text

Code

HTMLCSS

<div class="input-wrapper trailing-icon-supporting">
    <input id="trailing-support-ue" class="input-field with-label trailing-icon" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated enabled input field">
    <label class="input-label" for="trailing-support-ue">Label Text</label>
    <span class="input-icon trailing" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>

.input-wrapper.trailing-icon-supporting {
  // Input box
  .input-field {
    padding-right: 52px;  // 12 (padding) + 24 (icon) + 16 (gap)
  }

  // Trailing icon
  .input-icon.trailing {
    position: absolute;
    top: 50%;
    right: 12px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333;
  }

  // Label (default: centered when unpopulated)
  .input-label {
    left: 16px; // same as No Icon
  }

  // Floating label when populated
  .input-field.has-value + .input-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color);
    background: #fff;
    padding: 0 4px;
    line-height: 1;
  }

  // Input text when populated
  .input-field.has-value {
    line-height: 1.5;
    padding-top: 16px;
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Focused label
  .input-field.has-value.is-focused + .input-label {
    color: var(--input-border-color-focus, #247984);
  }

  // Error label
  .input-field.error + .input-label {
    color: var(--input-label-color-error, #D32F2F);
  }

  // Disabled label + icon
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
  .input-field:disabled ~ .input-icon.trailing {
    color: #9D9F9F; // disabled grey
  }

  // Supporting / helper text
  .input-helper {
    font-size: 0.75rem;
    margin-top: 4px;   // 4px gap under input box
    margin-left: 16px; // 16px inset left
    margin-right: 16px;
    color: #989898;

    &.error { color: #D32F2F; }
    &.disabled { color: #C6C6C6; }
  }
}

Label text

Supporting text

Code

HTMLCSS

<div class="input-wrapper trailing-icon-supporting">
    <input id="trailing-support-pe" class="input-field has-value trailing-icon" type="text" value="Input Text" aria-label="Populated enabled input field">
    <label class="input-label" for="trailing-support-pe">Label text</label>
    <span class="input-icon trailing" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>

.input-wrapper.trailing-icon-supporting {
  // Input box
  .input-field {
    padding-right: 52px;  // 12 (padding) + 24 (icon) + 16 (gap)
  }

  // Trailing icon
  .input-icon.trailing {
    position: absolute;
    top: 50%;
    right: 12px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333;
  }

  // Label (default: centered when unpopulated)
  .input-label {
    left: 16px; // same as No Icon
  }

  // Floating label when populated
  .input-field.has-value + .input-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color);
    background: #fff;
    padding: 0 4px;
    line-height: 1;
  }

  // Input text when populated
  .input-field.has-value {
    line-height: 1.5;
    padding-top: 16px;
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Focused label
  .input-field.has-value.is-focused + .input-label {
    color: var(--input-border-color-focus, #247984);
  }

  // Error label
  .input-field.error + .input-label {
    color: var(--input-label-color-error, #D32F2F);
  }

  // Disabled label + icon
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
  .input-field:disabled ~ .input-icon.trailing {
    color: #9D9F9F; // disabled grey
  }

  // Supporting / helper text
  .input-helper {
    font-size: 0.75rem;
    margin-top: 4px;   // 4px gap under input box
    margin-left: 16px; // 16px inset left
    margin-right: 16px;
    color: #989898;

    &.error { color: #D32F2F; }
    &.disabled { color: #C6C6C6; }
  }
}

Label Text

Supporting text

Code

HTMLCSS

<div class="input-wrapper trailing-icon-supporting">
    <input id="trailing-support-uh" class="input-field with-label is-hover trailing-icon" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated hovered input field">
    <label class="input-label" for="trailing-support-uh">Label Text</label>
    <span class="input-icon trailing" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>

.input-wrapper.trailing-icon-supporting {
  // Input box
  .input-field {
    padding-right: 52px;  // 12 (padding) + 24 (icon) + 16 (gap)
  }

  // Trailing icon
  .input-icon.trailing {
    position: absolute;
    top: 50%;
    right: 12px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333;
  }

  // Label (default: centered when unpopulated)
  .input-label {
    left: 16px; // same as No Icon
  }

  // Floating label when populated
  .input-field.has-value + .input-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color);
    background: #fff;
    padding: 0 4px;
    line-height: 1;
  }

  // Input text when populated
  .input-field.has-value {
    line-height: 1.5;
    padding-top: 16px;
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Focused label
  .input-field.has-value.is-focused + .input-label {
    color: var(--input-border-color-focus, #247984);
  }

  // Error label
  .input-field.error + .input-label {
    color: var(--input-label-color-error, #D32F2F);
  }

  // Disabled label + icon
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
  .input-field:disabled ~ .input-icon.trailing {
    color: #9D9F9F; // disabled grey
  }

  // Supporting / helper text
  .input-helper {
    font-size: 0.75rem;
    margin-top: 4px;   // 4px gap under input box
    margin-left: 16px; // 16px inset left
    margin-right: 16px;
    color: #989898;

    &.error { color: #D32F2F; }
    &.disabled { color: #C6C6C6; }
  }
}

Label text

Supporting text

Code

HTMLCSS

<div class="input-wrapper trailing-icon-supporting">
    <input id="trailing-support-ph" class="input-field has-value is-hover trailing-icon" type="text" value="Input Text" aria-label="Populated hovered input field">
    <label class="input-label" for="trailing-support-ph">Label text</label>
    <span class="input-icon trailing" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>

.input-wrapper.trailing-icon-supporting {
  // Input box
  .input-field {
    padding-right: 52px;  // 12 (padding) + 24 (icon) + 16 (gap)
  }

  // Trailing icon
  .input-icon.trailing {
    position: absolute;
    top: 50%;
    right: 12px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333;
  }

  // Label (default: centered when unpopulated)
  .input-label {
    left: 16px; // same as No Icon
  }

  // Floating label when populated
  .input-field.has-value + .input-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color);
    background: #fff;
    padding: 0 4px;
    line-height: 1;
  }

  // Input text when populated
  .input-field.has-value {
    line-height: 1.5;
    padding-top: 16px;
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Focused label
  .input-field.has-value.is-focused + .input-label {
    color: var(--input-border-color-focus, #247984);
  }

  // Error label
  .input-field.error + .input-label {
    color: var(--input-label-color-error, #D32F2F);
  }

  // Disabled label + icon
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
  .input-field:disabled ~ .input-icon.trailing {
    color: #9D9F9F; // disabled grey
  }

  // Supporting / helper text
  .input-helper {
    font-size: 0.75rem;
    margin-top: 4px;   // 4px gap under input box
    margin-left: 16px; // 16px inset left
    margin-right: 16px;
    color: #989898;

    &.error { color: #D32F2F; }
    &.disabled { color: #C6C6C6; }
  }
}

Label Text

Supporting text

Code

HTMLCSS

<div class="input-wrapper trailing-icon-supporting">
    <input id="trailing-support-uf" class="input-field with-label is-focused trailing-icon" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated focused input field">
    <label class="input-label" for="trailing-support-uf">Label Text</label>
    <span class="input-icon trailing" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>

.input-wrapper.trailing-icon-supporting {
  // Input box
  .input-field {
    padding-right: 52px;  // 12 (padding) + 24 (icon) + 16 (gap)
  }

  // Trailing icon
  .input-icon.trailing {
    position: absolute;
    top: 50%;
    right: 12px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333;
  }

  // Label (default: centered when unpopulated)
  .input-label {
    left: 16px; // same as No Icon
  }

  // Floating label when populated
  .input-field.has-value + .input-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color);
    background: #fff;
    padding: 0 4px;
    line-height: 1;
  }

  // Input text when populated
  .input-field.has-value {
    line-height: 1.5;
    padding-top: 16px;
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Focused label
  .input-field.has-value.is-focused + .input-label {
    color: var(--input-border-color-focus, #247984);
  }

  // Error label
  .input-field.error + .input-label {
    color: var(--input-label-color-error, #D32F2F);
  }

  // Disabled label + icon
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
  .input-field:disabled ~ .input-icon.trailing {
    color: #9D9F9F; // disabled grey
  }

  // Supporting / helper text
  .input-helper {
    font-size: 0.75rem;
    margin-top: 4px;   // 4px gap under input box
    margin-left: 16px; // 16px inset left
    margin-right: 16px;
    color: #989898;

    &.error { color: #D32F2F; }
    &.disabled { color: #C6C6C6; }
  }
}

Label text

Supporting text

Code

HTMLCSS

<div class="input-wrapper trailing-icon-supporting">
    <input id="trailing-support-pf" class="input-field has-value is-focused trailing-icon" type="text" value="Input Text" aria-label="Populated focused input field">
    <label class="input-label" for="trailing-support-pf">Label text</label>
    <span class="input-icon trailing" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>

.input-wrapper.trailing-icon-supporting {
  // Input box
  .input-field {
    padding-right: 52px;  // 12 (padding) + 24 (icon) + 16 (gap)
  }

  // Trailing icon
  .input-icon.trailing {
    position: absolute;
    top: 50%;
    right: 12px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333;
  }

  // Label (default: centered when unpopulated)
  .input-label {
    left: 16px; // same as No Icon
  }

  // Floating label when populated
  .input-field.has-value + .input-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color);
    background: #fff;
    padding: 0 4px;
    line-height: 1;
  }

  // Input text when populated
  .input-field.has-value {
    line-height: 1.5;
    padding-top: 16px;
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Focused label
  .input-field.has-value.is-focused + .input-label {
    color: var(--input-border-color-focus, #247984);
  }

  // Error label
  .input-field.error + .input-label {
    color: var(--input-label-color-error, #D32F2F);
  }

  // Disabled label + icon
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
  .input-field:disabled ~ .input-icon.trailing {
    color: #9D9F9F; // disabled grey
  }

  // Supporting / helper text
  .input-helper {
    font-size: 0.75rem;
    margin-top: 4px;   // 4px gap under input box
    margin-left: 16px; // 16px inset left
    margin-right: 16px;
    color: #989898;

    &.error { color: #D32F2F; }
    &.disabled { color: #C6C6C6; }
  }
}

Label Text

Supporting text

Code

HTMLCSS

<div class="input-wrapper trailing-icon-supporting">
    <input id="trailing-support-uee" class="input-field error with-label trailing-icon" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated error input field">
    <label class="input-label" for="trailing-support-uee">Label Text</label>
    <span class="input-icon trailing error" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
            <circle cx="12" cy="12" r="10" fill="#D32F2F"/>
            <path d="M12 7V13" stroke="white" stroke-width="2" stroke-linecap="round"/>
            <circle cx="12" cy="17" r="1.5" fill="white"/>
        </svg>
    </span>
    <p class="input-helper error">Supporting text</p>
</div>

.input-wrapper.trailing-icon-supporting {
  // Input box
  .input-field {
    padding-right: 52px;  // 12 (padding) + 24 (icon) + 16 (gap)
  }

  // Trailing icon
  .input-icon.trailing {
    position: absolute;
    top: 50%;
    right: 12px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333;
  }

  // Label (default: centered when unpopulated)
  .input-label {
    left: 16px; // same as No Icon
  }

  // Floating label when populated
  .input-field.has-value + .input-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color);
    background: #fff;
    padding: 0 4px;
    line-height: 1;
  }

  // Input text when populated
  .input-field.has-value {
    line-height: 1.5;
    padding-top: 16px;
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Focused label
  .input-field.has-value.is-focused + .input-label {
    color: var(--input-border-color-focus, #247984);
  }

  // Error label
  .input-field.error + .input-label {
    color: var(--input-label-color-error, #D32F2F);
  }

  // Disabled label + icon
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
  .input-field:disabled ~ .input-icon.trailing {
    color: #9D9F9F; // disabled grey
  }

  // Supporting / helper text
  .input-helper {
    font-size: 0.75rem;
    margin-top: 4px;   // 4px gap under input box
    margin-left: 16px; // 16px inset left
    margin-right: 16px;
    color: #989898;

    &.error { color: #D32F2F; }
    &.disabled { color: #C6C6C6; }
  }
}

Label text

Error message here

Code

HTMLCSS

<div class="input-wrapper trailing-icon-supporting">
    <input id="trailing-support-pee" class="input-field error has-value trailing-icon" type="text" value="Input Text" aria-label="Populated error input field">
    <label class="input-label" for="trailing-support-pee">Label text</label>
    <span class="input-icon trailing error" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
            <circle cx="12" cy="12" r="10" fill="#D32F2F"/>
            <path d="M12 7V13" stroke="white" stroke-width="2" stroke-linecap="round"/>
            <circle cx="12" cy="17" r="1.5" fill="white"/>
        </svg>
    </span>
    <p class="input-helper error">Error message here</p>
</div>

.input-wrapper.trailing-icon-supporting {
  // Input box
  .input-field {
    padding-right: 52px;  // 12 (padding) + 24 (icon) + 16 (gap)
  }

  // Trailing icon
  .input-icon.trailing {
    position: absolute;
    top: 50%;
    right: 12px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333;
  }

  // Label (default: centered when unpopulated)
  .input-label {
    left: 16px; // same as No Icon
  }

  // Floating label when populated
  .input-field.has-value + .input-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color);
    background: #fff;
    padding: 0 4px;
    line-height: 1;
  }

  // Input text when populated
  .input-field.has-value {
    line-height: 1.5;
    padding-top: 16px;
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Focused label
  .input-field.has-value.is-focused + .input-label {
    color: var(--input-border-color-focus, #247984);
  }

  // Error label
  .input-field.error + .input-label {
    color: var(--input-label-color-error, #D32F2F);
  }

  // Disabled label + icon
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
  .input-field:disabled ~ .input-icon.trailing {
    color: #9D9F9F; // disabled grey
  }

  // Supporting / helper text
  .input-helper {
    font-size: 0.75rem;
    margin-top: 4px;   // 4px gap under input box
    margin-left: 16px; // 16px inset left
    margin-right: 16px;
    color: #989898;

    &.error { color: #D32F2F; }
    &.disabled { color: #C6C6C6; }
  }
}

Label Text

Supporting text

Code

HTMLCSS

<div class="input-wrapper trailing-icon-supporting">
    <input id="trailing-support-ud" class="input-field with-label trailing-icon" type="text" disabled aria-label="Unpopulated disabled input field">
    <label class="input-label" for="trailing-support-ud">Label Text</label>
    <span class="input-icon trailing" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>

.input-wrapper.trailing-icon-supporting {
  // Input box
  .input-field {
    padding-right: 52px;  // 12 (padding) + 24 (icon) + 16 (gap)
  }

  // Trailing icon
  .input-icon.trailing {
    position: absolute;
    top: 50%;
    right: 12px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333;
  }

  // Label (default: centered when unpopulated)
  .input-label {
    left: 16px; // same as No Icon
  }

  // Floating label when populated
  .input-field.has-value + .input-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color);
    background: #fff;
    padding: 0 4px;
    line-height: 1;
  }

  // Input text when populated
  .input-field.has-value {
    line-height: 1.5;
    padding-top: 16px;
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Focused label
  .input-field.has-value.is-focused + .input-label {
    color: var(--input-border-color-focus, #247984);
  }

  // Error label
  .input-field.error + .input-label {
    color: var(--input-label-color-error, #D32F2F);
  }

  // Disabled label + icon
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
  .input-field:disabled ~ .input-icon.trailing {
    color: #9D9F9F; // disabled grey
  }

  // Supporting / helper text
  .input-helper {
    font-size: 0.75rem;
    margin-top: 4px;   // 4px gap under input box
    margin-left: 16px; // 16px inset left
    margin-right: 16px;
    color: #989898;

    &.error { color: #D32F2F; }
    &.disabled { color: #C6C6C6; }
  }
}

Label text

Supporting text

Code

HTMLCSS

<div class="input-wrapper trailing-icon-supporting">
    <input id="trailing-support-pd" class="input-field has-value trailing-icon" type="text" value="Input Text" disabled aria-label="Populated disabled input field">
    <label class="input-label" for="trailing-support-pd">Label text</label>
    <span class="input-icon trailing" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>

.input-wrapper.trailing-icon-supporting {
  // Input box
  .input-field {
    padding-right: 52px;  // 12 (padding) + 24 (icon) + 16 (gap)
  }

  // Trailing icon
  .input-icon.trailing {
    position: absolute;
    top: 50%;
    right: 12px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333;
  }

  // Label (default: centered when unpopulated)
  .input-label {
    left: 16px; // same as No Icon
  }

  // Floating label when populated
  .input-field.has-value + .input-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color);
    background: #fff;
    padding: 0 4px;
    line-height: 1;
  }

  // Input text when populated
  .input-field.has-value {
    line-height: 1.5;
    padding-top: 16px;
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Focused label
  .input-field.has-value.is-focused + .input-label {
    color: var(--input-border-color-focus, #247984);
  }

  // Error label
  .input-field.error + .input-label {
    color: var(--input-label-color-error, #D32F2F);
  }

  // Disabled label + icon
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
  .input-field:disabled ~ .input-icon.trailing {
    color: #9D9F9F; // disabled grey
  }

  // Supporting / helper text
  .input-helper {
    font-size: 0.75rem;
    margin-top: 4px;   // 4px gap under input box
    margin-left: 16px; // 16px inset left
    margin-right: 16px;
    color: #989898;

    &.error { color: #D32F2F; }
    &.disabled { color: #C6C6C6; }
  }
}

Label

States

Unpopulated/EnabledPopulated/EnabledUnpopulated/HoveredPopulated/HoveredUnpopulated/FocusedPopulated/FocusedUnpopulated/ErrorPopulated/ErrorUnpopulated/DisabledPopulated/Disabled

Label Text

Code

HTMLCSS

<div class="input-wrapper leading-trailing-icon">
    <span class="input-icon leading">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
            <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
            <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
        </svg>
    </span>
    <input id="lt-ue" class="input-field with-label leading-icon trailing-icon" type="text" aria-label="Unpopulated enabled input field">
    <label class="input-label" for="lt-ue">Label Text</label>
    <span class="input-icon trailing" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>

.input-wrapper.leading-trailing-icon {
  // Adjust input padding for both icons
  .input-field {
    padding-left: 52px;  // 12 + 24 + 16 = 52px before text
    padding-right: 52px; // 12 + 24 + 16 = 52px after text
  }

  // Leading icon placement
  .input-icon.leading {
    position: absolute;
    top: 50%;
    left: 12px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333;
  }

  // Trailing icon placement
  .input-icon.trailing {
    position: absolute;
    top: 50%;
    right: 12px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333;
  }

  // Label (default)
  .input-label {
    left: 52px; // starts after leading icon
  }

  // Populated: float label above input
  .input-field.has-value + .input-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color);
    background: #fff;
    padding: 0 4px;
    line-height: 1;
    left: 16px; // ⬅️ align same as No Icon when floating
  }

  // Input text when populated
  .input-field.has-value {
    line-height: 1.5;
    padding-top: 16px;
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Focused + populated label
  .input-field.has-value.is-focused + .input-label {
    color: var(--input-border-color-focus, #247984);
  }

  // Error label + icons
  .input-field.error + .input-label {
    color: var(--input-label-color-error, #D32F2F);
  }
  .input-field.error ~ .input-icon.leading,
  .input-field.error ~ .input-icon.trailing {
    color: #D32F2F;
  }

  // Disabled label + icons
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
  .input-field:disabled ~ .input-icon.leading,
  .input-field:disabled ~ .input-icon.trailing {
    color: #C6C6C6;
    opacity: 0.6;
  }
}

Label text

Code

HTMLCSS

<div class="input-wrapper leading-trailing-icon">
    <span class="input-icon leading">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
            <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
            <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
        </svg>
    </span>
    <input id="lt-pe" class="input-field has-value leading-icon trailing-icon" type="text" value="Input Text" aria-label="Populated enabled input field">
    <label class="input-label" for="lt-pe">Label text</label>
    <span class="input-icon trailing" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>

.input-wrapper.leading-trailing-icon {
  // Adjust input padding for both icons
  .input-field {
    padding-left: 52px;  // 12 + 24 + 16 = 52px before text
    padding-right: 52px; // 12 + 24 + 16 = 52px after text
  }

  // Leading icon placement
  .input-icon.leading {
    position: absolute;
    top: 50%;
    left: 12px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333;
  }

  // Trailing icon placement
  .input-icon.trailing {
    position: absolute;
    top: 50%;
    right: 12px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333;
  }

  // Label (default)
  .input-label {
    left: 52px; // starts after leading icon
  }

  // Populated: float label above input
  .input-field.has-value + .input-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color);
    background: #fff;
    padding: 0 4px;
    line-height: 1;
    left: 16px; // ⬅️ align same as No Icon when floating
  }

  // Input text when populated
  .input-field.has-value {
    line-height: 1.5;
    padding-top: 16px;
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Focused + populated label
  .input-field.has-value.is-focused + .input-label {
    color: var(--input-border-color-focus, #247984);
  }

  // Error label + icons
  .input-field.error + .input-label {
    color: var(--input-label-color-error, #D32F2F);
  }
  .input-field.error ~ .input-icon.leading,
  .input-field.error ~ .input-icon.trailing {
    color: #D32F2F;
  }

  // Disabled label + icons
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
  .input-field:disabled ~ .input-icon.leading,
  .input-field:disabled ~ .input-icon.trailing {
    color: #C6C6C6;
    opacity: 0.6;
  }
}

Label

Code

HTMLCSS

<div class="input-wrapper leading-trailing-icon">
    <span class="input-icon leading">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
            <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
            <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
        </svg>
    </span>
    <input id="lt-uh" class="input-field with-label is-hover leading-icon trailing-icon" type="text" aria-label="Unpopulated hovered input field">
    <label class="input-label" for="lt-uh">Label</label>
    <span class="input-icon trailing" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>

.input-wrapper.leading-trailing-icon {
  // Adjust input padding for both icons
  .input-field {
    padding-left: 52px;  // 12 + 24 + 16 = 52px before text
    padding-right: 52px; // 12 + 24 + 16 = 52px after text
  }

  // Leading icon placement
  .input-icon.leading {
    position: absolute;
    top: 50%;
    left: 12px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333;
  }

  // Trailing icon placement
  .input-icon.trailing {
    position: absolute;
    top: 50%;
    right: 12px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333;
  }

  // Label (default)
  .input-label {
    left: 52px; // starts after leading icon
  }

  // Populated: float label above input
  .input-field.has-value + .input-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color);
    background: #fff;
    padding: 0 4px;
    line-height: 1;
    left: 16px; // ⬅️ align same as No Icon when floating
  }

  // Input text when populated
  .input-field.has-value {
    line-height: 1.5;
    padding-top: 16px;
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Focused + populated label
  .input-field.has-value.is-focused + .input-label {
    color: var(--input-border-color-focus, #247984);
  }

  // Error label + icons
  .input-field.error + .input-label {
    color: var(--input-label-color-error, #D32F2F);
  }
  .input-field.error ~ .input-icon.leading,
  .input-field.error ~ .input-icon.trailing {
    color: #D32F2F;
  }

  // Disabled label + icons
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
  .input-field:disabled ~ .input-icon.leading,
  .input-field:disabled ~ .input-icon.trailing {
    color: #C6C6C6;
    opacity: 0.6;
  }
}

Label text

Code

HTMLCSS

<div class="input-wrapper leading-trailing-icon">
    <span class="input-icon leading">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
            <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
            <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
        </svg>
    </span>
    <input id="lt-ph" class="input-field has-value is-hover leading-icon trailing-icon" type="text" value="Label Text" aria-label="Populated hovered input field">
    <label class="input-label" for="lt-ph">Label text</label>
    <span class="input-icon trailing" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>

.input-wrapper.leading-trailing-icon {
  // Adjust input padding for both icons
  .input-field {
    padding-left: 52px;  // 12 + 24 + 16 = 52px before text
    padding-right: 52px; // 12 + 24 + 16 = 52px after text
  }

  // Leading icon placement
  .input-icon.leading {
    position: absolute;
    top: 50%;
    left: 12px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333;
  }

  // Trailing icon placement
  .input-icon.trailing {
    position: absolute;
    top: 50%;
    right: 12px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333;
  }

  // Label (default)
  .input-label {
    left: 52px; // starts after leading icon
  }

  // Populated: float label above input
  .input-field.has-value + .input-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color);
    background: #fff;
    padding: 0 4px;
    line-height: 1;
    left: 16px; // ⬅️ align same as No Icon when floating
  }

  // Input text when populated
  .input-field.has-value {
    line-height: 1.5;
    padding-top: 16px;
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Focused + populated label
  .input-field.has-value.is-focused + .input-label {
    color: var(--input-border-color-focus, #247984);
  }

  // Error label + icons
  .input-field.error + .input-label {
    color: var(--input-label-color-error, #D32F2F);
  }
  .input-field.error ~ .input-icon.leading,
  .input-field.error ~ .input-icon.trailing {
    color: #D32F2F;
  }

  // Disabled label + icons
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
  .input-field:disabled ~ .input-icon.leading,
  .input-field:disabled ~ .input-icon.trailing {
    color: #C6C6C6;
    opacity: 0.6;
  }
}

Label Text

Code

HTMLCSS

<div class="input-wrapper leading-trailing-icon">
    <span class="input-icon leading">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
            <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
            <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
        </svg>
    </span>
    <input id="lt-uf" class="input-field with-label is-focused leading-icon trailing-icon" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated focused input field">
    <label class="input-label" for="lt-uf">Label Text</label>
    <span class="input-icon trailing" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>

.input-wrapper.leading-trailing-icon {
  // Adjust input padding for both icons
  .input-field {
    padding-left: 52px;  // 12 + 24 + 16 = 52px before text
    padding-right: 52px; // 12 + 24 + 16 = 52px after text
  }

  // Leading icon placement
  .input-icon.leading {
    position: absolute;
    top: 50%;
    left: 12px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333;
  }

  // Trailing icon placement
  .input-icon.trailing {
    position: absolute;
    top: 50%;
    right: 12px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333;
  }

  // Label (default)
  .input-label {
    left: 52px; // starts after leading icon
  }

  // Populated: float label above input
  .input-field.has-value + .input-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color);
    background: #fff;
    padding: 0 4px;
    line-height: 1;
    left: 16px; // ⬅️ align same as No Icon when floating
  }

  // Input text when populated
  .input-field.has-value {
    line-height: 1.5;
    padding-top: 16px;
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Focused + populated label
  .input-field.has-value.is-focused + .input-label {
    color: var(--input-border-color-focus, #247984);
  }

  // Error label + icons
  .input-field.error + .input-label {
    color: var(--input-label-color-error, #D32F2F);
  }
  .input-field.error ~ .input-icon.leading,
  .input-field.error ~ .input-icon.trailing {
    color: #D32F2F;
  }

  // Disabled label + icons
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
  .input-field:disabled ~ .input-icon.leading,
  .input-field:disabled ~ .input-icon.trailing {
    color: #C6C6C6;
    opacity: 0.6;
  }
}

Label text

Code

HTMLCSS

<div class="input-wrapper leading-trailing-icon">
    <span class="input-icon leading">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
            <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
            <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
        </svg>
    </span>
    <input id="lt-pf" class="input-field has-value is-focused leading-icon trailing-icon" type="text" value="Label Text" aria-label="Populated focused input field">
    <label class="input-label" for="lt-pf">Label text</label>
    <span class="input-icon trailing" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>

.input-wrapper.leading-trailing-icon {
  // Adjust input padding for both icons
  .input-field {
    padding-left: 52px;  // 12 + 24 + 16 = 52px before text
    padding-right: 52px; // 12 + 24 + 16 = 52px after text
  }

  // Leading icon placement
  .input-icon.leading {
    position: absolute;
    top: 50%;
    left: 12px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333;
  }

  // Trailing icon placement
  .input-icon.trailing {
    position: absolute;
    top: 50%;
    right: 12px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333;
  }

  // Label (default)
  .input-label {
    left: 52px; // starts after leading icon
  }

  // Populated: float label above input
  .input-field.has-value + .input-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color);
    background: #fff;
    padding: 0 4px;
    line-height: 1;
    left: 16px; // ⬅️ align same as No Icon when floating
  }

  // Input text when populated
  .input-field.has-value {
    line-height: 1.5;
    padding-top: 16px;
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Focused + populated label
  .input-field.has-value.is-focused + .input-label {
    color: var(--input-border-color-focus, #247984);
  }

  // Error label + icons
  .input-field.error + .input-label {
    color: var(--input-label-color-error, #D32F2F);
  }
  .input-field.error ~ .input-icon.leading,
  .input-field.error ~ .input-icon.trailing {
    color: #D32F2F;
  }

  // Disabled label + icons
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
  .input-field:disabled ~ .input-icon.leading,
  .input-field:disabled ~ .input-icon.trailing {
    color: #C6C6C6;
    opacity: 0.6;
  }
}

Label Text

Code

HTMLCSS

<div class="input-wrapper leading-trailing-icon">
    <span class="input-icon leading">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
            <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
            <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
        </svg>
    </span>
    <input id="lt-uee" class="input-field error with-label leading-icon trailing-icon" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated error input field">
    <label class="input-label" for="lt-uee">Label Text</label>
    <span class="input-icon trailing error" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
            <circle cx="12" cy="12" r="10" fill="#D32F2F"/>
            <path d="M12 7V13" stroke="white" stroke-width="2" stroke-linecap="round"/>
            <circle cx="12" cy="17" r="1.5" fill="white"/>
        </svg>
    </span>
</div>

.input-wrapper.leading-trailing-icon {
  // Adjust input padding for both icons
  .input-field {
    padding-left: 52px;  // 12 + 24 + 16 = 52px before text
    padding-right: 52px; // 12 + 24 + 16 = 52px after text
  }

  // Leading icon placement
  .input-icon.leading {
    position: absolute;
    top: 50%;
    left: 12px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333;
  }

  // Trailing icon placement
  .input-icon.trailing {
    position: absolute;
    top: 50%;
    right: 12px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333;
  }

  // Label (default)
  .input-label {
    left: 52px; // starts after leading icon
  }

  // Populated: float label above input
  .input-field.has-value + .input-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color);
    background: #fff;
    padding: 0 4px;
    line-height: 1;
    left: 16px; // ⬅️ align same as No Icon when floating
  }

  // Input text when populated
  .input-field.has-value {
    line-height: 1.5;
    padding-top: 16px;
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Focused + populated label
  .input-field.has-value.is-focused + .input-label {
    color: var(--input-border-color-focus, #247984);
  }

  // Error label + icons
  .input-field.error + .input-label {
    color: var(--input-label-color-error, #D32F2F);
  }
  .input-field.error ~ .input-icon.leading,
  .input-field.error ~ .input-icon.trailing {
    color: #D32F2F;
  }

  // Disabled label + icons
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
  .input-field:disabled ~ .input-icon.leading,
  .input-field:disabled ~ .input-icon.trailing {
    color: #C6C6C6;
    opacity: 0.6;
  }
}

Label text

Code

HTMLCSS

<div class="input-wrapper leading-trailing-icon">
    <span class="input-icon leading">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
            <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
            <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
        </svg>
    </span>
    <input id="lt-pee" class="input-field error has-value leading-icon trailing-icon" type="text" value="Label Text" aria-label="Populated error input field">
    <label class="input-label" for="lt-pee">Label text</label>
    <span class="input-icon trailing error" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
            <circle cx="12" cy="12" r="10" fill="#D32F2F"/>
            <path d="M12 7V13" stroke="white" stroke-width="2" stroke-linecap="round"/>
            <circle cx="12" cy="17" r="1.5" fill="white"/>
        </svg>
    </span>
</div>

.input-wrapper.leading-trailing-icon {
  // Adjust input padding for both icons
  .input-field {
    padding-left: 52px;  // 12 + 24 + 16 = 52px before text
    padding-right: 52px; // 12 + 24 + 16 = 52px after text
  }

  // Leading icon placement
  .input-icon.leading {
    position: absolute;
    top: 50%;
    left: 12px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333;
  }

  // Trailing icon placement
  .input-icon.trailing {
    position: absolute;
    top: 50%;
    right: 12px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333;
  }

  // Label (default)
  .input-label {
    left: 52px; // starts after leading icon
  }

  // Populated: float label above input
  .input-field.has-value + .input-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color);
    background: #fff;
    padding: 0 4px;
    line-height: 1;
    left: 16px; // ⬅️ align same as No Icon when floating
  }

  // Input text when populated
  .input-field.has-value {
    line-height: 1.5;
    padding-top: 16px;
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Focused + populated label
  .input-field.has-value.is-focused + .input-label {
    color: var(--input-border-color-focus, #247984);
  }

  // Error label + icons
  .input-field.error + .input-label {
    color: var(--input-label-color-error, #D32F2F);
  }
  .input-field.error ~ .input-icon.leading,
  .input-field.error ~ .input-icon.trailing {
    color: #D32F2F;
  }

  // Disabled label + icons
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
  .input-field:disabled ~ .input-icon.leading,
  .input-field:disabled ~ .input-icon.trailing {
    color: #C6C6C6;
    opacity: 0.6;
  }
}

Label Text

Code

HTMLCSS

<div class="input-wrapper leading-trailing-icon">
    <span class="input-icon leading">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
            <circle cx="11" cy="11" r="7" stroke="#9D9F9F" stroke-width="2"/>
            <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#9D9F9F" stroke-width="2"/>
        </svg>
    </span>
    <input id="lt-ud" class="input-field with-label leading-icon trailing-icon" type="text" disabled aria-label="Unpopulated disabled input field">
    <label class="input-label" for="lt-ud">Label Text</label>
    <span class="input-icon trailing" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>

.input-wrapper.leading-trailing-icon {
  // Adjust input padding for both icons
  .input-field {
    padding-left: 52px;  // 12 + 24 + 16 = 52px before text
    padding-right: 52px; // 12 + 24 + 16 = 52px after text
  }

  // Leading icon placement
  .input-icon.leading {
    position: absolute;
    top: 50%;
    left: 12px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333;
  }

  // Trailing icon placement
  .input-icon.trailing {
    position: absolute;
    top: 50%;
    right: 12px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333;
  }

  // Label (default)
  .input-label {
    left: 52px; // starts after leading icon
  }

  // Populated: float label above input
  .input-field.has-value + .input-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color);
    background: #fff;
    padding: 0 4px;
    line-height: 1;
    left: 16px; // ⬅️ align same as No Icon when floating
  }

  // Input text when populated
  .input-field.has-value {
    line-height: 1.5;
    padding-top: 16px;
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Focused + populated label
  .input-field.has-value.is-focused + .input-label {
    color: var(--input-border-color-focus, #247984);
  }

  // Error label + icons
  .input-field.error + .input-label {
    color: var(--input-label-color-error, #D32F2F);
  }
  .input-field.error ~ .input-icon.leading,
  .input-field.error ~ .input-icon.trailing {
    color: #D32F2F;
  }

  // Disabled label + icons
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
  .input-field:disabled ~ .input-icon.leading,
  .input-field:disabled ~ .input-icon.trailing {
    color: #C6C6C6;
    opacity: 0.6;
  }
}

Label text

Code

HTMLCSS

<div class="input-wrapper leading-trailing-icon">
    <span class="input-icon leading">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
            <circle cx="11" cy="11" r="7" stroke="#9D9F9F" stroke-width="2"/>
            <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#9D9F9F" stroke-width="2"/>
        </svg>
    </span>
    <input id="lt-pd" class="input-field has-value leading-icon trailing-icon" type="text" value="Label Text" disabled aria-label="Populated disabled input field">
    <label class="input-label" for="lt-pd">Label text</label>
    <span class="input-icon trailing" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>

.input-wrapper.leading-trailing-icon {
  // Adjust input padding for both icons
  .input-field {
    padding-left: 52px;  // 12 + 24 + 16 = 52px before text
    padding-right: 52px; // 12 + 24 + 16 = 52px after text
  }

  // Leading icon placement
  .input-icon.leading {
    position: absolute;
    top: 50%;
    left: 12px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333;
  }

  // Trailing icon placement
  .input-icon.trailing {
    position: absolute;
    top: 50%;
    right: 12px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333;
  }

  // Label (default)
  .input-label {
    left: 52px; // starts after leading icon
  }

  // Populated: float label above input
  .input-field.has-value + .input-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color);
    background: #fff;
    padding: 0 4px;
    line-height: 1;
    left: 16px; // ⬅️ align same as No Icon when floating
  }

  // Input text when populated
  .input-field.has-value {
    line-height: 1.5;
    padding-top: 16px;
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Focused + populated label
  .input-field.has-value.is-focused + .input-label {
    color: var(--input-border-color-focus, #247984);
  }

  // Error label + icons
  .input-field.error + .input-label {
    color: var(--input-label-color-error, #D32F2F);
  }
  .input-field.error ~ .input-icon.leading,
  .input-field.error ~ .input-icon.trailing {
    color: #D32F2F;
  }

  // Disabled label + icons
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
  .input-field:disabled ~ .input-icon.leading,
  .input-field:disabled ~ .input-icon.trailing {
    color: #C6C6C6;
    opacity: 0.6;
  }
}

Label

Supporting text

States

Unpopulated/EnabledPopulated/EnabledUnpopulated/HoveredPopulated/HoveredUnpopulated/FocusedPopulated/FocusedUnpopulated/ErrorPopulated/ErrorUnpopulated/DisabledPopulated/Disabled

Label

Supporting text

Code

HTMLCSS

<div class="input-wrapper leading-trailing-icon-supporting">
    <span class="input-icon leading">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
            <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
            <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
        </svg>
    </span>
    <input id="lts-ue" class="input-field with-label 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 xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>

.input-wrapper.leading-trailing-icon-supporting {
  // Adjust input padding for both icons
  .input-field {
    padding-left: 52px;  // 12 + 24 + 16 = 52px before text
    padding-right: 52px; // 12 + 24 + 16 = 52px after text
  }

  // Leading icon placement
  .input-icon.leading {
    position: absolute;
    top: 50%;
    left: 12px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333;
  }

  // Trailing icon placement
  .input-icon.trailing {
    position: absolute;
    top: 50%;
    right: 12px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333;
  }

  // Label (default, when unpopulated)
  .input-label {
    left: 52px; // starts after leading icon
  }

  // Populated: float label above input
  .input-field.has-value + .input-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color);
    background: #fff;
    padding: 0 4px;
    line-height: 1;
    left: 16px; // ⬅️ align same as No Icon when floating
  }

  // Input text when populated
  .input-field.has-value {
    line-height: 1.5;
    padding-top: 16px;
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Supporting text
  .input-helper {
    margin-top: 4px;
    font-size: 0.75rem;
    color: #989898;

    &.error {
      color: #D32F2F;
    }
  }

  // Focused + populated label
  .input-field.has-value.is-focused + .input-label {
    color: var(--input-border-color-focus, #247984);
  }

  // Error label + icons
  .input-field.error + .input-label {
    color: var(--input-label-color-error, #D32F2F);
  }
  .input-field.error ~ .input-icon.leading,
  .input-field.error ~ .input-icon.trailing {
    color: #D32F2F;
  }

  // Disabled label + icons
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
  .input-field:disabled ~ .input-icon.leading,
  .input-field:disabled ~ .input-icon.trailing {
    color: #C6C6C6;
    opacity: 0.6;
  }
}

Label text

Supporting text

Code

HTMLCSS

<div class="input-wrapper leading-trailing-icon-supporting">
    <span class="input-icon leading">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
            <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
            <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
        </svg>
    </span>
    <input id="lts-pe" class="input-field has-value leading-icon trailing-icon" type="text" value="Input Text" aria-label="Populated enabled input field">
    <label class="input-label" for="lts-pe">Label text</label>
    <span class="input-icon trailing" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>

.input-wrapper.leading-trailing-icon-supporting {
  // Adjust input padding for both icons
  .input-field {
    padding-left: 52px;  // 12 + 24 + 16 = 52px before text
    padding-right: 52px; // 12 + 24 + 16 = 52px after text
  }

  // Leading icon placement
  .input-icon.leading {
    position: absolute;
    top: 50%;
    left: 12px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333;
  }

  // Trailing icon placement
  .input-icon.trailing {
    position: absolute;
    top: 50%;
    right: 12px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333;
  }

  // Label (default, when unpopulated)
  .input-label {
    left: 52px; // starts after leading icon
  }

  // Populated: float label above input
  .input-field.has-value + .input-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color);
    background: #fff;
    padding: 0 4px;
    line-height: 1;
    left: 16px; // ⬅️ align same as No Icon when floating
  }

  // Input text when populated
  .input-field.has-value {
    line-height: 1.5;
    padding-top: 16px;
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Supporting text
  .input-helper {
    margin-top: 4px;
    font-size: 0.75rem;
    color: #989898;

    &.error {
      color: #D32F2F;
    }
  }

  // Focused + populated label
  .input-field.has-value.is-focused + .input-label {
    color: var(--input-border-color-focus, #247984);
  }

  // Error label + icons
  .input-field.error + .input-label {
    color: var(--input-label-color-error, #D32F2F);
  }
  .input-field.error ~ .input-icon.leading,
  .input-field.error ~ .input-icon.trailing {
    color: #D32F2F;
  }

  // Disabled label + icons
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
  .input-field:disabled ~ .input-icon.leading,
  .input-field:disabled ~ .input-icon.trailing {
    color: #C6C6C6;
    opacity: 0.6;
  }
}

Label Text

Supporting text

Code

HTMLCSS

<div class="input-wrapper leading-trailing-icon-supporting">
    <span class="input-icon leading">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
            <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
            <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
        </svg>
    </span>
    <input id="lts-uh" class="input-field with-label is-hover leading-icon trailing-icon" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated hovered input field">
    <label class="input-label" for="lts-uh">Label Text</label>
    <span class="input-icon trailing" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>

.input-wrapper.leading-trailing-icon-supporting {
  // Adjust input padding for both icons
  .input-field {
    padding-left: 52px;  // 12 + 24 + 16 = 52px before text
    padding-right: 52px; // 12 + 24 + 16 = 52px after text
  }

  // Leading icon placement
  .input-icon.leading {
    position: absolute;
    top: 50%;
    left: 12px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333;
  }

  // Trailing icon placement
  .input-icon.trailing {
    position: absolute;
    top: 50%;
    right: 12px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333;
  }

  // Label (default, when unpopulated)
  .input-label {
    left: 52px; // starts after leading icon
  }

  // Populated: float label above input
  .input-field.has-value + .input-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color);
    background: #fff;
    padding: 0 4px;
    line-height: 1;
    left: 16px; // ⬅️ align same as No Icon when floating
  }

  // Input text when populated
  .input-field.has-value {
    line-height: 1.5;
    padding-top: 16px;
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Supporting text
  .input-helper {
    margin-top: 4px;
    font-size: 0.75rem;
    color: #989898;

    &.error {
      color: #D32F2F;
    }
  }

  // Focused + populated label
  .input-field.has-value.is-focused + .input-label {
    color: var(--input-border-color-focus, #247984);
  }

  // Error label + icons
  .input-field.error + .input-label {
    color: var(--input-label-color-error, #D32F2F);
  }
  .input-field.error ~ .input-icon.leading,
  .input-field.error ~ .input-icon.trailing {
    color: #D32F2F;
  }

  // Disabled label + icons
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
  .input-field:disabled ~ .input-icon.leading,
  .input-field:disabled ~ .input-icon.trailing {
    color: #C6C6C6;
    opacity: 0.6;
  }
}

Label text

Supporting text

Code

HTMLCSS

<div class="input-wrapper leading-trailing-icon-supporting">
    <span class="input-icon leading">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
            <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
            <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
        </svg>
    </span>
    <input id="lts-ph" class="input-field has-value is-hover leading-icon trailing-icon" type="text" value="Label Text" aria-label="Populated hovered input field">
    <label class="input-label" for="lts-ph">Label text</label>
    <span class="input-icon trailing" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>

.input-wrapper.leading-trailing-icon-supporting {
  // Adjust input padding for both icons
  .input-field {
    padding-left: 52px;  // 12 + 24 + 16 = 52px before text
    padding-right: 52px; // 12 + 24 + 16 = 52px after text
  }

  // Leading icon placement
  .input-icon.leading {
    position: absolute;
    top: 50%;
    left: 12px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333;
  }

  // Trailing icon placement
  .input-icon.trailing {
    position: absolute;
    top: 50%;
    right: 12px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333;
  }

  // Label (default, when unpopulated)
  .input-label {
    left: 52px; // starts after leading icon
  }

  // Populated: float label above input
  .input-field.has-value + .input-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color);
    background: #fff;
    padding: 0 4px;
    line-height: 1;
    left: 16px; // ⬅️ align same as No Icon when floating
  }

  // Input text when populated
  .input-field.has-value {
    line-height: 1.5;
    padding-top: 16px;
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Supporting text
  .input-helper {
    margin-top: 4px;
    font-size: 0.75rem;
    color: #989898;

    &.error {
      color: #D32F2F;
    }
  }

  // Focused + populated label
  .input-field.has-value.is-focused + .input-label {
    color: var(--input-border-color-focus, #247984);
  }

  // Error label + icons
  .input-field.error + .input-label {
    color: var(--input-label-color-error, #D32F2F);
  }
  .input-field.error ~ .input-icon.leading,
  .input-field.error ~ .input-icon.trailing {
    color: #D32F2F;
  }

  // Disabled label + icons
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
  .input-field:disabled ~ .input-icon.leading,
  .input-field:disabled ~ .input-icon.trailing {
    color: #C6C6C6;
    opacity: 0.6;
  }
}

Label Text

Supporting text

Code

HTMLCSS

<div class="input-wrapper leading-trailing-icon-supporting">
    <span class="input-icon leading">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
            <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
            <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
        </svg>
    </span>
    <input id="lts-uf" class="input-field with-label is-focused leading-icon trailing-icon" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated focused input field">
    <label class="input-label" for="lts-uf">Label Text</label>
    <span class="input-icon trailing" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>

.input-wrapper.leading-trailing-icon-supporting {
  // Adjust input padding for both icons
  .input-field {
    padding-left: 52px;  // 12 + 24 + 16 = 52px before text
    padding-right: 52px; // 12 + 24 + 16 = 52px after text
  }

  // Leading icon placement
  .input-icon.leading {
    position: absolute;
    top: 50%;
    left: 12px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333;
  }

  // Trailing icon placement
  .input-icon.trailing {
    position: absolute;
    top: 50%;
    right: 12px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333;
  }

  // Label (default, when unpopulated)
  .input-label {
    left: 52px; // starts after leading icon
  }

  // Populated: float label above input
  .input-field.has-value + .input-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color);
    background: #fff;
    padding: 0 4px;
    line-height: 1;
    left: 16px; // ⬅️ align same as No Icon when floating
  }

  // Input text when populated
  .input-field.has-value {
    line-height: 1.5;
    padding-top: 16px;
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Supporting text
  .input-helper {
    margin-top: 4px;
    font-size: 0.75rem;
    color: #989898;

    &.error {
      color: #D32F2F;
    }
  }

  // Focused + populated label
  .input-field.has-value.is-focused + .input-label {
    color: var(--input-border-color-focus, #247984);
  }

  // Error label + icons
  .input-field.error + .input-label {
    color: var(--input-label-color-error, #D32F2F);
  }
  .input-field.error ~ .input-icon.leading,
  .input-field.error ~ .input-icon.trailing {
    color: #D32F2F;
  }

  // Disabled label + icons
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
  .input-field:disabled ~ .input-icon.leading,
  .input-field:disabled ~ .input-icon.trailing {
    color: #C6C6C6;
    opacity: 0.6;
  }
}

Label text

Supporting text

Code

HTMLCSS

<div class="input-wrapper leading-trailing-icon-supporting">
    <span class="input-icon leading">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
            <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
            <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
        </svg>
    </span>
    <input id="lts-pf" class="input-field has-value is-focused leading-icon trailing-icon" type="text" value="Input Text" aria-label="Populated focused input field">
    <label class="input-label" for="lts-pf">Label text</label>
    <span class="input-icon trailing" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>

.input-wrapper.leading-trailing-icon-supporting {
  // Adjust input padding for both icons
  .input-field {
    padding-left: 52px;  // 12 + 24 + 16 = 52px before text
    padding-right: 52px; // 12 + 24 + 16 = 52px after text
  }

  // Leading icon placement
  .input-icon.leading {
    position: absolute;
    top: 50%;
    left: 12px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333;
  }

  // Trailing icon placement
  .input-icon.trailing {
    position: absolute;
    top: 50%;
    right: 12px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333;
  }

  // Label (default, when unpopulated)
  .input-label {
    left: 52px; // starts after leading icon
  }

  // Populated: float label above input
  .input-field.has-value + .input-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color);
    background: #fff;
    padding: 0 4px;
    line-height: 1;
    left: 16px; // ⬅️ align same as No Icon when floating
  }

  // Input text when populated
  .input-field.has-value {
    line-height: 1.5;
    padding-top: 16px;
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Supporting text
  .input-helper {
    margin-top: 4px;
    font-size: 0.75rem;
    color: #989898;

    &.error {
      color: #D32F2F;
    }
  }

  // Focused + populated label
  .input-field.has-value.is-focused + .input-label {
    color: var(--input-border-color-focus, #247984);
  }

  // Error label + icons
  .input-field.error + .input-label {
    color: var(--input-label-color-error, #D32F2F);
  }
  .input-field.error ~ .input-icon.leading,
  .input-field.error ~ .input-icon.trailing {
    color: #D32F2F;
  }

  // Disabled label + icons
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
  .input-field:disabled ~ .input-icon.leading,
  .input-field:disabled ~ .input-icon.trailing {
    color: #C6C6C6;
    opacity: 0.6;
  }
}

Label Text

Supporting text

Code

HTMLCSS

<div class="input-wrapper leading-trailing-icon-supporting">
    <span class="input-icon leading">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
            <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
            <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
        </svg>
    </span>
    <input id="lts-uee" class="input-field error with-label leading-icon trailing-icon" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated error input field">
    <label class="input-label" for="lts-uee">Label Text</label>
    <span class="input-icon trailing error" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
            <circle cx="12" cy="12" r="10" fill="#D32F2F"/>
            <path d="M12 7V13" stroke="white" stroke-width="2" stroke-linecap="round"/>
            <circle cx="12" cy="17" r="1.5" fill="white"/>
        </svg>
    </span>
    <p class="input-helper error">Supporting text</p>
</div>

.input-wrapper.leading-trailing-icon-supporting {
  // Adjust input padding for both icons
  .input-field {
    padding-left: 52px;  // 12 + 24 + 16 = 52px before text
    padding-right: 52px; // 12 + 24 + 16 = 52px after text
  }

  // Leading icon placement
  .input-icon.leading {
    position: absolute;
    top: 50%;
    left: 12px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333;
  }

  // Trailing icon placement
  .input-icon.trailing {
    position: absolute;
    top: 50%;
    right: 12px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333;
  }

  // Label (default, when unpopulated)
  .input-label {
    left: 52px; // starts after leading icon
  }

  // Populated: float label above input
  .input-field.has-value + .input-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color);
    background: #fff;
    padding: 0 4px;
    line-height: 1;
    left: 16px; // ⬅️ align same as No Icon when floating
  }

  // Input text when populated
  .input-field.has-value {
    line-height: 1.5;
    padding-top: 16px;
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Supporting text
  .input-helper {
    margin-top: 4px;
    font-size: 0.75rem;
    color: #989898;

    &.error {
      color: #D32F2F;
    }
  }

  // Focused + populated label
  .input-field.has-value.is-focused + .input-label {
    color: var(--input-border-color-focus, #247984);
  }

  // Error label + icons
  .input-field.error + .input-label {
    color: var(--input-label-color-error, #D32F2F);
  }
  .input-field.error ~ .input-icon.leading,
  .input-field.error ~ .input-icon.trailing {
    color: #D32F2F;
  }

  // Disabled label + icons
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
  .input-field:disabled ~ .input-icon.leading,
  .input-field:disabled ~ .input-icon.trailing {
    color: #C6C6C6;
    opacity: 0.6;
  }
}

Label text

Supporting text

Code

HTMLCSS

<div class="input-wrapper leading-trailing-icon-supporting">
    <span class="input-icon leading">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
            <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
            <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
        </svg>
    </span>
    <input id="lts-pee" class="input-field error has-value leading-icon trailing-icon" type="text" value="Label Text" aria-label="Populated error input field">
    <label class="input-label" for="lts-pee">Label text</label>
    <span class="input-icon trailing error" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
            <circle cx="12" cy="12" r="10" fill="#D32F2F"/>
            <path d="M12 7V13" stroke="white" stroke-width="2" stroke-linecap="round"/>
            <circle cx="12" cy="17" r="1.5" fill="white"/>
        </svg>
    </span>
    <p class="input-helper error">Supporting text</p>
</div>

.input-wrapper.leading-trailing-icon-supporting {
  // Adjust input padding for both icons
  .input-field {
    padding-left: 52px;  // 12 + 24 + 16 = 52px before text
    padding-right: 52px; // 12 + 24 + 16 = 52px after text
  }

  // Leading icon placement
  .input-icon.leading {
    position: absolute;
    top: 50%;
    left: 12px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333;
  }

  // Trailing icon placement
  .input-icon.trailing {
    position: absolute;
    top: 50%;
    right: 12px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333;
  }

  // Label (default, when unpopulated)
  .input-label {
    left: 52px; // starts after leading icon
  }

  // Populated: float label above input
  .input-field.has-value + .input-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color);
    background: #fff;
    padding: 0 4px;
    line-height: 1;
    left: 16px; // ⬅️ align same as No Icon when floating
  }

  // Input text when populated
  .input-field.has-value {
    line-height: 1.5;
    padding-top: 16px;
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Supporting text
  .input-helper {
    margin-top: 4px;
    font-size: 0.75rem;
    color: #989898;

    &.error {
      color: #D32F2F;
    }
  }

  // Focused + populated label
  .input-field.has-value.is-focused + .input-label {
    color: var(--input-border-color-focus, #247984);
  }

  // Error label + icons
  .input-field.error + .input-label {
    color: var(--input-label-color-error, #D32F2F);
  }
  .input-field.error ~ .input-icon.leading,
  .input-field.error ~ .input-icon.trailing {
    color: #D32F2F;
  }

  // Disabled label + icons
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
  .input-field:disabled ~ .input-icon.leading,
  .input-field:disabled ~ .input-icon.trailing {
    color: #C6C6C6;
    opacity: 0.6;
  }
}

Label Text

Supporting text

Code

HTMLCSS

<div class="input-wrapper leading-trailing-icon-supporting">
    <span class="input-icon leading">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
            <circle cx="11" cy="11" r="7" stroke="#9D9F9F" stroke-width="2"/>
            <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#9D9F9F" stroke-width="2"/>
        </svg>
    </span>
    <input id="lts-ud" class="input-field with-label leading-icon trailing-icon" type="text" disabled aria-label="Unpopulated disabled input field">
    <label class="input-label" for="lts-ud">Label Text</label>
    <span class="input-icon trailing" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>

.input-wrapper.leading-trailing-icon-supporting {
  // Adjust input padding for both icons
  .input-field {
    padding-left: 52px;  // 12 + 24 + 16 = 52px before text
    padding-right: 52px; // 12 + 24 + 16 = 52px after text
  }

  // Leading icon placement
  .input-icon.leading {
    position: absolute;
    top: 50%;
    left: 12px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333;
  }

  // Trailing icon placement
  .input-icon.trailing {
    position: absolute;
    top: 50%;
    right: 12px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333;
  }

  // Label (default, when unpopulated)
  .input-label {
    left: 52px; // starts after leading icon
  }

  // Populated: float label above input
  .input-field.has-value + .input-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color);
    background: #fff;
    padding: 0 4px;
    line-height: 1;
    left: 16px; // ⬅️ align same as No Icon when floating
  }

  // Input text when populated
  .input-field.has-value {
    line-height: 1.5;
    padding-top: 16px;
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Supporting text
  .input-helper {
    margin-top: 4px;
    font-size: 0.75rem;
    color: #989898;

    &.error {
      color: #D32F2F;
    }
  }

  // Focused + populated label
  .input-field.has-value.is-focused + .input-label {
    color: var(--input-border-color-focus, #247984);
  }

  // Error label + icons
  .input-field.error + .input-label {
    color: var(--input-label-color-error, #D32F2F);
  }
  .input-field.error ~ .input-icon.leading,
  .input-field.error ~ .input-icon.trailing {
    color: #D32F2F;
  }

  // Disabled label + icons
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
  .input-field:disabled ~ .input-icon.leading,
  .input-field:disabled ~ .input-icon.trailing {
    color: #C6C6C6;
    opacity: 0.6;
  }
}

Label text

Supporting text

Code

HTMLCSS

<div class="input-wrapper leading-trailing-icon-supporting">
    <span class="input-icon leading">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
            <circle cx="11" cy="11" r="7" stroke="#9D9F9F" stroke-width="2"/>
            <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#9D9F9F" stroke-width="2"/>
        </svg>
    </span>
    <input id="lts-pd" class="input-field has-value leading-icon trailing-icon" type="text" value="Label Text" disabled aria-label="Populated disabled input field">
    <label class="input-label" for="lts-pd">Label text</label>
    <span class="input-icon trailing" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>

.input-wrapper.leading-trailing-icon-supporting {
  // Adjust input padding for both icons
  .input-field {
    padding-left: 52px;  // 12 + 24 + 16 = 52px before text
    padding-right: 52px; // 12 + 24 + 16 = 52px after text
  }

  // Leading icon placement
  .input-icon.leading {
    position: absolute;
    top: 50%;
    left: 12px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333;
  }

  // Trailing icon placement
  .input-icon.trailing {
    position: absolute;
    top: 50%;
    right: 12px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333;
  }

  // Label (default, when unpopulated)
  .input-label {
    left: 52px; // starts after leading icon
  }

  // Populated: float label above input
  .input-field.has-value + .input-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color);
    background: #fff;
    padding: 0 4px;
    line-height: 1;
    left: 16px; // ⬅️ align same as No Icon when floating
  }

  // Input text when populated
  .input-field.has-value {
    line-height: 1.5;
    padding-top: 16px;
    padding-bottom: 16px;
    font-weight: 600;
  }

  // Supporting text
  .input-helper {
    margin-top: 4px;
    font-size: 0.75rem;
    color: #989898;

    &.error {
      color: #D32F2F;
    }
  }

  // Focused + populated label
  .input-field.has-value.is-focused + .input-label {
    color: var(--input-border-color-focus, #247984);
  }

  // Error label + icons
  .input-field.error + .input-label {
    color: var(--input-label-color-error, #D32F2F);
  }
  .input-field.error ~ .input-icon.leading,
  .input-field.error ~ .input-icon.trailing {
    color: #D32F2F;
  }

  // Disabled label + icons
  .input-field:disabled + .input-label {
    color: var(--input-label-color-disabled, #C6C6C6);
  }
  .input-field:disabled ~ .input-icon.leading,
  .input-field:disabled ~ .input-icon.trailing {
    color: #C6C6C6;
    opacity: 0.6;
  }
}

---

Resources

• SASS file on GitHub
• Markdown file on GitHub