Input

Capture user data with various forms of text input.

Username

This will be publicly displayed.

Username is required.

<x-input wire:model="username" label="Username" description="This will be publicly displayed." />

Longhand

Zinc UI makes it easy to wrap your inputs in a field with label/description and error messages. If you need more control over the layout of these fields, you can assemble the individual field components.

<x-field>
    <x-label>Username</x-label>
 
    <x-description>This will be publicly displayed.</x-description>
 
    <x-input wire:model="username" />
 
    <x-error name="username" />
</x-field>

Variants

Use the


    variant

prop to change the visual style of the input. The default value is


    outline

<x-input type="text" variant="outline" />
<x-input type="text" variant="filled" />

Sizes

Use the


    size

prop to make the input's height more compact. The default value is


    base

<x-input size="base" placeholder="Filter by..." />
<x-input size="sm" placeholder="Filter by..." />

Badge

Add a badge to the label by using


    badge

and


    badge-color

props. If the input is


    required

it will automatically add a required badge.

Required

Not Optional

<x-input type="email" label="Email" required />
<x-input type="email" label="Email" required badge="Not Optional" badge-color="red" />

Types

Use the browser's various input types for different situations:


    text


    email


    password


    date


    file

, etc. The default value is


    text

Text

Password

Date

File

<x-input type="text" label="Text" />
<x-input type="email" label="Email" />
<x-input type="password" label="Password" />
<x-input type="date" max="2999-12-31" label="Date" />
<x-input type="file" label="File" />

Disabled

Prevent users from interacting with an input by disabling it.

File

<x-input disabled type="email" label="Email" placeholder="[email protected]" />
<x-input disabled type="file" label="File" />

Readonly

Useful for locking an input during a form submission.

<x-input readonly variant="filled" />

Input masking

Restrict the formatting of text content for unique cases by using Alpine's mask plugin .

Phone

Date of Birth

Credit Card

<x-input label="Phone" x-mask="(+99) 999-9999-9999" />
<x-input label="Date of Birth" x-mask="99/99/9999" placeholder="MM/DD/YYYY" />
<x-input label="Credit Card"
    x-mask:dynamic="$input.startsWith('34') || $input.startsWith('37')? '9999 999999 99999' : '9999 9999 9999 9999'" />

Icons

Append or prepend an icon to the inside of a form input.

Recomended to use outline or solid icon variant with prefix


    o-...


    s-...

for inputs. More information visit icon component.

<x-input icon="o-magnifying-glass" placeholder="Search orders" />
<x-input icon-trailing="s-credit-card" placeholder="4444-4444-4444-4444" />

Icon buttons

Append a button to the inside of an input to provide associated functionality. It can be add by using


    icon


    iconLeading

and


    iconTrailing

slot.

<x-input placeholder="Search orders">
    <x-slot:iconTrailing>
        <x-button size="sm" variant="subtle" icon="o-x-mark" class="mr-2" />
    </x-slot>
</x-input>
 
<x-input size="sm" placeholder="Search orders">
    <x-slot:iconTrailing>
        <x-button size="sm" variant="subtle" icon="o-x-mark" class="!h-6 mr-2" />
    </x-slot>
</x-input>

Actionable

Zinc UI provides three special input properties to configure common input button behaviors.


    clearable

for clearing contents,


    copyable

for copying contents, and


    viewable

for toggling password visibility. It use


    iconTrailing

slot, so if use this actionable props, you can't use


    icon-trailing

props.

<x-input icon="o-magnifying-glass" placeholder="Search something" clearable />
<x-input icon="o-key" readonly copyable />
<x-input type="password" icon="o-finger-print" viewable />

Shortcuts for actions, it can be used when the input is focused.

Clearable : Alt + X , Copyable : Alt + C , Viewable : Alt + V .