Input Text

Single-line text input component for forms. Supports multiple states, icon slots, and trauma-informed validation feedback.

Component Props

Prop	Type	Default	Description
`name`	string	required	Input name attribute
`value`	mixed	null	Bound value
`placeholder`	string	''	Placeholder text
`type`	string	'text'	Input type (text, search, url, tel, etc.)
`state`	string	'default'	Visual state: default, error, success, disabled
`autocomplete`	string	null	Browser autocomplete attribute
`hasIconLeft`	bool	false	Reserve space for left icon slot
`hasIconRight`	bool	false	Reserve space for right icon slot
`inputmode`	string	null	Input mode for mobile keyboards (numeric, tel, etc.)
`ariaDescribedby`	string	null	ID of helper/error text element
`class`	string	''	Additional wrapper classes

States

Default

Full Name

Standard input with neutral styling

Error

Email Address

Please enter a valid email address

Success

Username

Username is available

Disabled

Account ID

This field cannot be edited

With Icons

Left Icon (Search)

Right Icon (Validation)

Phone Number

Both Icons

Location

Input Types

Text (Default)

Name

URL

Website

Telephone

Phone

Number

Age

Usage Example

Basic Usage

<x-building-blocks.input-text
    name="full_name"
    placeholder="Enter your full name"
/>

With Error State

<x-building-blocks.input-text
    name="email"
    value=""
    state="error"
    ariaDescribedby="email-error"
/>
<p id="email-error" class="text-error-600">
    Please enter a valid email
</p>

With Search Icon

<x-building-blocks.input-text
    name="search"
    type="search"
    placeholder="Search..."
    :hasIconLeft="true"
>
    <x-slot name="iconLeft">
        <x-building-blocks.icon name="search" size="md" />
    </x-slot>
</x-building-blocks.input-text>

Accessibility Features

ARIA Support: Proper aria-describedby for error/helper text, aria-invalid for error states
Touch Target: Minimum 48px height for mobile accessibility
Keyboard Navigation: Full keyboard support with visible focus states
Trauma-Informed: Error states use warm colors (not red-only) with clear, supportive messaging
Mobile Optimization: Proper inputmode attributes for optimal mobile keyboards
Autocomplete: Browser autocomplete support for improved UX