#Label Component

#Introduction

The label component provides consistent styling and accessibility for form field labels. It automatically handles required field indicators and integrates seamlessly with the field component for proper spacing and layout. Designed to work perfectly with all form input components.

#Installation

Use the sheaf artisan command to install the label component easily:

php artisan sheaf:install label

#Basic Usage

<x-ui.label>Email Address</x-ui.label>

#Using Text Prop

You can pass the label text as a prop instead of using the slot:

<x-ui.label text="Full Name" />

#Required Field Indicator

#Required Label

<x-ui.label required>Email Address</x-ui.label>

#With Field Component (Automatic)

When used within a field component with required, the label automatically inherits the required state:

<x-ui.field required>
    <x-ui.label>Email Address</x-ui.label>
    <x-ui.input 
        wire:model="email" 
        type="email"
        placeholder="john@example.com"
    />
    <x-ui.error name="email" />
</x-ui.field>

#Usage with Form Components

#With Input

<x-ui.label>Full Name</x-ui.label>
<x-ui.input 
    wire:model="name" 
    placeholder="John Doe"
/>

#With Select

<x-ui.label required>Country</x-ui.label>
<x-ui.select wire:model="country">
    <x-ui.select.option value="us">United States</x-ui.select.option>
    <x-ui.select.option value="ca">Canada</x-ui.select.option>
    <x-ui.select.option value="uk">United Kingdom</x-ui.select.option>
</x-ui.select>

#With Textarea

<x-ui.label>Message</x-ui.label>
<x-ui.textarea 
    wire:model="message" 
    placeholder="Enter your message..."
    rows="4"
/>

#With Checkbox

<x-ui.checkbox wire:model="newsletter">
    <x-ui.label>Subscribe to newsletter</x-ui.label>
</x-ui.checkbox>

#Complete Form Examples

#Registration Form

<form class="space-y-6">
    <x-ui.field required>
        <x-ui.label>Full Name</x-ui.label>
        <x-ui.input 
            wire:model="name"
            placeholder="John Doe"
        />
        <x-ui.error name="name" />
    </x-ui.field>
    
    <x-ui.field required>
        <x-ui.label>Email Address</x-ui.label>
        <x-ui.input 
            wire:model="email"
            type="email"
            placeholder="john@example.com"
        />
        <x-ui.error name="email" />
    </x-ui.field>
    
    <x-ui.field>
        <x-ui.label>Company</x-ui.label>
        <x-ui.input 
            wire:model="company"
            placeholder="Acme Inc."
        />
        <x-ui.error name="company" />
    </x-ui.field>
</form>

#Styling and Customization

#Custom Classes

<x-ui.label class="text-lg font-bold text-blue-600">
    Custom Styled Label
</x-ui.label>

<x-ui.label class="text-xs uppercase tracking-wide text-gray-500">
    Small Label
</x-ui.label>

#Accessibility

The label component follows accessibility best practices:

• Uses semantic HTML structure
• Provides clear visual hierarchy
• Required indicators are properly marked with aria-hidden="true"
• Works seamlessly with screen readers
• Maintains proper color contrast

#Component Props

#Integration with Other Components

The label component is designed to work seamlessly with:

• Field Component - Provides automatic spacing and required state inheritance
• Input Component - Text inputs, email, password, etc.
• Select Component - Dropdown selections
• Textarea Component - Multi-line text input
• Checkbox Component - Boolean selections
• Radio Component - Single choice selections