TallStackUI 4.0 is here! Seven new components and thousand of improvements. See what's new .

Powerful suite of Blade components for TALL Stack apps

Form Input

Form input component.

# Basic Usage 

<x-input /> <!-- type as text -->
 
<x-input email /> <!-- type as email -->
The input type will be set to text when not specified.

# Label & Hint

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

You can also set raw HTML in the label attribute: 

<x-input>
    <x-slot:label>
        <span>Name</span>
    </x-slot:label>
</x-input>

# Required Label Indicator

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

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

# Icon Slot 

<x-input label="Name" icon="users" />
<x-input label="Name" icon="cog" position="right" />

# Prefix & Suffix

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.

# Readonly & Disabled 

<x-input label="Readonly" value="Readonly text" readonly />
<x-input label="Disabled" value="Disabled text" disabled />

# Button Support

You can place buttons inside the prefix and suffix slots by adding the button attribute. This activates addon mode, where the button sits flush against the input with a unified ring and focus style: 

<x-input label="Search">
    <x-slot:suffix button>
        <x-button text="Go" sm />
    </x-slot:suffix>
</x-input>

The same works for the prefix side:

<x-input label="URL">
    <x-slot:prefix button>
        <x-button text="https" sm />
    </x-slot:prefix>
</x-input>

You can also place buttons on both sides:

<x-input label="Amount">
    <x-slot:prefix button>
        <x-button icon="minus" sm />
    </x-slot:prefix>
    <x-slot:suffix button>
        <x-button icon="plus" sm />
    </x-slot:suffix>
</x-input>
You can also use button.circle but the style will be the same as a normal button.

# Clearable 

<x-input value="TallStackUI" clearable />

# Strip Zeros

An option to remove the first zero characters 

<x-input strip-zeros />

# Invalidate

An option to not show validation error message. 

<x-input label="Name" invalidate />
This option is available for all components that can display form validation errors, basically all form components. Additionally, you can enable the "invalidate" state globally by setting it via the configuration file. This way, all components that can display validation errors will no longer display them.

Code highlighting provided by Torchlight