Skip to content

Overview

The <x-aura::field> component wraps any form input element with consistent label, hint, error, and required indicator styling. It acts as a layout primitive for building custom form fields that are not covered by the built-in form components (Input, Select, etc.), or for composing third-party inputs into the Aura design system.

Use field for:

  • Wrapping custom or third-party inputs
  • Building compound form fields
  • Adding labels and validation messages to non-Aura inputs
  • Consistent form layout structure

Basic Usage

Choose a unique username.

<x-aura::field label="Username" for="username" hint="Choose a unique username.">
    <input type="text" id="username" name="username" class="aura-input" />
</x-aura::field>

Props

Prop Type Default Description
label string|null null Label text displayed above the input
for string|null null ID of the associated input element (sets the label's for attribute)
hint string|null null Helper text displayed below the input (hidden when error is present)
error string|null null Error message displayed below the input in danger color
required bool false Show a red asterisk (*) next to the label

Slots

Slot Description
Default The form input element(s) to wrap

Variants / Examples

With Error State

Please enter a valid email address.

<x-aura::field label="Email" for="email" error="Please enter a valid email address." required>
    <input type="email" id="email" name="email" class="aura-input" />
</x-aura::field>

With Hint Text

Must be at least 8 characters.

<x-aura::field label="Password" for="password" hint="Must be at least 8 characters." required>
    <input type="password" id="password" name="password" class="aura-input" />
</x-aura::field>

Wrapping a Custom Component

Select your preferred theme color.

<x-aura::field label="Color Theme" hint="Select your preferred theme color.">
    <div class="flex gap-2">
        <button class="w-8 h-8 rounded-full bg-blue-500"></button>
        <button class="w-8 h-8 rounded-full bg-green-500"></button>
        <button class="w-8 h-8 rounded-full bg-purple-500"></button>
    </div>
</x-aura::field>

With Livewire Validation

<x-aura::field label="Name" for="name" :error="$errors->first('name')" required>
    <x-aura::input id="name" wire:model="name" />
</x-aura::field>

Accessibility

  • When for is provided, the <label> element is linked to its input via the for attribute, enabling click-to-focus behavior.
  • The required indicator (*) is displayed visually; for complete screen reader support, also add the required attribute to the input element itself.
  • Error messages are rendered as <p> elements styled in danger color, providing visible feedback on validation failures.
  • The hint text is hidden when an error is present to avoid conflicting messages.