Input
Type a single line of text, such as login, email, URL, ... in a <x-input>.
The field is built using an input element surrounded by decorations/explanatory text.
<x-input title="Title" label="Label" placeholder="Placeholder" helper="Help text"/>
#Styling
Use the color attribute as usual to change the color of the input.
Default <x-input/> <x-input type="file"/>
Neutral <x-input color="neutral"/> <x-input type="file" color="neutral"/>
Primary <x-input color="primary"/> <x-input type="file" color="primary"/>
Secondary <x-input color="secondary"/> <x-input type="file" color="secondary"/>
Accent <x-input color="accent"/> <x-input type="file" color="accent"/>
Info <x-input color="info"/> <x-input type="file" color="info"/>
Success <x-input color="success"/> <x-input type="file" color="success"/>
Warning <x-input color="warning"/> <x-input type="file" color="warning"/>
Error <x-input color="error"/> <x-input type="file" color="error"/>
#Sizes
Use the size attribute to change the input size.
<x-input size="xl" label="Extra-large"/>
<x-input size="lg" label="Large"/>
<x-input label="Medium"/>
<x-input size="sm" label="Small"/>
<x-input size="xs" label="Tiny"/>
#Labels & icons
Use label and append to get text inside the input rectangle, respectively before and after the actual <input> element. Place icons around the input with icon and trail-icon.
All 4 can be set on a single input and declaring them as slots lets you finetune the behavior.
The last 2 examples are built so that the icons are colored when hovering the mouse and, with the difference that the latter keeps its color as long as the actual input has focus, leveraging the peer class set on it.
<x-input label="Prepended label"/>
<x-input append="Appended label"/>
<x-input icon="heroicon-o-chat-bubble-bottom-center-text"/>
<x-input trail-icon="heroicon-o-calendar-days"/>
#Badges
It is common to add badges inside the component visual rectangle.
<x-input label=Label>
<x-badge size="xs" color="accent" label="Required"/>
</x-input>
#With minimum / maximum length
Add the minlength and/or maxlength attributes to define the minimal and maximal lengths of text the input can accept. With the additional length-indicator, an indicator is added to the input to show the remaining characters that can be added.
<x-input helper="Input with 10 chars max" maxlength="10"/>
<x-input helper="Input with 25 chars max" maxlength="25" length-indicator/>
#Specialized types
#Password
You can use a <x-input> with type="password" to make a password field but the <password> component brings more functionality with it.
<x-input type="password"/>
<x-password eye/>
<x-input type="email" autocomplete="email"/>
#File
<x-input title="Profile picture" type="file"/>
<x-input title="Document" helper="PDF only" color="accent" type="file" accept=".pdf"/>
#Color
type="color" changes the input so it shows a palette when interacted with.
<x-input type="color" label="Color picker"/>
<x-input type="color" append="Prefilled color" value="#358DE3"/>
#Examples
#Right to left
This example shows how sub-elements are placed when a component is in a direction="rtl" layout.
<div dir="rtl">
<x-input
title="Title"
icon="heroicon-o-arrow-left"
trail-icon="heroicon-o-arrow-right"
label="Label"
append="Append"
placeholder="Placeholder"
helper="Helper text"
>
<x-badge size="xs" color="error" label="Required"/>
</x-input>
</div>
#Icon color
Using the group-related classes of Tailwind, you can make an icon change color when hovering and/or editing the input.
<x-input class="group">
<x-slot:icon class="h-lh group-hover:text-success group-focus-within:text-success transition-color duration-250">
<x-icon name="heroicon-o-chat-bubble-bottom-center-text"/>
</x-slot:icon>
</x-input>
#Floating labels
With some work, you can make your UI more compact thanks to floating labels.
<x-input placeholder="[email protected]" class="[&_input:not(:focus):placeholder-shown]:opacity-0 [&_input]:transition-opacity [&_input]:duration-250">
<x-slot:label class="absolute bg-inherit px-1 transition-transform origin-left duration-250
peer-focus:scale-75 peer-focus:-translate-y-[1.25rem]
peer-not-placeholder-shown:scale-75 peer-not-placeholder-shown:-translate-y-[1.25rem]">
Login
</x-slot:label>
<x-badge size="xs" color="error" label="Required"/>
</x-input>
<x-password placeholder="●●●●●●●●" eye>
<x-slot:icon class="h-lh group-hover:text-primary">
<x-icon name="heroicon-o-lock-closed"/>
</x-slot:icon>
<x-slot:label class="absolute translate-x-[calc(1lh+.5rem)] bg-inherit px-1 transition-transform origin-left duration-250
peer-focus:scale-75 peer-focus:-translate-x-0 peer-focus:-translate-y-[1.25rem]
peer-not-placeholder-shown:scale-75 peer-not-placeholder-shown:-translate-x-0 peer-not-placeholder-shown:-translate-y-[1.25rem]">
Password
</x-slot:label>
<x-slot:trail-icon>
<x-badge size="xs" color="error" label="Required"/>
</x-slot:trail-icon>
</x-input>