Skip to content

Overview

The Input component renders a styled text input wrapped in a label/error/hint structure. It supports prefix and suffix content (both text and icons), multiple sizes, validation error display, hint text, and seamless Livewire wire:model binding. The component handles all standard HTML input types (text, email, password, number, etc.).

Use the input component for:

  • Text and email fields
  • Password inputs
  • Number inputs
  • Search fields
  • Any standard HTML input type

Basic Usage

<x-aura::input label="Email" name="email" type="email" placeholder="[email protected]" />

Props

Prop Type Default Description
label string|null null Label text displayed above the input
type string 'text' HTML input type: text, email, password, number, tel, url, etc.
placeholder string|null null Placeholder text
hint string|null null Helper text below the input (hidden when error is set)
error string|null null Validation error message (replaces hint when set)
prefix string|null null Text prefix inside the input (e.g., "$", "https://")
suffix string|null null Text suffix inside the input (e.g., "kg", ".com")
prefixIcon string|null null Icon name for the prefix position
suffixIcon string|null null Icon name for the suffix position
clearable bool false Show a clear button (reserved for future use)
disabled bool false Disable the input
readonly bool false Make the input read-only
size string 'md' Input size: sm, md, lg

All additional attributes (e.g., name, id, wire:model, required, min, max, step) are passed through to the <input> element.

Variants/Examples

With Validation Error

Please enter a valid email address.

<x-aura::input
    label="Email"
    name="email"
    type="email"
    value="invalid-email"
    error="Please enter a valid email address."
/>

With Laravel @error Directive

<x-aura::input
    label="Email"
    name="email"
    type="email"
    :value="old('email')"
    :error="$errors->first('email')"
    required
/>

With Hint Text

Must be 3-20 characters, letters and numbers only.

<x-aura::input
    label="Username"
    name="username"
    hint="Must be 3-20 characters, letters and numbers only."
/>

Prefix and Suffix Text

$ .00
https:// .com 
<x-aura::input label="Price" name="price" type="number" prefix="$" suffix=".00" />

<x-aura::input label="Website" name="website" prefix="https://" suffix=".com" />

With Icons

<x-aura::input
    label="Search"
    name="search"
    prefixIcon="search"
    placeholder="Search..."
/>

<x-aura::input
    label="Email"
    name="email"
    type="email"
    prefixIcon="mail"
    placeholder="[email protected]"
/>

Password Field

<x-aura::input
    label="Password"
    name="password"
    type="password"
    prefixIcon="lock"
    placeholder="Enter your password"
    required
/>

With Livewire

{{-- Standard binding --}}
<x-aura::input label="Name" wire:model="name" />

{{-- Live binding (updates on every keystroke) --}}
<x-aura::input label="Search" wire:model.live="search" prefixIcon="search" />

{{-- Debounced binding --}}
<x-aura::input label="Search" wire:model.live.debounce.300ms="search" />

Disabled and Readonly

<x-aura::input label="Account ID" name="account_id" value="ACC-12345" disabled />
<x-aura::input label="Generated Code" name="code" value="XK9-F2M" readonly />

Size Variants

<x-aura::input label="Small" size="sm" placeholder="Small input" />
<x-aura::input label="Medium" size="md" placeholder="Medium input (default)" />
<x-aura::input label="Large" size="lg" placeholder="Large input" />

Slots

The Input component does not use named slots. All content is controlled via props.

Events

Standard HTML events and framework directives are supported:

{{-- Alpine.js --}}
<x-aura::input
    label="Search"
    x-model="query"
    x-on:input.debounce.300ms="search()"
/>

{{-- Livewire --}}
<x-aura::input
    label="Email"
    wire:model.blur="email"
/>

Accessibility

  • When label is provided, the component renders a <label> element associated with the input.
  • Error messages are rendered in a <p> tag with class aura-input-error-text, visually distinct (typically red).
  • Hint text appears as a <p> tag below the input; it is hidden when an error is present to avoid confusion.
  • The disabled and readonly HTML attributes are properly set on the <input> element.
  • Prefix and suffix elements are purely visual and do not interfere with the input value.
  • The input supports all standard keyboard interactions (Tab to focus, type to enter text).
  • For inputs without a visible label, use aria-label via attributes:
<x-aura::input aria-label="Search" prefixIcon="search" placeholder="Search..." />