Dejavu Docs

Multiple select

A multiple select component.

<x-ui::forms.multiple-select placeholder="Chose an option">
    <option value="1" selected>Option 1</option>
    <option value="2">Option 2</option>
    <option value="3" selected>Option 3</option>
    <option value="4">Option 4</option>
    <option value="5">Option 5</option>
</x-ui::forms.multiple-select>

Copied!

Placeholder

You can personalize a placeholder as the text to show when no option has been selected.

Chose an option

<x-ui::forms.multiple-select placeholder="Chose an option">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
    <option value="5">Option 5</option>
</x-ui::forms.multiple-select>

Copied!

Icon

Add an icon to the component. Just like with the rest of components, it uses the icon component under the hood.

<x-ui::forms.multiple-select placeholder="Chose an option">
    <option value="1" selected>Option 1</option>
    <option value="2">Option 2</option>
    <option value="3" selected>Option 3</option>
    <option value="4">Option 4</option>
    <option value="5">Option 5</option>
</x-ui::forms.multiple-select>

Copied!

Ajax search

It case loading all the options at once is not an option or if the options are not available at render, you can load the options dynamically using an ajax url.

The response given by the ajax call needs to return the correct format. For more details, check the source code on the repo.

Ajax

<x-ui::forms.multiple-select
        icon="search"
        placeholder="Ajax"
        :url="route('search')"
    >
    <option value="1000" selected>Ajax</option>
    <option value="1001" selected>Searchable</option>
</x-ui::forms.multiple-select>
            
//  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!