Input Component

The Input component provides a consistent and accessible text input field with support for multiple variants including text, password with visibility toggle, search with icon, and date picker. It includes built-in error state styling and dark mode support.

Basic Usage

The simplest way to use the input component with a label:

<div class="max-w-xs space-y-1">
    <x-input-label for="username" value="Username" />
    <x-input type="text" id="username" name="username" placeholder="Enter your username" />
</div>

Password Variant

A password input with an optional show/hide toggle button:

<div class="max-w-xs space-y-1">
    <x-input-label for="password" value="Password" />
    <x-input 
        id="password"
        variant="password" 
        name="password" 
        :viewable="true"
        placeholder="Enter password" />
</div>

Search Variant

A search input with a magnifying glass icon:

<div class="max-w-xs space-y-1">
    <x-input-label for="search" value="Search" />
    <x-input 
        id="search"
        variant="search" 
        name="search" 
        placeholder="Search articles..." />
</div>

Date Variant

A date picker input:

<div class="max-w-xs space-y-1">
    <x-input-label for="birth_date" value="Birth Date" />
    <x-input 
        id="birth_date"
        variant="date" 
        name="birth_date" />
</div>

Disabled State

Disable user interaction with the disabled prop:

<div class="max-w-xs space-y-1">
    <x-input-label for="email_disabled" value="Email (Disabled)" />
    <x-input 
        id="email_disabled"
        type="text" 
        name="email" 
        value="user@example.com"
        :disabled="true" />
</div>

Error State

Display the input in an error state using the error prop, along with label and error message:

<div class="max-w-xs space-y-1">
    <x-input-label for="user_email" value="Email Address" :error="true" />
    <x-input 
        id="user_email"
        type="email" 
        name="user_email" 
        placeholder="Enter email"
        :error="true" />
    <x-input-error :messages="['The email field is required.']" />
</div>

Complete Form Example

Combine with input-label, helper text, and input-error components for a complete form field:

<div class="space-y-1 max-w-xs">
    <x-input-label for="email_complete" value="Email Address" />
    <x-input 
        id="email_complete"
        type="email" 
        name="email" 
        placeholder="you@example.com"
        required />
    <small class="text-xs text-on-surface-muted dark:text-on-surface-dark-muted">
        We'll never share your email with anyone else.
    </small>
    <x-input-error :messages="$errors->get('email')" />
</div>

Livewire Integration

Use wire:model for two-way data binding in Livewire components:

<div class="max-w-xs">
    <x-input-label for="title" value="Post Title" />
    <x-input 
        id="title"
        type="text" 
        name="title" 
        wire:model.live="title"
        placeholder="Enter post title" />
</div>

In your Livewire component:

class CreatePost extends Component
{
    public string $title = '';

    public function save()
    {
        $this->validate([
            'title' => 'required|min:3|max:255',
        ]);
        
        Post::create([
            'title' => $this->title,
        ]);
    }
}

Props Reference

Prop	Type	Default	Description
variant	string	text	Input variant. Options: text, password, search, date
disabled	bool	false	Whether the input is disabled. Prevents user interaction and reduces opacity.
viewable	bool	true	Only applies to password variant. When true, shows a toggle button to reveal/hide the password.
error	bool	false	When true, applies error styling with a red border to indicate validation failure.
type	string	-	Standard HTML input type attribute. Common values: text, email, number, tel, url, etc.
name	string	-	Input field name for form submission and validation.
placeholder	string	-	Placeholder text displayed when the input is empty.
value	string	-	Initial value of the input field.
required	bool	false	Whether the input is required for form submission.
wire:model	string	-	Livewire property binding. Use wire:model.live for real-time updates or wire:model.blur for updates on blur.

References

Category	Path / Name	Description
Component	resources/views/components/input.blade.php	Input component file
Component	resources/views/components/input-label.blade.php	Input label component
Component	resources/views/components/input-error.blade.php	Input error message component

For the detailed documentation, please visit the Penguin UI Inputs.