Input Components

LaraDashboard provides a complete set of form input components for building accessible, consistent forms. All inputs support Livewire binding, validation states, and dark mode.

Available Input Components#

Component	Purpose
<x-inputs.input>	Text, email, number, and other standard inputs
<x-inputs.select>	Dropdown selection
<x-inputs.textarea>	Multi-line text input
<x-inputs.checkbox>	Single checkbox
<x-inputs.radio>	Radio button
<x-inputs.password>	Password input with toggle
<x-inputs.date-picker>	Date selection
<x-inputs.datetime-picker>	Date and time selection
<x-inputs.file-input>	File upload
<x-inputs.combobox>	Searchable dropdown
<x-inputs.tags-input>	Tag/keyword input
<x-inputs.range-input>	Slider input
<x-inputs.search>	Search input field

---

Input Component#

The primary text input component supporting multiple types with addons.

Props#

Prop	Type	Default	Description
label	string	null	Input label text
placeholder	string	''	Placeholder text
hint	string	null	Help text below input
type	string	'text'	Input type (text, email, number, etc.)
name	string	null	Input name attribute
value	mixed	null	Initial value
required	boolean	false	Mark as required
disabled	boolean	false	Disable the input
autocomplete	string	null	Autocomplete attribute
min	mixed	null	Minimum value (for number/date)
max	mixed	null	Maximum value (for number/date)
step	mixed	null	Step value (for number)
addonLeft	string	null	Text addon on left
addonRight	string	null	Text addon on right
addonLeftIcon	string	null	Icon addon on left
addonRightIcon	string	null	Icon addon on right

Basic Usage#

{{-- Simple text input --}}
<x-inputs.input
    label="Full Name"
    name="name"
    placeholder="Enter your name"
    required
/>

{{-- Email input --}}
<x-inputs.input
    label="Email Address"
    name="email"
    type="email"
    placeholder="you@example.com"
    required
/>

{{-- Number input --}}
<x-inputs.input
    label="Age"
    name="age"
    type="number"
    min="0"
    max="120"
/>

With Livewire#

{{-- Real-time binding --}}
<x-inputs.input
    label="Username"
    name="username"
    wire:model.live="username"
    placeholder="Choose a username"
/>

{{-- Deferred binding --}}
<x-inputs.input
    label="Bio"
    name="bio"
    wire:model="bio"
/>

With Hint Text#

<x-inputs.input
    label="Password"
    name="password"
    type="password"
    hint="Must be at least 8 characters"
/>

With Addons#

{{-- Text addon on left --}}
<x-inputs.input
    label="Website"
    name="website"
    addonLeft="https://"
    placeholder="example.com"
/>

{{-- Text addon on right --}}
<x-inputs.input
    label="Price"
    name="price"
    type="number"
    addonRight="USD"
/>

{{-- Icon addons --}}
<x-inputs.input
    label="Email"
    name="email"
    addonLeftIcon="lucide:mail"
    placeholder="you@example.com"
/>

{{-- Combined icon and text --}}
<x-inputs.input
    label="Amount"
    name="amount"
    type="number"
    addonLeftIcon="lucide:dollar-sign"
    addonRight=".00"
/>

Real Example from Codebase#

{{-- User profile form --}}
<div class="space-y-4">
    <x-inputs.input
        label="{{ __('Name') }}"
        name="name"
        wire:model="name"
        :value="$user->name"
        required
    />

    <x-inputs.input
        label="{{ __('Email') }}"
        name="email"
        type="email"
        wire:model="email"
        :value="$user->email"
        required
    />

    <x-inputs.input
        label="{{ __('Phone') }}"
        name="phone"
        wire:model="phone"
        addonLeftIcon="lucide:phone"
        :value="$user->phone"
    />
</div>

---

Select Component#

Dropdown selection component for choosing from predefined options.

Props#

Prop	Type	Default	Description
label	string	null	Select label text
placeholder	string	''	Default placeholder option
hint	string	null	Help text
name	string	null	Select name attribute
options	array	[]	Key-value array of options
value	mixed	null	Selected value
required	boolean	false	Mark as required
disabled	boolean	false	Disable the select

Basic Usage#

<x-inputs.select
    label="Country"
    name="country"
    :options="[
        'us' => 'United States',
        'uk' => 'United Kingdom',
        'ca' => 'Canada',
    ]"
    placeholder="Select a country"
/>

With Livewire#

<x-inputs.select
    label="Role"
    name="role_id"
    :options="$roles"
    wire:model="role_id"
    required
/>

Real Example from Codebase#

{{-- User role selection --}}
<x-inputs.select
    label="{{ __('Role') }}"
    name="role"
    :options="$roles->pluck('name', 'id')->toArray()"
    wire:model="selectedRole"
    required
/>

{{-- Status selection --}}
<x-inputs.select
    label="{{ __('Status') }}"
    name="status"
    :options="[
        'draft' => __('Draft'),
        'published' => __('Published'),
        'archived' => __('Archived'),
    ]"
    wire:model="status"
