🚧 Under Construction

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

Invalid Text Input

View in Pattern Lab

HTML Markup

<p>Invalid style can be assigned using a CSS class:</p>
<input class="hoo-input-text is-invalid" type="text" placeholder="This is just a placehoder">
<p>Or just with default pseudo selector `:invalid`</p>
<input class="hoo-input-text" type="text" placeholder="This is just a placehoder" value="" required>
<p>The empty field is required there for at its current state invalid<br>To avoid showing up as invalid add the '.is-empty' class to the styles</p>
<input class="hoo-input-text is-empty" type="text" placeholder="This is just a placehoder" value="" required>
<p>Invalid fields can be also defined by using patter</p>
<input class="hoo-input-text" type="text" placeholder="This is just a placehoder" value="ABC" pattern="[a-z]{4,8}">
<p>The previous input only allows lowercase characters and a length of 4-8 characters</p>

Invalid Text Input

A text input that indicates validation errors or invalid input.

Overview

Invalid text inputs visually indicate that the entered value does not meet the required criteria or validation rules. This state provides immediate feedback to users about input problems.

Usage

Invalid text inputs should be used when:

  • The entered value does not meet validation requirements
  • Form submission has been attempted with errors
  • Real-time validation feedback is appropriate

Visual Characteristics

Invalid inputs are visually distinct from valid inputs:

  • Red border or highlight (ensuring sufficient color contrast)
  • Often accompanied by an error message or icon
  • May include additional validation message text

SCSS

Component Import

SCSS Partial Location

CSS Classes

  • .hoo-input-text - Base text input class
  • .hoo-input--invalid - Class for invalid state styling
  • .hoo-validation-message - Class for the error message

Accessibility

  • Always include aria-invalid="true" for invalid inputs
  • Connect error messages using aria-describedby
  • Ensure error messages are clear and actionable
  • Don’t rely on color alone to indicate errors
  • Consider when to trigger validation (on blur, on submit, etc.)