Input

<x-input />
<x-input placeholder="Your name" />
<x-input label="Name" placeholder="Your name" />
<x-input label="Name" placeholder="Your name" hint="Enter your full name" />

<x-input label="Name *" placeholder="Your name" />
{{-- OR --}}
<x-input label="Name" placeholder="Your name" required />

<x-input label="Name" icon="user" placeholder="Your name" />
<x-input label="Name" icon-right="user" placeholder="Your name" />

<x-input label="Website" prefix="https://" placeholder="example.com" />
<x-input label="Email" suffix="@gmail.com" placeholder="example@gmail.com" />

@php
    $users = App\Models\User::pluck('name', 'id');
    $countries = collect([
        ['id' => 1, 'name' => 'BD'],
        ['id' => 2, 'name' => 'In'],
        ['id' => 3, 'name' => 'USA'],
        ['id' => 4, 'name' => 'UK'],
        ['id' => 5, 'name' => 'Russia'],
    ])->pluck('name', 'id');
@endphp
 
<x-input label="User">
    @slot('prepend')
        <x-select :options="$users" placeholder="User" />
    @endslot
</x-input>
 
<x-input label="Countries">
    @slot('append')
        <x-select :options="$countries" placeholder="Country" />
    @endslot
</x-input>

<x-input placeholder="Your name" inline />
<x-input label="Name" placeholder="Your name" inline />

<x-input placeholder="default" />
<x-input placeholder="rounded-none" rounded-none />
<x-input placeholder="rounded-sm" rounded-sm />
<x-input placeholder="rounded-md" rounded-md />
<x-input placeholder="rounded-lg" rounded-lg />
<x-input placeholder="rounded-xl" rounded-xl />
<x-input placeholder="rounded-2xl" rounded-2xl />
<x-input placeholder="rounded-3xl" rounded-3xl />
<x-input placeholder="rounded-full" rounded-full />

<x-input label="Name" icon="user" placeholder="Name" class="py-2 text-xs border-primary/60 focus:border-primary" class:icon="size-3.5" />