tag-input · Admiral UI kit

Example

Laravel

<x-admin::tag-input name="g_tags" label="Tags" :value="['vip', 'press']" hint="Press Enter or type a comma to add a tag." />

Props

Prop	Required	Default
`name`	yes
`label`		`null`
`hint`		`null`
`error`		`null`
`id`		`null`
`value`		`[]`
`placeholder`		`null`
`optional`		`false`
`required`		`false`

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

Other stacks

React and Vue: import { TagInput } 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_tags">Tags</label>
        <div class="adm-combobox" data-adm-tags data-name="g_tags[]" >
        <div class="adm-control" >
                            <span class="adm-chip"><span>vip</span><button type="button" aria-label="Remove vip"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"/></svg></button><input type="hidden" name="g_tags[]" value="vip"></span>
                            <span class="adm-chip"><span>press</span><button type="button" aria-label="Remove press"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"/></svg></button><input type="hidden" name="g_tags[]" value="press"></span>
                        <input class="adm-control__input" type="text"  id="g_tags"  placeholder="Type, then press Enter"  aria-describedby="g_tags-hint"  >
        </div>
    </div>
    <span class="adm-hint" id="g_tags-hint">Press Enter or type a comma to add a tag.</span>    </div>