Components
Label
Renders an accessible label associated with controls.
php artisan blatui:add label
<div class="grid w-full max-w-sm items-center gap-2">
<x-ui.label for="username">Username</x-ui.label>
<x-ui.input type="text" id="username" placeholder="shadcn" />
</div>Disabled
<div class="flex items-center gap-2">
<x-ui.checkbox id="label-disabled" disabled />
<x-ui.label for="label-disabled">Accept terms and conditions</x-ui.label>
</div>Required
{{-- Required field — asterisk indicator in the label. --}}
<div class="grid w-full max-w-sm gap-2">
<x-ui.label for="req-email">Email <span class="text-destructive">*</span></x-ui.label>
<x-ui.input id="req-email" type="email" placeholder="[email protected]" required />
</div>With Badge
{{-- Label paired with an inline badge (e.g. Optional / New). --}}
<div class="grid w-full max-w-sm gap-2">
<x-ui.label for="badge-field" class="justify-between">
Recovery email
<x-ui.badge tone="info" variant="soft">Optional</x-ui.badge>
</x-ui.label>
<x-ui.input id="badge-field" type="email" placeholder="[email protected]" />
</div>With Checkbox
<div class="flex items-center gap-2">
<x-ui.checkbox id="label-terms" />
<x-ui.label for="label-terms">Accept terms and conditions</x-ui.label>
</div>API Reference
Props, slots and exposed methods for
<x-ui.label>.
Slots
| Slot | Description |
|---|---|
default |
The label text, plus any inline markup such as a required asterisk or a helper badge. Set the standard for attribute to associate the label with its control. |