> ## Documentation Index
> Fetch the complete documentation index at: https://docs.laravelshopper.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Label

> Form field label with optional required indicator

export const PreviewLabel = ({value, isRequired = false}) => {
  return <span className="sh-label">
      {value}
      {isRequired && <span className="sh-label-required"> *</span>}
    </span>;
};

export const ComponentPreview = ({children, className = '', centered = true}) => {
  return <div className={`sh-preview ${className}`}>
      <div className={`sh-preview-content ${centered ? 'flex items-center justify-center' : ''}`}>
        {children}
      </div>
    </div>;
};

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

## Preview

<ComponentPreview>
  <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
    <PreviewLabel value="Email address" />

    <PreviewLabel value="Password" isRequired={true} />
  </div>
</ComponentPreview>

## Usage

```blade theme={null}
<x-shopper::label for="email" value="Email address" />
```

## Props

<ParamField path="value" type="string">
  The label text. Can also use the slot instead.
</ParamField>

<ParamField path="isRequired" type="bool" default="false">
  Shows a red asterisk (\*) after the label text.
</ParamField>

## Examples

### Basic Label

<ComponentPreview>
  <PreviewLabel value="Username" />
</ComponentPreview>

```blade theme={null}
<x-shopper::label for="username" value="Username" />
```

### Required Field

<ComponentPreview>
  <PreviewLabel value="Email" isRequired={true} />
</ComponentPreview>

```blade theme={null}
<x-shopper::label for="email" value="Email" :isRequired="true" />
```

### Using Slot

```blade theme={null}
<x-shopper::label for="name">
    Full Name
</x-shopper::label>
```

### With Form Input

```blade theme={null}
<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

```blade theme={null}
@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>
```