Livewire Components

Input

Displays a form input field or a component that looks like an input field. 

<x-input
    type="email"
    placeholder="Email"
/>

Installation

php artisan vendor:publish --tag=input --force

Usage

<x-input />

Examples

Default

<x-input
    type="email"
    placeholder="Email"
/>

File

<div class="grid w-full max-w-sm items-center gap-1.5">
    <x-label htmlFor="picture">Picture</x-label>
    <x-input
        id="picture"
        type="file"
    />
</div>

Disabled

<x-input
    disabled
    type="email"
    placeholder="Email"
/>

With Label

<div class="grid w-full max-w-sm items-center gap-1.5">
    <x-label htmlFor="email">Email</x-label>
    <x-input
        type="email"
        id="email"
        placeholder="Email"
    />
</div>

With Button

<div class="flex w-full max-w-sm items-center space-x-2">
    <x-input
        type="email"
        placeholder="Email"
    />
    <x-button type="submit">Subscribe</x-button>
</div>

Form

This is your public display name. 

<x-form class="w-2/3 [&_input]:max-w-full">
    <x-form.item>
        <x-form.label>Username</x-form.label>
        <x-input
            x-form:control
            placeholder="shadcn"
        />
        <x-form.description>
            This is your public display name.
        </x-form.description>
        <x-form.message />
    </x-form.item>
    <x-button type="submit">Submit</x-button>
</x-form>