🚧 Under Construction

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

Input with Prefix and Suffix

View in Pattern Lab

HTML Markup

<div class="hoo-input-group">
    <div class="hoo-input-prefix">https://</div>
    <input class="hoo-input-text" id="file-upload-28"  type="text" placeholder="A placeholder text" data-suffix=".com" data-prefix="https://"   >
    <div class="hoo-input-suffix">.com</div>
</div>

Input with Prefix and Suffix

A text input field with both prefix and suffix elements attached.

Overview

This component extends the standard text input by adding visual elements before and after the input field, typically used for units, currency symbols, domain prefixes, or other contextual information about the expected input format.

Usage

Inputs with prefix and suffix should be used when:

  • The input requires context at both the beginning and end
  • Format restrictions need to be visually indicated
  • Domain or unit specifications need to be clearly shown

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 with prefix/suffix
  • .hoo-input-text - The text input element
  • .hoo-input-prefix - The prefix element
  • .hoo-input-suffix - The suffix element

Accessibility

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