Document

Selects allow users to choose one option from a list. You can use the wire:model directive to bind the selected value to a property.

Selects will automatically flip when the available space is not enough to display the dropdown.

1<x-select id="select-01" placeholder="Select a language">
2    @foreach($this->options as $key=>$value)
3        <x-option :value="$key">{{ $value }}</x-option>
4    @endforeach
5</x-select>

Multi-Select

Allow users to select multiple options from a list by adding the multiple attribute.

1<x-select id="select-02" multiple> ...
2    <x-option value="en" selected>English</x-option>
3    <x-option value="de" selected>German</x-option>
4    <x-option value="es" selected>Spanish</x-option>
5    <x-option value="fr">French</x-option>
6</x-select>

Limit Multi-Select Text

Limit the number of selected items by adding the limit attribute. You can customize the text by using the limit-text attribute.

Don't use the character ' in the limit-text attribute. The default text :count items selected can be translated by adding it to your <language>.json file.

1<x-select id="select-457" multiple limit="1" limit-text="You got :count items!"> ...
2    <x-option value="en" selected>English</x-option>
3    <x-option value="de" selected>German</x-option>
4    <x-option value="es">Spanish</x-option>
5    <x-option value="fr">French</x-option>
6</x-select>

Checkbox

Show checkboxes next to the options by adding the checkbox attribute.

 1<x-select id="select-03" checkbox label="Single choice">...
 2    <x-option value="en">English</x-option>
 3    <x-option value="de" selected>German</x-option>
 4 
 5    <x-option value="es" label="Spanish" />
 6    <x-option value="fr" label="French" />
 7</x-select> 
 8 
 9<x-select id="select-04" multiple checkbox label="Multiple choice"> ...
10    <x-option value="en">English</x-option>
11    <x-option value="de" selected>German</x-option>
12 
13    <x-option value="es" selected label="Spanish" />
14    <x-option value="fr" selected label="French" />
15</x-select>

Icons

Add icons by using the icon or icon-end attribute on the x-option component.

You can also add colors to icons by adding a the color class .text-primary-400 to the x-icon component.
Example: <x-option icon="user text-primary-400" />

1<x-select id="select-05" label="Select your role">
2    <x-option value="1" icon="command-line--micro">Software Engineer</x-option>
3    <x-option value="2" icon="user--micro">Product Manager</x-option>
4    <x-option value="3" icon="circle-stack--micro">Data Analyst</x-option>
5    <x-option value="4" icon="paint-brush--micro">UX Designer</x-option>
6</x-select>

Hide in Preview

Hide elements from the selected display by adding the hide-in-preview class to any element within the <x-slot:label>.

Elements with the hide-in-preview class will only be visible in the dropdown options, not in the selected display.

This is useful for additional information, icons, or descriptions that should only appear when browsing options.

 1<x-select id="select-hide-preview" label="Select an option with hidden elements" show-html>
 2    <x-option value="1">
 3        <x-slot:label>
 4            Option 1
 5            <span class="hide-in-preview text-gray-500 text-sm">(Only visible in dropdown)</span>
 6        </x-slot:label>
 7    </x-option>
 8    <x-option value="2">
 9        <x-slot:label>
10            Option 2
11            <small class="hide-in-preview text-blue-500">- Additional info</small>
12        </x-slot:label>
13    </x-option>
14    <x-option value="3">
15        <x-slot:label>
16            Option 3
17            <div class="hide-in-preview text-xs text-gray-400 mt-1">This description is only shown in the dropdown</div>
18        </x-slot:label>
19    </x-option>
20</x-select>

Images

Add images by using the img slot and adding the common img attributes.

The img-tag has the class ".option-image". You can use this class to style the image.

