Form Input

Form input component.

Input, Personalization Blocks

This content is part of TallStackUI personalization.

Example:

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

The soft personalization should be done in boot method of service providers.

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

# Invalidate

An option to not show validation error message.

Name

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