/>

---

Textarea Component#

Multi-line text input for longer content.

Props#

Prop	Type	Default	Description
label	string	null	Textarea label
placeholder	string	''	Placeholder text
hint	string	null	Help text
name	string	null	Name attribute
value	string	null	Initial value
required	boolean	false	Required field
disabled	boolean	false	Disabled state
rows	integer	3	Number of visible rows

Basic Usage#

<x-inputs.textarea
    label="Description"
    name="description"
    placeholder="Enter a description..."
    rows="5"
/>

With Livewire#

<x-inputs.textarea
    label="Content"
    name="content"
    wire:model="content"
    rows="10"
    required
/>

Real Example from Codebase#

{{-- Post content --}}
<x-inputs.textarea
    label="{{ __('Bio') }}"
    name="bio"
    wire:model="bio"
    :value="$user->bio"
    rows="4"
    hint="{{ __('Brief description about yourself') }}"
/>

---

Checkbox Component#

Single checkbox input for boolean values.

Props#

Prop	Type	Default	Description
label	string	null	Checkbox label
name	string	null	Name attribute
checked	boolean	false	Checked state
value	mixed	1	Value when checked
disabled	boolean	false	Disabled state
hint	string	null	Help text

Basic Usage#

<x-inputs.checkbox
    label="I agree to the terms and conditions"
    name="terms"
/>

With Livewire#

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

Pre-checked#

<x-inputs.checkbox
    label="Active"
    name="is_active"
    :checked="$user->is_active"
    wire:model="is_active"
/>

Real Example from Codebase#

{{-- User settings --}}
<x-inputs.checkbox
    label="{{ __('Receive email notifications') }}"
    name="email_notifications"
    :checked="$user->email_notifications"
    wire:model="email_notifications"
/>

<x-inputs.checkbox
    label="{{ __('Make profile public') }}"
    name="is_public"
    :checked="$user->is_public"
    wire:model="is_public"
    hint="{{ __('Other users will be able to see your profile') }}"
/>

---

Radio Component#

Radio button for selecting one option from a group.

Props#

Prop	Type	Default	Description
label	string	null	Radio label
name	string	null	Name attribute (same for group)
value	mixed	required	Radio value
checked	boolean	false	Checked state
disabled	boolean	false	Disabled state

Basic Usage#

<div class="space-y-2">
    <x-inputs.radio
        label="Small"
        name="size"
        value="small"
    />
    <x-inputs.radio
        label="Medium"
        name="size"
        value="medium"
        :checked="true"
    />
    <x-inputs.radio
        label="Large"
        name="size"
        value="large"
    />
</div>

With Livewire#

<div class="space-y-2">
    <x-inputs.radio
        label="Draft"
        name="status"
        value="draft"
        wire:model="status"
    />
    <x-inputs.radio
        label="Published"
        name="status"
        value="published"
        wire:model="status"
    />
</div>

---

Password Component#

Password input with visibility toggle.

Props#

Prop	Type	Default	Description
label	string	null	Password label
name	string	null	Name attribute
placeholder	string	''	Placeholder text
required	boolean	false	Required field
hint	string	null	Help text

Basic Usage#

<x-inputs.password
    label="Password"
    name="password"
    placeholder="Enter your password"
    required
/>

With Confirmation#

<x-inputs.password
    label="Password"
    name="password"
    wire:model="password"
    hint="Must be at least 8 characters"
    required
/>

<x-inputs.password
    label="Confirm Password"
    name="password_confirmation"
    wire:model="password_confirmation"
    required
/>

---

Date Picker Component#

Date selection with calendar interface.

Props#

Prop	Type	Default	Description
label	string	null	Label text
name	string	null	Name attribute
value	string	null	Initial date value
placeholder	string	''	Placeholder text
required	boolean	false	Required field
min	string	null	Minimum selectable date
max	string	null	Maximum selectable date

Basic Usage#

<x-inputs.date-picker
    label="Date of Birth"
    name="dob"
    placeholder="Select date"
/>

With Range#

<x-inputs.date-picker
    label="Event Date"
    name="event_date"
    min="{{ now()->format('Y-m-d') }}"
    max="{{ now()->addYear()->format('Y-m-d') }}"
    wire:model="event_date"
/>

---

DateTime Picker Component#

Combined date and time selection.

Props#

Extends date picker props with time selection support.

Basic Usage#

<x-inputs.datetime-picker
    label="Appointment"
    name="appointment_at"
    wire:model="appointment_at"
/>

---

File Input Component#

File upload input with drag-and-drop support.

Props#

Prop	Type	Default	Description
label	string	null	Label text
name	string	null	Name attribute
accept	string	null	Accepted file types
multiple	boolean	false	Allow multiple files
hint	string	null	Help text

Basic Usage#

<x-inputs.file-input
    label="Profile Photo"
    name="avatar"
    accept="image/*"
    hint="JPG, PNG up to 2MB"