By default, the aspect ratio of the image will be 1/1.

 1<x-select id="select-5231" label="Assign to" multiple show-html placeholder="Choose an user">
 2    <x-option value="1">
 3        <x-slot:img class="radius-circle avatar" src="{{ Vite::image('avatar/01.jpg') }}" alt="Avatar 01"></x-slot:img>
 4        Sarah Brown
 5    </x-option>
 6    <x-option value="2" selected>
 7        <x-slot:img class="radius-circle avatar" src="{{ Vite::image('avatar/02.jpg') }}" alt="Avatar 02"></x-slot:img>
 8        Frank Smith
 9    </x-option>
10    <x-option value="3">
11        <x-slot:img class="radius-circle avatar" src="{{ Vite::image('avatar/03.jpg') }}" alt="Avatar 03"></x-slot:img>
12        David Johnson
13    </x-option>
14    <x-option value="4">
15        <x-slot:img class="radius-circle avatar" src="{{ Vite::image('avatar/04.jpg') }}" alt="Avatar 04"></x-slot:img>
16        John Doe
17    </x-option>
18</x-select>

Search

Add a search input to the select by adding the search attribute.

1<x-select id="select-52192" search>
2    <x-option value="en">English</x-option>
3    <x-option value="de">German</x-option>
4    <x-option value="es">Spanish</x-option>
5    <x-option value="fr">French</x-option>
6</x-select>

Disabled State

Disable the select to prevent users from interacting with it.

1<x-select id="select-58192" disabled>
2    <x-option value="en">English</x-option>
3    <x-option value="de" selected>German</x-option>
4    <x-option value="es">Spanish</x-option>
5    <x-option value="fr">French</x-option>
6</x-select>

Actions

Add actions to the select by using the actions slot.

1<x-select id="select-52191">
2    <x-slot:actions> 
3        <x-button type="white" icon="plus--micro">Add Language</x-button> 
4    </x-slot:actions> 
5    <x-option value="en">English</x-option>
6    <x-option value="de">German</x-option>
7    <x-option value="es">Spanish</x-option>
8    <x-option value="fr">French</x-option>
9</x-select>

Prepend

Prepend the select to an input by using the prepend slot.

 1 
 2<x-input placeholder="Phone number" id="input-527921" type="tel">
 3    <x-slot:prepend>
 4        <x-select id="select-527931" placeholder="+49" arrow="up">
 5            <x-option value="1">+1</x-option>
 6            <x-option value="44">+44</x-option>
 7            <x-option value="49" selected>+49</x-option>
 8            <x-option value="33">+33</x-option>
 9        </x-select>
10    </x-slot:prepend>
11</x-input>

Max Height

Limit the height of the dropdown by adding the max-height attribute. The value of the max-height attribute is in pixel.

 1<x-select max-height="200" id="select-max-height" placeholder="Select a language"> 
 2    <x-option value="en">English</x-option>
 3    <x-option value="de">German</x-option>
 4    <x-option value="es">Spanish</x-option>
 5    <x-option value="fr">French</x-option>
 6    <x-option value="it">Italian</x-option>
 7    <x-option value="nl">Dutch</x-option>
 8    <x-option value="pl">Polish</x-option>
 9    <x-option value="pt">Portuguese</x-option>
10    <x-option value="ru">Russian</x-option>
11</x-select>

Error State

Errors will automatically be added, if you connected a model via wire:model and the model is invalid.

1<x-select id="dropdown-error" wire:model="error_example" label="Error example" wire:loading>
2    <x-option value="1">Option 1</x-option>
3    <x-option value="2">Option 2</x-option>
4    <x-option value="3">Option 3</x-option>
5</x-select>

Default Select

If you want to have the unstyled default select without our custom wrapper, you can use the x-field component.

Default Select

Without our wrapper

We do not recommend using this, as it will not be styled.

1<x-field class="field-select" label="Default Select" hint="Without our wrapper" description="We do not recommend using this, as it will not be styled.">
2    <select class="input field-item">
3        <option value="1">Option 1</option>
4        <option value="2">Option 2</option>
5        <option value="3">Option 3</option>
6    </select>
7</x-field>