Skip to content

No results for

↑ ↓ navigate ↵ open Esc close 
php artisan aura:add label

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

Field and Input already render a label. <x-aura::label> is that same label available on its own, for when you are wiring up a control the library does not provide — so you do not copy the classes out of the package and watch them drift apart at the next release.

Basic Usage

<div class="max-w-xs space-y-1.5">
    <x-aura::label for="demo-label-city">City</x-aura::label>
    <x-aura::input id="demo-label-city" name="city" />
</div>
<x-aura::label for="city">City</x-aura::label>
<input id="city" name="city" class="…your own control…" />

Props

Prop Type Default Description
for string|null null Id of the control this labels.
required bool false Mark the field as required.
optional bool false Mark the field as optional.

Required and optional

<div class="max-w-xs space-y-2">
    <x-aura::label for="a" required>Email</x-aura::label>
    <x-aura::label for="b" optional>Company</x-aura::label>
</div>

Accessibility

for must match the control's id, or the label is decoration: clicking it will not focus the field and a screen reader will not read it when the field takes focus.

required renders an asterisk and the word. The asterisk is aria-hidden, because "asterisk" read aloud tells nobody anything; the hidden word is what gets announced.

Marking the minority is kinder than marking the majority. If most fields in a form are required, mark the optional ones instead.