Select

x-select

A styled native select with an optional label, placeholder and automatic validation errors. Pass <option> elements as the content. Works with wire:model.

php artisan components:add select

Examples

Basic

A labeled select with a placeholder option.

<div class="grid w-full max-w-md justify-center gap-4">
    <x-components.select label="Country" placeholder="Choose a country">
        <option>United States</option>
        <option>United Kingdom</option>
        <option>Australia</option>
        <option>Canada</option>
    </x-components.select>
</div>

Props

Prop	Type	Default	Description
`label`	text	`—`	Optional label rendered above the control.
`placeholder`	text	`—`	Optional disabled-style first option with an empty value.

Slots

Slot	Description
`slot`	<option> elements for the select.

Works with

`components:add select` pulls these in automatically.

x-label Label