WireUI
WireUI
Inputs

The Input component is very useful to build forms.

You can set the attribute wire:model.live to automatically have the attributes id set to the MD5 of the model and name to the exact model. You must NOT pass the attributes id and name for this to work. 

<x-input wire:model="firstName" label="Name" placeholder="User's first name" />
Tip: You can use the Errors component to display validation error messages for your input.
Simple Input 
1<x-input label="Name" placeholder="your name" />
Input Hint 
1<x-input label="Name" placeholder="your name" hint="Inform your full name" />
Input Corner Hint 
1<x-input label="Name" placeholder="your name" corner-hint="Ex: John" />
Input Icon 
1<x-input icon="user" label="Name" placeholder="your name" />
Input Right Icon 
1<x-input right-icon="user" label="Name" placeholder="your name" />
Two Icons Input 
1<x-input icon="user" right-icon="pencil" label="Name" placeholder="your name" />
Input Prefix
https://www. 
1<x-input class="!pl-[6.5rem]" label="Website" placeholder="your-website.com" prefix="https://www." />
Tip: You can use pl-x class to control the left padding on your input.
Input Suffix
@mail.com 
1<x-input class="pr-28" label="Email" placeholder="your email" suffix="@mail.com" />
Input Prepend 
 1<x-input label="Name" placeholder="your name" class="pl-12">
 2    <x-slot name="prepend">
 3        <div class="absolute inset-y-0 left-0 flex items-center p-0.5">
 4            <x-button
 5                class="h-full rounded-l-md"
 6                icon="sort-ascending"
 7                primary
 8                flat
 9                squared
10            />
11        </div>
12    </x-slot>
13</x-input>
Input Append 
 1<x-input label="Name" placeholder="your name">
 2    <x-slot name="append">
 3        <div class="absolute inset-y-0 right-0 flex items-center p-0.5">
 4            <x-button
 5                class="h-full rounded-r-md"
 6                icon="sort-ascending"
 7                primary
 8                flat
 9                squared
10            />
11        </div>
12    </x-slot>
13</x-input>
Input Options

Options

Prop Required Default Type
label false none string
hint false none string
cornerHint false none string
icon false none string
rightIcon false none string
prefix false none string
suffix false none string
prepend false none slot
append false none slot