Dejavu Docs

Select

A select component that can either be native or styled based on your needs.

<x-ui::forms.select>
    <option>Native select</option>
    <option>Option 2</option>
    <option>Option 3</option>
</x-ui::forms.select>

Copied!

Searchable

Make the select searchable by using the searchable prop or by not passing anything to the component, since it is searchable by default.

<x-ui::forms.searchable-select>
    <option value="1">Searchable</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
</x-ui::forms.searchable-select>

Copied!

With confirmation

You can add a confirmation message on selected via the withConfirmation prop.

<x-ui::forms.searchable-select withConfirmation="Are you sure?">
    <option value="1">Searchable</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
</x-ui::forms.searchable-select>

Copied!

Without searchbox

You can keep the custom styling select without the searchable by disabling it via the searchable prop.

<x-ui::forms.searchable-select :searchable="false">
    <option value="1">Searchable</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
</x-ui::forms.searchable-select>

Copied!

Icon

Add an icon to the select using the icon component under the hood.

<x-ui::forms.searchable-select icon="ethernet">
    <option value="1">Searchable</option>
    <option value="2">Option 2</option>
    <option value="3" selected>Option 3</option>
    <option value="4">Option 4</option>
</x-ui::forms.searchable-select>

Copied!

Descriptions

You can also show a description to each option, just in case the user needs more information.

<x-ui::forms.searchable-select icon="info">
    <option value="1" description="Here goes my description">Select with descriptions</option>
    <option value="2" description="Here goes my description 2">Option 2</option>
    <option value="3" description="Here goes my description 3">Option 3</option>
</x-ui::forms.searchable-select>

Copied!

Ajax searchable

The ajax-searchable-select can search through an url, useful if you need to load options dynamically, or if the amount of options is too large.

<x-ui::forms.ajax-searchable-select
    icon="globe"
    :url="route('search')"
    :selected="['id' => 4, 'name' => 'Ajax search']"
/>
            

//  The response of the search
return response()->json([
    ["id" => 1, "name" =>"Option 1"],
    ["id" => 2, "name" =>"Option 2"],
    ["id" => 3, "name" =>"Option 3"],
    ["id" => 4, "name" =>"Ajax search"],
]);

Copied!