Input - Laravel Blade

Use the input component for text-based form fields including text, email, password, number, URL, and phone inputs with support for labels, helper text, validation states, and icon addons.

Default Input

Blade code

<div class="space-y-4 max-w-md">
    <x-fwb.input label="First name" placeholder="John" />
    <x-fwb.input label="Email address" type="email" placeholder="name@flowbite.com" />
    <x-fwb.input label="Password" type="password" placeholder="********" />
    <x-fwb.input label="Website URL" type="url" placeholder="https://flowbite.com" />
    <x-fwb.input label="Phone number" type="tel" placeholder="+1 (555) 000-0000" />
</div>

Input Sizes

Blade code

<div class="space-y-4 max-w-md">
    <x-fwb.input label="Small input" size="sm" placeholder="Small input" />
    <x-fwb.input label="Default input" size="md" placeholder="Default input" />
    <x-fwb.input label="Large input" size="lg" placeholder="Large input" />
</div>

Disabled and Readonly

Blade code

<div class="space-y-4 max-w-md">
    <x-fwb.input label="Disabled input" :disabled="true" placeholder="Disabled input" />
    <x-fwb.input label="Readonly input" :readonly="true" value="This is readonly" />
</div>

Validation States

Well done! Some success message.

Oops! Something went wrong.

Blade code

<div class="space-y-4 max-w-md">
    <x-fwb.input label="Success input" color="green" placeholder="Success input" helper="Well done! Some success message." />
    <x-fwb.input label="Error input" color="red" placeholder="Error input" helper="Oops! Something went wrong." />
</div>

Input with Icon

Blade code

<div class="space-y-4 max-w-md">
    <x-fwb.input label="Your email" type="email" placeholder="name@flowbite.com">
        <x-slot:prefix>
            <x-fwb-o-envelope class="w-4 h-4 text-gray-500 dark:text-gray-400" />
        </x-slot:prefix>
    </x-fwb.input>
    <x-fwb.input label="Username" placeholder="Username">
        <x-slot:prefix>
            <x-fwb-s-user-circle class="w-4 h-4 text-gray-500 dark:text-gray-400" />
        </x-slot:prefix>
    </x-fwb.input>
</div>

Helper Text

We will never share your details. Read our Privacy Policy.

Blade code

<div class="max-w-md">
    <x-fwb.input label="Your email" type="email" placeholder="name@flowbite.com" helper="We will never share your details. Read our Privacy Policy." />
</div>

Required Input

Blade code

<div class="max-w-md">
    <x-fwb.input label="Email address" type="email" placeholder="name@flowbite.com" :required="true" />
</div>

Search Input

Blade code

<div class="max-w-md">
    <x-fwb.input label="Search" type="search" placeholder="Search...">
        <x-slot:prefix>
            <x-fwb-o-search class="w-4 h-4 text-gray-500 dark:text-gray-400" />
        </x-slot:prefix>
        <x-slot:suffix>
            <button type="submit" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Search</button>
        </x-slot:suffix>
    </x-fwb.input>
</div>

Component Properties

Input x-fwb.input

Prop Type Default Description
id string auto Unique identifier for the input. Auto-generated if not provided.
type string text The input type attribute (text, email, password, number, url, tel, search).
label string|null null Label text displayed above the input field.
placeholder string|null null Placeholder text shown when the input is empty.
helper string|null null Helper text displayed below the input field.
size string md Input size: sm, md, or lg.
color string default Validation color state: default, green (success), or red (error).
disabled bool false Disable the input field.
readonly bool false Make the input field read-only.
required bool false Mark the input field as required.
prefix slot - Named slot for an icon or content at the start of the input.
suffix slot - Named slot for an icon or content at the end of the input.