Laravel Input Component

Free · MIT

Text input field with label, prefix/suffix, icons, validation errors, and Livewire support.

A Input built for the TALL stack — Blade, Livewire 3 & 4, Alpine.js and Tailwind CSS 4. Server-rendered by default, dark-mode ready, and WCAG-minded. Drop it in with a single Blade tag: <x-aura::input>

Try it live in the docs Install free

Installation

composer require bluestarsystem/aura-ui

Usage

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

See the full API, props and live examples in the Input documentation.

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

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`