Docs running with Livewire 4 - Beta try it →
maryUI

Input

Basic

Name
Your full name
Right icon
Clearable
Prefix & Suffix 
<x-input label="Name" wire:model="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="Clearable" wire:model="name" placeholder="Clearable field" clearable />



<x-input label="Prefix & Suffix" wire:model="name" prefix="www" suffix=".com" />



<span></span>
<x-input label="Inline label" wire:model="name" placeholder="Hey, inline..." inline />

States

Disabled
Read only 
<x-input label="Disabled" value="It is disabled" disabled />



<x-input label="Read only" value="Read only" readonly />

Popover

Name
Hey
Name
Hello 
<x-input label="Name" wire:model="name" popover="Hey" />



<x-input label="Name" wire:model="name" popover="Hello" popover-icon="o-information-circle" />

Password

All above attributes will work with the password component.

Toggle
It toggles visibility
Right toggle
Custom icons
Without toggle 
<x-password label="Toggle" hint="It toggles visibility" wire:model="password" clearable />

<x-password label="Right toggle" wire:model="password" right />

<x-password label="Custom icons" wire:model="password" password-icon="o-lock-closed" password-visible-icon="o-lock-open" />

<div></div> 
<x-password label="Without toggle" wire:model="password" only-password inline />

Currency 

<head>

    ...



    {{--  Currency  --}}

    

</head>
Default money
Custom money 
<x-input label="Default money" wire:model="money1" prefix="USD" money />



{{-- Notice that `locale` accepts any valid locale --}}

<x-input label="Custom money" wire:model="money2" prefix="R$" locale="pt-BR" money />

Slots

Prepend a select
Append a button 
@php

    $users = App\Models\User::take(5)->get();

@endphp

<x-input label="Prepend a select">

    <x-slot:prepend>

        {{-- Add `join-item` to all prepended elements --}}

        <x-select icon="o-user" :options="$users" class="join-item bg-base-200" />

    </x-slot:prepend>

</x-input>



<x-input label="Append a button">

    <x-slot:append>

        {{-- Add `join-item` to all appended elements --}}

        <x-button label="I am a button" class="join-item btn-primary" />

    </x-slot:append>

</x-input>
Made with by Robson Tenório and contributors.