Form Input

Form input component.

Form Input, Personalization Blocks

Example:

// AppServiceProvider, "boot" method.
 
TallStackUi::customize()
    ->form('input')
    ->block('block', 'classes');

WARNING!

You are browsing the docs for an old version of TallStackUI. Consider upgrade your project to TallStackUI v3.

# Basic Usage

<x-input />

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

# Label & Hint

FooBar

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

# Required Label Indicator

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

Name *

Insert your name

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

# Icon Slot

Name

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

# Prefix & Suffix

Domain

https://

E-mail

@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.

# Invalidate

An option to not show validation error message.

Name

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