Select

Custom select control.

<select class="form-control custom-select">
    <option selected="selected" value="2">Approved</option>
    <option value="3">Deleted</option>
    <option value="1">New</option>
</select>

Sizes

Small size

<div class="form-group form-group-sm">
    <select class="form-control custom-select">
        <option value="1" selected="selected">One</option>
        <option value="2">Two</option>
    </select>
</div>

Large size

<div class="form-group form-group-lg">
    <select class="form-control custom-select">
        <option value="1" selected="selected">One</option>
        <option value="2">Two</option>
    </select>
</div>

Options

Disable search

Add the select-no-search CSS class to disable searching.

<div class="form-group">
    <select class="form-control custom-select select-no-search">
        <option value="1" selected="selected">One</option>
        <option value="2" selected="selected">Two</option>
    </select>
</div>

Option groups

Use the optgroup element to create option groups.

<select class="form-control custom-select">
    <option value="1">Please select an option</option>
    <option value="2">Ungrouped option</option>
    <optgroup label="Option Group">
        <option value="3">Grouped option</option>
        <option value="4">Another option</option>
        <option value="4">Third option</option>
    </optgroup>
</select>

AJAX search

Use the data-handler attribute to source the select options from an AJAX handler.

<select
    class="form-control custom-select"
    data-handler="onGetOptions"
    data-minimum-input-length="2"
    data-ajax--delay="300"
    data-request-data="foo: 'bar'"
    ></select>

The AJAX handler should return results as an array.

public function onGetOptions()
{
    $results = [
        'key' => 'value',
        ...
    ];

    return ['result' => $results];
}