input

A text field with label, hint, error and old() value handled from its name.

Example

Shown to admins only.
$ USD
Use a cron expression, for example */5 * * * *.
15 / 40 Lower case, digits and underscores.

Laravel

<x-admin::form-grid>
    <x-admin::input name="g_name" label="Segment name" hint="Shown to admins only." value="Lapsed members" required />
    <x-admin::input name="g_search" label="Search" icon="search" placeholder="Filter by name" optional />
    <x-admin::input name="g_price" label="Price" prefix="$" suffix="USD" type="number" value="120" />
    <x-admin::input name="g_schedule" label="Schedule" value="every 5 min" error="Use a cron expression, for example */5 * * * *." />
    <x-admin::input name="g_slug" label="Segment ID" value="seg_lapsed_2025" maxlength="40" counter mono hint="Lower case, digits and underscores." />
</x-admin::form-grid>

Props

PropRequiredDefaultOptions
namenull
labelnull
hintnull
errornull
idnull
type"text"
valuenull
prefixnull
suffixnull
iconnull
optionalfalse
requiredfalse
counterfalse
monofalse

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

Other stacks

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

HTML, for any stack
<div class="adm-form-grid"><div class="adm-field">
            <label class="adm-label" for="g_name">Segment name <span class="adm-error" aria-hidden="true">*</span></label>
        <input
        type="text"
         name="g_name"          id="g_name"          value="Lapsed members"          required                  aria-describedby="g_name-hint"         class="adm-input"
    >
    <span class="adm-hint" id="g_name-hint">Shown to admins only.</span>    </div>
    <div class="adm-field">
            <label class="adm-label" for="g_search">Search <span class="adm-label__optional">(optional)</span></label>
        <div class="adm-input-group">    <span class="adm-input-group__addon"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg></span>        <input
        type="text"
         name="g_search"          id="g_search"                                         class="adm-input" placeholder="Filter by name"
    >
        </div>
        </div>
    <div class="adm-field">
            <label class="adm-label" for="g_price">Price</label>
        <div class="adm-input-group">        <span class="adm-input-group__addon">$</span>    <input
        type="number"
         name="g_price"          id="g_price"          value="120"                                 class="adm-input"
    >
    <span class="adm-input-group__addon">USD</span>    </div>
        </div>
    <div class="adm-field">
            <label class="adm-label" for="g_schedule">Schedule</label>
        <input
        type="text"
         name="g_schedule"          id="g_schedule"          value="every 5 min"                  aria-invalid="true"          aria-describedby="g_schedule-error"         class="adm-input"
    >
        <span class="adm-error" id="g_schedule-error">Use a cron expression, for example */5 * * * *.</span></div>
    <div class="adm-field">
            <label class="adm-label" for="g_slug">Segment ID</label>
        <input
        type="text"
         name="g_slug"          id="g_slug"          value="seg_lapsed_2025"                          aria-describedby="g_slug-hint g_slug-counter"         class="adm-input adm-mono" maxlength="40"
    >
                            <span class="adm-counter " id="g_slug-counter" data-adm-counter="g_slug"  data-max="40" >15 / 40</span>
        <span class="adm-sr-only" aria-live="polite" data-adm-counter-live></span>
    <span class="adm-hint" id="g_slug-hint">Lower case, digits and underscores.</span>    </div></div>