/>

Multiple Files#

<x-inputs.file-input
    label="Documents"
    name="documents"
    :multiple="true"
    accept=".pdf,.doc,.docx"
/>

With Livewire#

<x-inputs.file-input
    label="Photo"
    name="photo"
    wire:model="photo"
    accept="image/*"
/>

@if($photo)
    <img src="{{ $photo->temporaryUrl() }}" class="mt-2 w-32 h-32 object-cover rounded" />
@endif

---

Combobox Component#

Searchable dropdown with autocomplete functionality.

Props#

Prop	Type	Default	Description
label	string	null	Label text
name	string	null	Name attribute
options	array	[]	Available options
value	mixed	null	Selected value
placeholder	string	''	Placeholder text
searchable	boolean	true	Enable search

Basic Usage#

<x-inputs.combobox
    label="Select User"
    name="user_id"
    :options="$users->pluck('name', 'id')->toArray()"
    wire:model="user_id"
    placeholder="Search users..."
/>

---

Tags Input Component#

Input for entering multiple tags or keywords.

Basic Usage#

<x-inputs.tags-input
    label="Tags"
    name="tags"
    wire:model="tags"
    placeholder="Add tags..."
/>

With Suggestions#

<x-inputs.tags-input
    label="Categories"
    name="categories"
    wire:model="categories"
    :suggestions="$availableCategories"
/>

---

Range Input Component#

Slider input for selecting numeric values.

Props#

Prop	Type	Default	Description
label	string	null	Label text
name	string	null	Name attribute
min	number	0	Minimum value
max	number	100	Maximum value
step	number	1	Step increment
value	number	null	Initial value

Basic Usage#

<x-inputs.range-input
    label="Volume"
    name="volume"
    min="0"
    max="100"
    :value="50"
    wire:model="volume"
/>

---

Search Component#

Specialized search input with icon and clear button.

Basic Usage#

<x-inputs.search
    name="search"
    placeholder="Search..."
    wire:model.live.debounce.300ms="search"
/>

---

Form Label Component#

Standalone label component for custom layouts.

Props#

Prop	Type	Default	Description
for	string	null	Associated input ID
required	boolean	false	Show required indicator

Basic Usage#

<x-inputs.form-label for="email" :required="true">
    Email Address
</x-inputs.form-label>

---

Selection Card Components#

Visual selection cards for choosing options.

Selection Card#

<x-inputs.selection-card
    name="plan"
    value="pro"
    title="Pro Plan"
    description="Best for professionals"
    :selected="$plan === 'pro'"
/>

Selection Card Group#

<x-inputs.selection-card-group name="plan">
    <x-inputs.selection-card
        value="basic"
        title="Basic"
        description="$9/month"
    />
    <x-inputs.selection-card
        value="pro"
        title="Pro"
        description="$29/month"
    />
    <x-inputs.selection-card
        value="enterprise"
        title="Enterprise"
        description="Custom pricing"
    />
</x-inputs.selection-card-group>

---

Complete Form Example#

<form wire:submit="save">
    <x-card.card>
        <x-slot name="header">{{ __('Create User') }}</x-slot>

        <div class="space-y-4">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <x-inputs.input
                    label="{{ __('First Name') }}"
                    name="first_name"
                    wire:model="first_name"
                    required
                />

                <x-inputs.input
                    label="{{ __('Last Name') }}"
                    name="last_name"
                    wire:model="last_name"
                    required
                />
            </div>

            <x-inputs.input
                label="{{ __('Email') }}"
                name="email"
                type="email"
                wire:model="email"
                required
            />

            <x-inputs.password
                label="{{ __('Password') }}"
                name="password"
                wire:model="password"
                hint="{{ __('Minimum 8 characters') }}"
                required
            />

            <x-inputs.select
                label="{{ __('Role') }}"
                name="role"
                :options="$roles"
                wire:model="role"
                required
            />

            <x-inputs.textarea
                label="{{ __('Bio') }}"
                name="bio"
                wire:model="bio"
                rows="3"
            />

            <x-inputs.checkbox
                label="{{ __('Send welcome email') }}"
                name="send_welcome"
                wire:model="send_welcome"
            />
        </div>

        <x-slot name="footer">
            <x-buttons.submit-buttons
                saveLabel="{{ __('Create User') }}"
                cancelUrl="{{ route('admin.users.index') }}"
            />
        </x-slot>
    </x-card.card>
</form>

---

Best Practices#

1. Always use labels - Improves accessibility and usability
2. Add hints for complex fields - Help users understand expected input
3. Use appropriate types - Email, number, tel for better mobile UX
4. Validate on server - Never rely solely on client-side validation
5. Show validation errors - Use @error directive near inputs
6. Group related fields - Use grid layouts for related inputs
7. Use placeholder wisely - Placeholders are hints, not labels

---

Next Steps#

• Cards - Container components for forms
• Buttons - Form submission buttons
• Modals - Form dialogs