autocomplete · Admiral UI kit

Example

City

Type anything, or pick a suggestion.

Laravel

<x-admin::autocomplete name="g_city" label="City" hint="Type anything, or pick a suggestion." :suggestions="['Singapore', 'London', 'San Francisco', 'Las Vegas']" />

Props

Prop	Required	Default	Options
`name`		`null`
`label`		`null`
`hint`		`null`
`error`		`null`
`id`		`null`
`value`		`null`
`suggestions`		`[]`
`source`		`null`
`min`		`1`
`icon`		`null`
`optional`		`false`
`required`		`false`

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

Other stacks

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

HTML, for any stack

<div class="adm-field">
            <label class="adm-label" for="g_city">City</label>
        <div data-adm-autocomplete data-min="1"  data-suggestions="[&quot;Singapore&quot;,&quot;London&quot;,&quot;San Francisco&quot;,&quot;Las Vegas&quot;]" >
                <input
            type="text"
             name="g_city"              id="g_city"                                                  aria-describedby="g_city-hint"             class="adm-input"
        >
            </div>
    <span class="adm-hint" id="g_city-hint">Type anything, or pick a suggestion.</span>    </div>