Input

Versatile text, password, and search inputs with icon prefixing, size scales, and validation states.

Component Syntax

blade

<x-aura::input wire:model="email" placeholder="Enter email address" icon="mail" />

1. Input Types

blade

<x-aura::input name="email" wire:model="email" placeholder="john@example.com" />

<x-aura::input type="password" name="password" placeholder="Enter password" />

2. Input Sizes

blade

<x-aura::input size="sm" placeholder="Small (sm)" />

<x-aura::input size="md" placeholder="Medium (md)" />

<x-aura::input size="lg" placeholder="Large (lg)" />

3. Width Presets

blade

<x-aura::input width="xs" placeholder="Width xs" />
<x-aura::input width="sm" placeholder="Width sm" />
<x-aura::input width="md" placeholder="Width md" />
<x-aura::input width="lg" placeholder="Width lg" />
<x-aura::input width="full" placeholder="Width full" />

Component Props

Available properties and configurations for the input component.

Prop	Default	Available Values
type	text	text email password number search tel url
size	md	sm md lg
label	null	Label text string
placeholder	null	Placeholder text string
icon	null	Icon name string
iconTrailing	null	Icon name string
name	null	Field name string
required	false	true false
hint	null	Hint text string
error	null	Error text string
invalid	false	true false
width	full	auto xs sm md lg xl full

Aura Wire

Component Library

Input

Component Syntax

1. Input Types

2. Input Sizes

3. Width Presets

Component Props

Error

Textarea

Aura Wire