combobox · Admiral UI kit

Example

Country

Destinations

Laravel

<x-admin::form-grid>
    <x-admin::combobox name="g_country" label="Country" placeholder="Search countries" value="nz"
        :options="['nz' => 'New Zealand', 'sg' => 'Singapore', 'gb' => 'United Kingdom', 'us' => 'United States']" />
    <x-admin::combobox name="g_platforms[]" label="Destinations" multiple placeholder="Add a destination" :value="['sf']"
        :options="['sf' => 'Salesforce', 'mc' => 'Mailchimp', 'gs' => 'Google Sheets']" />
</x-admin::form-grid>

Props

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

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

Other stacks

React and Vue: import { Combobox } 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_country">Country</label>
        <div class="adm-combobox" data-adm-combobox >
        <select
             name="g_country"              id="g_country"                                                             class="adm-select"
        >
            <option value="">Search countries</option>                                            <option value="nz" selected>New Zealand</option>
                                            <option value="sg" >Singapore</option>
                                            <option value="gb" >United Kingdom</option>
                                            <option value="us" >United States</option>
                    </select>
    </div>
        </div>
    <div class="adm-field">
            <label class="adm-label" for="g_platforms">Destinations</label>
        <div class="adm-combobox" data-adm-combobox >
        <select
             name="g_platforms[]"              id="g_platforms"              multiple data-placeholder="Add a destination"                                                 class="adm-select"
        >
                                                        <option value="sf" selected>Salesforce</option>
                                            <option value="mc" >Mailchimp</option>
                                            <option value="gs" >Google Sheets</option>
                    </select>
    </div>
        </div></div>