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