Laravel Floating Input Component

Free · MIT

Text field whose label starts inside the box and rises when the field is filled or focused.

A Floating Input built for the TALL stack — Blade, Livewire 3 & 4, Alpine.js and Tailwind CSS 4. Server-rendered by default and dark-mode ready. Aura's solid-background and border colours are contrast-tested against WCAG 2.1 AA/UI in CI, in both themes — see what's covered. Drop it in with a single Blade tag: <x-aura::floating-input>

Try it live in the docs Install free

Installation

composer require bluestarsystem/aura-ui

Usage

<x-aura::floating-input name="email" label="Email address" type="email" />

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

Overview

<x-aura::floating-input> keeps the label attached to the field at all times: it sits inside the control when empty and floats above it once there is a value or focus. Unlike a placeholder, the label never disappears — which is the whole point, because a placeholder-as-label leaves the user with an unlabelled box the moment they start typing.

Props

Prop	Type	Default	Description
`name`	`string`	`''`	Field name; also used to associate the label.
`label`	`string`	`''`	The floating label.
`type`	`string`	`'text'`	Any text-like input type: `text`, `email`, `password`, `tel`, `url`, `number`.
`value`	`string\|null`	`null`	Initial value.
`required`	`bool`	`false`	Marks the field required.
`disabled`	`bool`	`false`	Disables the field.
`error`	`string\|null`	`null`	Error message shown below, with the error styling applied.