Input

Input components allow users to enter and edit text content.

Installation

Add the input component to your project:

npx velyx@latest add input

pnpm dlx velyx@latest add input

yarn dlx velyx@latest add input

bunx --bun velyx@latest add input

Usage

Basic Input

<x-input />

With Label

<x-label for="email">Email Address</x-label>
<x-input id="email" type="email" placeholder="user@example.com" />

With Value

<x-input value="{{ old('title') }}" />

Laravel Form Integration

<form method="POST" action="{{ route('profile.update') }}">
    @csrf
    @method('put')

    <x-label for="name">Name</x-label>
    <x-input
        id="name"
        name="name"
        value="{{ old('name', $user->name) }}"
        required
    />

    @error('name')
        <p class="text-sm text-destructive mt-1">{{ $message }}</p>
    @enderror
</form>

Props

Input Types

<x-input type="text" />
<x-input type="email" />
<x-input type="password" />
<x-input type="number" />
<x-input type="tel" />
<x-input type="url" />
<x-input type="search" />

Examples

Login Form

<x-card>
    <x-slot:header>
        <h2 class="text-2xl font-bold">Welcome Back</h2>
        <p class="text-muted-foreground">Sign in to your account</p>
    </x-slot:header>

    <form method="POST" action="{{ route('login') }}" class="space-y-4">
        @csrf

        <div>
            <x-label for="email">Email</x-label>
            <x-input
                id="email"
                type="email"
                name="email"
                value="{{ old('email') }}"
                required
                autofocus
            />
            @error('email')
                <p class="text-sm text-destructive mt-1">{{ $message }}</p>
            @enderror
        </div>

        <div>
            <x-label for="password">Password</x-label>
            <x-input
                id="password"
                type="password"
                name="password"
                required
            />
            @error('password')
                <p class="text-sm text-destructive mt-1">{{ $message }}</p>
            @enderror
        </div>

        <div class="flex items-center justify-between">
            <label class="flex items-center gap-2">
                <input type="checkbox" name="remember" class="rounded">
                <span class="text-sm">Remember me</span>
            </label>

            <a href="{{ route('password.request') }}" class="text-sm text-primary hover:underline">
                Forgot password?
            </a>
        </div>

        <x-button type="submit" class="w-full">
            Sign In
        </x-button>
    </form>
</x-card>

Search Input

<div class="relative">
    <x-icon name="search" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
    <x-input
        type="search"
        placeholder="Search..."
        class="pl-10"
    />
</div>

Input with Icon

<div class="relative">
    <x-icon name="mail" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
    <x-input
        type="email"
        placeholder="your@email.com"
        class="pl-10"
    />
</div>

Disabled Input

<x-label for="disabled">Disabled Input</x-label>
<x-input id="disabled" disabled value="Cannot edit" />

Readonly Input

<x-label for="readonly">Readonly Input</x-label>
<x-input id="readonly" readonly value="john@example.com" />

Validation

Display validation errors with inputs:

<div>
    <x-label for="username">Username</x-label>
    <x-input
        id="username"
        name="username"
        value="{{ old('username') }}"
        class="{{ $errors->has('username') ? 'border-destructive' : '' }}"
    />
    @error('username')
        <p class="text-sm text-destructive mt-1">{{ $message }}</p>
    @enderror
</div>

Helper Text

Add helper text below inputs:

<div>
    <x-label for="password">Password</x-label>
    <x-input id="password" type="password" />
    <p class="text-xs text-muted-foreground mt-1">
        Must be at least 8 characters long.
    </p>
</div>

Customization

Custom Styling

<x-input class="bg-muted border-0" />

Custom Sizes

<x-input class="px-2 py-1 text-sm" />
<x-input class="px-4 py-3 text-lg" />

Related Components

• Label - <x-label> for input labels
• Textarea - <x-textarea> for multi-line input
• Select - <x-select> for dropdown selection
• Checkbox - <x-checkbox> for boolean input
• Toggle - <x-toggle> for switch input

Next Steps

• Explore Button component
• Learn about Card component
• View Dialog component