field

Wraps a custom control with a label, hint and error. input, select and textarea use it for you.

Example

field wraps any control with a hint and an error.

Laravel

<x-admin::stack gap="2">
    <x-admin::label for="g_custom" optional>A label on its own</x-admin::label>
    <x-admin::field for="g_custom" hint="field wraps any control with a hint and an error.">
        <input class="adm-input" id="g_custom">
    </x-admin::field>
</x-admin::stack>

Props

PropRequiredDefaultOptions
labelnull
fornull
hintnull
errornull
optionalfalse
requiredfalse

Other attributes, such as wire:model or data-*, pass through to the element.

Other stacks

React and Vue: import { Field } from "@admiral/ui-kit/react" (or /vue). See the React and Vue guide.

HTML, for any stack
<div class="adm-stack" style="gap:var(--ad-space-2)"><label class="adm-label" for="g_custom">A label on its own <span class="adm-label__optional">(optional)</span></label>
    <div class="adm-field">
        <input class="adm-input" id="g_custom">
    <span class="adm-hint" id="g_custom-hint">field wraps any control with a hint and an error.</span>    </div></div>