Form Components

Input

Cyber Week Mega Offer!

Huge discounts on all Hostinger plans

Use our referral link for an extra 20% off!

# Basic usage

Enter your full name

<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" />

# Required field

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

# Icon

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

# Prefix Suffix

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

# Prepend Append

@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>

# Inline

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

# Rounded corner

<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 />

# Customize input

Apply standard css classes to style input fields and use the class:icon attribute for icon customization.
<x-input label="Name" icon="user" placeholder="Name" class="py-2 text-xs border-primary/60 focus:border-primary" class:icon="size-3.5" />
Code highlighting powered by Torchlight