Text Inputs
Text inputs are used to collect user input. They can be used in forms or as search fields.
1<x-input type="email" label="Email Address" />Label Addons
Add anything you want to the label of the input.
1<x-input label="Password" type="password">2 <x-slot:labelAddon> 3 <x-button size="xs" type="link" tabindex="-1">Forgot password?</x-button> 4 </x-slot:labelAddon> 5</x-input>Hint Text
Add hint text to the input to help users understand what to input.
1<x-input label="Username" hint="This will be publicly displayed." />Descriptions
Add a description to the input to provide more context to the user.
1<x-input label="Password" description="Make sure it's at least 8 characters long." type="password" />Descriptions with Custom HTML
Use custom HTML in the description to add icons or other elements.
1<x-input label="Password" type="password">2 <x-slot:description> 3 <x-icon name="exclamation-triangle--mini" class="text-yellow-400" /> 4 <span class="text-yellow-500">Make sure it's at least 8 characters long.</span> 5 </x-slot:description> 6</x-input>Sizes
Inputs can be small, medium, or large.
1<x-input size="sm" placeholder="Small Input" />2<x-input size="md" placeholder="Medium Input" />3<x-input size="lg" placeholder="Large Input" />4<x-input size="xl" placeholder="Extra Large Input" />Disabled Inputs
Disable inputs to prevent users from interacting with them.
1<x-input label="Email address" disabled />Read-Only Inputs
Make inputs read-only to prevent users from editing them.
1<x-input label="API-Key" readonly value="ABCDEFGHIJKLMNOP" />Rounded Inputs
Make inputs rounded by using the rounded attribute.
1<x-input type="email" rounded label="Email Address" />Error States
Inputs automatically display an error state when the wire:model property is set.
1<x-input wire:model="email_example" label="Email address" />Loading States
Make inputs appear as loading to indicate that something is happening.
1<x-input wire:loading placeholder="Search users" />Input with Icons
Add icons to inputs to provide additional context.
1<x-input placeholder="Search users"> 2 <x-slot:prepend> 3 <x-icon name="magnifying-glass--micro"/> 4 </x-slot:prepend> 5</x-input> 6 7<x-input placeholder="Search users"> 8 <x-slot:append> 9 <x-icon name="magnifying-glass--micro"/> 10 </x-slot:append> 11</x-input>12 13<x-input placeholder="Search users" disabled>14 <x-slot:prepend> 15 <x-icon name="magnifying-glass--micro"/> 16 </x-slot:prepend> 17</x-input>Input with Buttons
Add buttons to inputs to provide additional actions.
1<x-input placeholder="Search users"> 2 <x-slot:prepend> 3 <x-button>Invite</x-button> 4 </x-slot:prepend> 5</x-input> 6 7<x-input placeholder="Password" type="password"> 8 <x-slot:append> 9 <x-button type="transparent" icon="eye--micro" /> 10 </x-slot:append> 11</x-input>12 13<x-input placeholder="Search users">14 <x-slot:append> 15 <x-button icon="x-mark--micro" /> 16 </x-slot:append> 17</x-input>Input with Texts
Add text to inputs to provide additional context.
1<x-input> 2 <x-slot:prepend> 3 <span>https://</span> 4 </x-slot:prepend> 5</x-input> 6 7<x-input> 8 <x-slot:prepend> 9 <span class="filled">https://</span> 10 </x-slot:prepend> 11</x-input>12 13<x-input>14 <x-slot:append> 15 <span>.com</span> 16 </x-slot:append> 17</x-input>18 19<x-input>20 <x-slot:append> 21 <span class="filled">.com</span> 22 </x-slot:append> 23</x-input>Transparent Inputs
Make inputs transparent to blend in with the background by using the transparent attribute.
1<x-input transparent placeholder="Search">2 <x-slot:prepend>3 <x-icon name="magnifying-glass--mini" class="fs-md text-gray-400" />4 </x-slot:prepend>5</x-input>Utilities for Inputs
Use utility functions for easier input handling.
1<x-input label="Copy" value="You can copy me." description="Use the <samp>copy</samp> function to copy the text."> 2 <x-slot:append> 3 <x-button icon="document-duplicate--micro" x-tooltip="'Copy'" x-on:click="copy" /> 4 </x-slot:append> 5</x-input> 6<x-input label="Password toggle" value="password" type="password" description="<div>Switch between showing and hiding the password with the <samp>togglePassword</samp> function.</div>"> 7 <x-slot:append> 8 <x-button type="transparent" icon="eye--micro" x-on:click="togglePassword" /> 9 </x-slot:append> 10</x-input>