mary

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
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>
mary
Sponsor