Field

Encapsulate input elements with labels, descriptions, and validation.

Explore the input component.

Email is required.

<x-field>
    <x-label>Email</x-label>
 
    <x-input wire:model="email" type="email" />
 
    <x-error name="email" />
</x-field>

Shorthand

Because using the field component in its full form can be verbose and repetitive, all form controls in Zinc UI allow you pass a


    label

and a


    description

parameter directly. Under the hood, they will be wrapped in a field with an error component automatically.

<x-input wire:model="email" label="Email" type="email" />

With trailing description

Position the field description directly below the input.

Password

Must be at least 8 characters long, include an uppercase letter, a number, and a special character.

<x-field>
    <x-label>Password</x-label>
 
    <x-input type="password" />
 
    <x-error name="password" />
 
    <x-description>Must be at least 8 characters long, include an uppercase letter, a number, and a
        special character.</x-description>
</x-field>

With badge

Badges allow you to enhance a field with additional information such as being "required" or "optional" when it might not be expected.

Required

Email is required.

Phone number

Optional

<x-field>
    <x-label badge="Required">Email</x-label>
 
    <x-input type="email" required />
 
    <x-error name="email" />
</x-field>
 
<x-field>
    <x-label badge="Optional">Phone number</x-label>
 
    <x-input type="phone" placeholder="(555) 555-5555" mask="(999) 999-9999" />
 
    <x-error name="phone" />
</x-field>

Split layout

Display multiple fields horizontally in the same row.

First name

Last name

<div class="grid grid-cols-2 gap-4">
    <x-input label="First name" placeholder="Arif" />
 
    <x-input label="Last name" placeholder="Budiman" />
</div>

Fieldset

Group related fields using the fieldset and legend component.

Shipping address

Street address line 1

Street address line 2

City

State / Province

Postal / Zip code

<x-fieldset>
    <x-legend>Shipping address</x-legend>
 
    <div class="space-y-6">
        <x-input label="Street address line 1" placeholder="123 Main St" class="max-w-sm" />
        <x-input label="Street address line 2" placeholder="Apartment, studio, or floor" class="max-w-sm" />
 
        <div class="grid grid-cols-2 gap-x-4 gap-y-6">
            <x-input label="City" placeholder="San Francisco" />
            <x-input label="State / Province" placeholder="CA" />
            <x-input label="Postal / Zip code" placeholder="12345" />
            {{-- <x-select label="Country">
                <option selected>United States</option>
                <!-- ... -->
            </x-select> --}}
        </div>
    </div>
</x-fieldset>