Skip to content

No results for

↑ ↓ navigate ↵ open Esc close 
php artisan aura:add floating-input

Copies the component source into resources/views/components/aura/. Run php artisan aura:init first if you haven't already. See the CLI guide for all options.

composer require bluestarsystem/aura-ui
php artisan aura:install

Full installation instructions in the Installation guide.

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.

Basic Usage

<div class="max-w-sm">
    <x-aura::floating-input name="email" label="Email address" type="email" />
</div>
<x-aura::floating-input name="email" label="Email address" type="email" />

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.

With an error

<div class="max-w-sm">
    <x-aura::floating-input name="vat" label="VAT number" value="IT0000" error="That VAT number is not valid." />
</div>
<x-aura::floating-input name="vat" label="VAT number" :error="$errors->first('vat')" />

With Livewire

<x-aura::floating-input
    wire:model.blur="email"
    name="email"
    label="Email address"
    type="email"
    :error="$errors->first('email')"
/>

Notes

Do not also pass a placeholder: the label already occupies that position when the field is empty, and the two overlap.

For a conventional label-above-field layout, use Field with Input instead.