label · Admiral UI kit

Example

A label on its own (optional)

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

Prop	Required	Default	Options
`for`		`null`
`optional`		`false`
`required`		`false`

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

Other stacks

React and Vue: import { Label } 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>