🚧 Under Construction

This component documentation is currently being developed. Some features may be incomplete.

Text Input with Prefix

View in Pattern Lab

HTML Markup

<div class="hoo-input-group">
    <div id="suffix-label-toggle-97" class="hoo-input-prefix">https://</div>
    <input class="hoo-input-text"  id="toggle-97" 
        placeholder="A placeholder text"  >
</div>

Text Input with Prefix

A text input field with a prefix element attached at the beginning of the input.

Overview

The prefixed text input extends the standard text input by adding a visual element before the input field, typically used for currency symbols, domain prefixes, or other contextual information about the expected input.

Usage

Text inputs with prefixes should be used when:

  • The input requires a unit or currency indicator at the start
  • Additional context about the expected format is needed
  • Visual distinction of the prefix from the input value is important

States

  • Default - Normal state
  • Focus - When the input has keyboard focus
  • Disabled - When the input cannot be interacted with
  • Invalid - When the input contains invalid data

SCSS

Component Import

SCSS Partial Location

CSS Classes

  • .hoo-input-group - Container for the input and prefix
  • .hoo-input-text - The text input element
  • .hoo-input-prefix - The prefix element

Accessibility

  • Always associate the input with a <label> element
  • Ensure the prefix is clearly connected to the input visually and semantically
  • Use aria-describedby if the prefix provides important information
  • When disabled, include aria-disabled="true"