V2? Coming soon! New components and lots of improvements.

Powerful suite of Blade components for TALL Stack apps.

Form Input

Form input component.

<x-input />

The input type will be set to text when not specified.

Insert your name
<x-input label="Name" hint="Insert your name" />

An option to display an asterisk indicating that the field is required.

Insert your name
<x-input label="Name *" hint="Insert your name" />
<x-input label="Name" icon="users" />
<x-input label="Name" icon="cog" position="right" />
https://
@gmail.com
<x-input prefix="https://" label="Domain" />
<x-input suffix="@gmail.com" label="E-mail" />
 
<!-- or -->
 
<x-input>
<x-slot:prefix>
Prefix
</x-slot:prefix>
<x-slot:suffix>
Suffix
</x-slot:suffix>
</x-input>

Using a prefix or suffix will disable browser autocomplete as long as this is not explicitly defined.

An option to not show validation error message.

<x-input label="Name" invalidate />

Code highlighting provided by Torchlight