Components
field

Field

Form field wrapper with label, hint, error message and required indicator.

x-ui.field wraps any form control with label, hint, error message, and required indicator. It is the recommended way to build forms that need validation, helper text, or consistent layout in grids.

Demo

<form class="space-y-4 max-w-sm w-full">
    <x-ui.field label="Email" for="field-demo-email" hint="We'll never share your email" required>
        <x-ui.input type="email" id="field-demo-email" placeholder="you@example.com" />
    </x-ui.field>

    <x-ui.field label="Bio" for="field-demo-bio" hint="Tell us about yourself">
        <x-ui.textarea id="field-demo-bio" rows="3" placeholder="I'm a..." />
    </x-ui.field>

    <x-ui.field label="Country" for="field-demo-country" required>
        <x-ui.select id="field-demo-country">
            <option value="">Select...</option>
            <option value="us">United States</option>
            <option value="fr">France</option>
        </x-ui.select>
    </x-ui.field>
</form>

Installation

Shell

php artisan flexi:add field

With error

Pass an error string to display validation feedback. The hint is automatically hidden when an error is present. The inner input must manage its own invalid prop for the red border styling.

<form class="space-y-4 max-w-sm w-full">
    <x-ui.field label="Email" for="field-error-email"
        error="The email field is required.">
        <x-ui.input type="email" id="field-error-email" placeholder="you@example.com" invalid />
    </x-ui.field>

    <x-ui.field label="Password" for="field-error-password"
        error="Password must be at least 8 characters.">
        <x-ui.input type="password" id="field-error-password" placeholder="••••••••" invalid />
    </x-ui.field>
</form>

In grid layouts

Each field naturally takes its grid cell. No extra wrappers or group-wrapper-class workarounds needed.

<form class="space-y-4 max-w-lg w-full">
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <x-ui.field label="First Name" for="field-grid-first" required>
            <x-ui.input id="field-grid-first" placeholder="John" />
        </x-ui.field>
        <x-ui.field label="Last Name" for="field-grid-last" required>
            <x-ui.input id="field-grid-last" placeholder="Doe" />
        </x-ui.field>
    </div>
    <x-ui.field label="Email" for="field-grid-email" required>
        <x-ui.input type="email" id="field-grid-email" placeholder="john@company.com" />
    </x-ui.field>
</form>

Guidance

The control inside the slot must manage its own invalid state — field only handles label + hint + error display.
Always pass id to the input and match it with for on the field.
Error overrides hint — when error is set, hint is automatically hidden.
Use required to show the asterisk; the control itself still needs required or Livewire validation.
For simple standalone fields without hint/error, the built-in label prop on input/textarea/select is sufficient.

Livewire

Shell

<x-ui.field label="Email" for="email" :error="$errors->first('email')">
    <x-ui.input type="email" id="email" wire:model="email" :invalid="$errors->has('email')" />
</x-ui.field>

API

Prop	Description
`label` (string\|null)	Label text displayed above the control. Default: null
`for` (string\|null)	`for` attribute on the label (matches the input's `id` ).
`hint` (string\|null)	Helper text in muted color below the control. Hidden when `error` is set.
`error` (string\|bool\|null)	Error text in destructive color below the control. Replaces hint. Boolean `true` hides hint without showing text.
`required` (boolean)	Adds a red asterisk next to the label.
`labelClass` (string)	Extra classes on the label element.
`class` (string)	Extra classes on the wrapper div. Useful for grid span classes like `col-span-full` .

Avoid

Do not pass label to the inner input when using x-ui.field — use the field's label prop instead.
Do not use group-wrapper-class on inputs inside x-ui.field — the field handles layout.

Text Area

Multi-line text inpu...