Input
Basic
Your full name
<x-input label="Name" placeholder="Your name" icon="o-user" hint="Your full name" /> <x-input label="Right icon" wire:model="address" icon-right="o-map-pin" /> <x-input label="Password" wire:model="password" icon="o-eye" type="password" />
States
<x-input label="Disabled" value="It is disabled" disabled /> <x-input label="Read only" value="Read only" readonly />
Inline
Awsome
<x-input label="Inline label" inline /> <x-input label="Inline label + placeholder" placeholder="Hi!" icon="o-envelope" hint="Awsome" inline />
Currency
<head> ... {{-- Currency --}} <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/robsontenorio/mary@0.44.2/libs/currency/currency.js"></script></head>
USD
$wire.money1 = Currency.getUnmasked())"
inputmode="numeric"
class="input input-primary w-full peer h-14 pt-3 rounded-l-none" type="text"
/>
$wire.money2 = Currency.getUnmasked())"
inputmode="numeric"
class="input input-primary w-full peer h-14 pt-3 rounded-r-none" type="text"
/>
R$
<x-input label="Default money" wire:model="money1" prefix="USD" money inline /> {{-- Notice that `locale` accepts any valid locale --}}<x-input label="Custom money" wire:model="money2" suffix="R$" money inline locale="pt-BR" />
Slots
@php $users = App\Models\User::take(5)->get();@endphp <x-input label="Prepend a select"> <x-slot:prepend> {{-- Add `rounded-r-none` class --}} <x-select icon="o-user" :options="$users" class="rounded-r-none bg-base-200" /> </x-slot:prepend></x-input> <x-input label="Append a button"> <x-slot:append> {{-- Add `rounded-l-none` class --}} <x-button label="I am a button" icon="o-check" class="btn-primary rounded-l-none" /> </x-slot:append></x-input>