Skip to main content
The Label component provides a styled label for form fields with an optional required indicator.

​
Preview

Email addressPassword *

​
Usage

<x-shopper::label for="email" value="Email address" />

​
Props

​
value
string
The label text. Can also use the slot instead.
​
isRequired
bool
default:"false"
Shows a red asterisk (*) after the label text.

​
Examples

​
Basic Label

Username
<x-shopper::label for="username" value="Username" />

​
Required Field

Email *
<x-shopper::label for="email" value="Email" :isRequired="true" />

​
Using Slot

<x-shopper::label for="name">
    Full Name
</x-shopper::label>

​
With Form Input

<div>
    <x-shopper::label for="email" value="Email" :isRequired="true" />
    <x-shopper::forms.input
        type="email"
        name="email"
        id="email"
        class="mt-1"
    />
</div>

​
Blade Component Source

@props([
    'value',
    'isRequired' => false,
])

<label {{ $attributes->twMerge(['class' => 'block font-medium text-sm text-gray-700 dark:text-gray-300']) }}>
    {{ $value ?? $slot }}

    @if ($isRequired)
        <span class="text-red-500">*</span>
    @endif
</label>