Field

A wrapper that composes label, hint text, error message, and required indicator around any form input. Eliminates the boilerplate of wiring up for/id matching by hand.

Before & After

Without the wrapper, every form field needs 5+ lines of manual composition:

<div class="space-y-1.5">
    <x-wirekit::label for="email" required>Email</x-wirekit::label>
    <x-wirekit::input name="email" type="email" id="email" />
    @error('email')<p class="...">{{ $message }}</p>@enderror
</div>

With the wrapper, it collapses to:

<x-wirekit::field label="Email" name="email" required>
    <x-wirekit::input name="email" type="email" />
</x-wirekit::field>

Basic Usage

<x-wirekit::field label="Email address" name="email">
    <x-wirekit::input name="email" type="email" hint="We will never share your email." placeholder="Your email address" />
</x-wirekit::field>

<x-wirekit::field label="Email address" name="email" hint="We will never share your email.">
    <input id="email" name="email" type="email" aria-describedby="email-hint" />
</x-wirekit::field>

Required Fields

<x-wirekit::field label="Full name" name="name" required>
    <x-wirekit::input name="name" />
</x-wirekit::field>

The red asterisk is marked aria-hidden="true" — screen readers rely on the required attribute on the input itself (pass it through as usual: <x-wirekit::input ... required />).

Error State

The wrapper automatically reads from Laravel's $errors bag when you pass a name, so after a failed submission the matching message renders below the input — no manual @error directive needed. An explicit error prop covers one-off messages (useful in demos, previews, or programmatic validation). The preview below puts both on the control, which is the shape that also gets the red ring, aria-invalid and the aria-describedby link; the field keeps for so its label still points at the input:

