Form Input

Form input component.

Form Input, Personalization Blocks

Example:

TallStackUi::personalize()
    ->form('input')
    ->block('block', 'classes');

# Basic Usage

<x-input />

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

# Label & Hint

Name

Insert your name

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

# Clearable

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

# Invalidate

An option to not show validation error message.

Name

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