Own the error on ONE level. The form controls (input, select, textarea, checkbox, toggle) ALSO read the $errors bag by their own name and render their own message + red ring + aria-invalid. If you give the same name (or an explicit error) to BOTH the field and the control it wraps, the message renders twice. Pick one: give name/error to the control when you want its red ring, its aria-invalid and its aria-describedby link (the field then carries the label and for="{name}" instead of name, so it still points at the control without doing a second bag lookup), or give it to the field when a plain message below the control is enough (leave the control's name/error off) — in that second shape the message is text next to the control rather than text attached to it, so reach for it when the control is not a WireKit one and you will wire aria-describedby="{name}-error" yourself.

<x-wirekit::field label="Email" for="field-error-demo">
    <x-wirekit::input name="field-error-demo" type="email" error="That email is already taken." placeholder="Your email address" />
</x-wirekit::field>

Works With Any Input

<x-wirekit::field label="Country" name="country" required>
    <x-wirekit::select name="country">
        <option value="">— Select a country —</option>
        <option value="DE">Germany</option>
        <option value="CH">Switzerland</option>
        <option value="AT">Austria</option>
    </x-wirekit::select>
</x-wirekit::field>

<x-wirekit::field label="Feedback" name="feedback">
    <x-wirekit::textarea name="feedback" rows="4" hint="500 characters max." />
</x-wirekit::field>

Horizontal Orientation

Set orientation="horizontal" to place the label in a column beside the control instead of above it — the classic settings-form layout. The error/hint messages stay aligned under the control.

<x-wirekit::field label="Display name" name="display" orientation="horizontal">
    <x-wirekit::input name="display" hint="Shown on your public profile." />
</x-wirekit::field>

Grouped Fields (Fieldset + Legend)

Wrap a set of related controls — most often a radio or checkbox group — in <x-wirekit::field.set>. It renders a native <fieldset> with a <legend>, the WCAG-recommended grouping pattern: the legend is announced before each control in the set. Pass legend (and optional hint) as props.

<x-wirekit::field.set legend="Notification frequency" hint="Choose how often we email you.">
    <x-wirekit::radio name="freq" value="realtime" label="Real-time" checked />
    <x-wirekit::radio name="freq" value="daily" label="Daily digest" />
    <x-wirekit::radio name="freq" value="weekly" label="Weekly summary" />
</x-wirekit::field.set>

A Rich Legend

When the caption needs more than a string — a badge, an icon, emphasis — pass it as the named legend slot instead of the prop. It renders into the same <legend> element, in the same place.

<x-wirekit::field.set hint="Applies to every project in the workspace.">
    <x-slot:legend>
        Permissions <x-wirekit::badge intent="info" size="sm">Beta</x-wirekit::badge>
    </x-slot:legend>
    <x-wirekit::checkbox name="perm_read" label="Read" checked />
    <x-wirekit::checkbox name="perm_write" label="Write" />
</x-wirekit::field.set>

How It Works

The wrapper coordinates three pieces:

1. Label — Rendered via <x-wirekit::label :for="$name" :required="$required">.
2. Slot — Your input (any WireKit form component or plain HTML).
3. Hint / Error — Rendered with stable IDs ({name}-hint, {name}-error) for you to reference with aria-describedby. The wrapper does not attach them to the slot: a WireKit form control links its OWN hint and its OWN error, and never sees the wrapper's. Which one renders the message is therefore the same choice as which one owns the name — see the note under Error State.

Design Decisions

• Why does the child input still need its own name? The wrapper doesn't inject attributes into its slot — Blade slots are opaque. You pass name to both the field and the input. The wrapper uses it for the label's for attribute and for the $errors lookup; the input uses it for submission.
• Why isn't there a size prop? Size is visual and belongs on the actual input (<x-wirekit::input size="lg">), not the wrapper.

Lining a Control Up With a Field

A toolbar is usually a field plus something beside it — a button, a second control. Put them in a row and the neighbor sits a label-height too high: the field's control starts below its label, and the neighbor starts at the top of the row.

items-end does not fix it, because it follows the field as the field grows. items-start does not either, because the first thing in the field's stack is the label, not the control.

<x-wirekit::field.spacer> puts a label-shaped blank where the label would go, so both columns begin with the same box and items-start lines the controls up.

Put it in a <x-wirekit::field> of its own. A field is what sets the distance between a label and the control under it, so a column that borrows the label's height has to borrow that distance too — otherwise the top edges match and everything below them is off by that gap. Use the field itself rather than a stack with a chosen gap: it is the same spacing, from the component that defines it, and it stays right when that spacing changes.

<x-wirekit::row class="items-start" gap="sm">
    <x-wirekit::field label="Project name" name="project">
        <x-wirekit::input name="project" placeholder="Atlas" />
    </x-wirekit::field>

    <x-wirekit::field>
        <x-wirekit::field.spacer />
        <x-wirekit::button>Save</x-wirekit::button>
    </x-wirekit::field>
</x-wirekit::row>

More than one control goes in a row inside that same field, so the group still starts on the input's line:

<x-wirekit::row class="items-start" gap="sm">
    <x-wirekit::field label="Project name" name="project-2">
        <x-wirekit::input name="project-2" placeholder="Atlas" />
    </x-wirekit::field>

    <x-wirekit::field>
        <x-wirekit::field.spacer />
        <x-wirekit::row gap="sm">
            <x-wirekit::button>Save</x-wirekit::button>
            <x-wirekit::button intent="neutral" surface="outline">Cancel</x-wirekit::button>
        </x-wirekit::row>
    </x-wirekit::field>
</x-wirekit::row>

It renders the real <x-wirekit::label>, not a hand-written stand-in with copied classes — so it stays exactly as tall as a label when the typography changes. A copy would drift, and the drift would look like a small misalignment rather than like a stale duplicate.

It is aria-hidden: a screen reader announcing an empty label would be describing a layout decision as if it were content.

This is the other half of reserve-message. That one holds the space below a control so a field does not shove its neighbors down when validation fires; this one holds the space above so two columns start on the same line.

Props

<x-wirekit::field.set> props

The base, legend and hint blocks all resolve through the personalization chain, so a project whose group captions are one size smaller sets that once instead of per call site — see Customization for the priority chain and the Tailwind source-scanning caveat.

// config/wirekit.php
'components' => [
    'field.set' => [
        'classes' => [
            'legend' => 'mb-1 text-[length:var(--text-wk-sm)] font-[number:var(--font-wk-heading-weight)] text-[color:var(--color-wk-text)]',
        ],
    ],
],

<x-wirekit::field.spacer> props

Accessibility

• for / id matching is automatic — clicking the label always focuses the input.
• Hint and error text rendered by a WireKit form control is linked via aria-describedby on that control — each of them does this independently for its own hint / error.
• Hint and error text rendered by the wrapper gets the stable id {name}-hint / {name}-error and nothing more: a slot is opaque, so the wrapper cannot put aria-describedby on whatever is inside it. Put the message on the control, or point at the id yourself.
• The error message is an ARIA live region (aria-live="polite") by default, so a validation error that appears after a Livewire round-trip is announced without the focus returning to the field. Disable it with :announce-error="false" when the page runs its own live region.
• Required indicator is aria-hidden — the semantic required attribute on the input itself is what screen readers announce.
• <x-wirekit::field.set> emits its <legend> as the <fieldset>'s first child, which is what gives the group its accessible name. That holds for the legend prop and for the <x-slot:legend> form alike; a <legend> placed in the default slot instead is a grandchild and names nothing.

Keyboard Interaction

This component is a layout wrapper. Keyboard interaction is delegated to its children.

Design Tokens

The Field wrapper is layout-only — it composes Label above the slot and renders hint / error text using the same tokens as Input. Visual styling on the input itself comes from whichever WireKit form component you slot in.

See Also

• Inline Edit — edit this value in place, with an explicit confirm step

Further Reading

• MDN: <label> element
• MDN: aria-describedby
• MDN: aria-required
• WebAIM: Creating Accessible Forms