Select Component

The Select component provides a styled dropdown for selecting options from a list.

Basic Usage

Create a simple select dropdown:

<div class="max-w-xs space-y-1">
    <x-input-label for="country" value="Country" />
    <x-select id="country" name="country">
        <option value="">Select a country</option>
        <option value="us">United States</option>
        <option value="ca">Canada</option>
        <option value="uk">United Kingdom</option>
        <option value="au">Australia</option>
    </x-select>
</div>

With Icon

Add an icon to the left side of the select:

<div class="max-w-xs space-y-1">
    <x-input-label for="language" value="Language" />
    <x-select id="language" name="language" icon="language">
        <option value="">Select a language</option>
        <option value="en">English</option>
        <option value="es">Spanish</option>
        <option value="fr">French</option>
        <option value="de">German</option>
    </x-select>
</div>

Error State

Display validation errors:

<div class="max-w-xs space-y-1">
    <x-input-label for="category" value="Category" :error="true" />
    <x-select id="category" name="category" :error="true">
        <option value="">Select a category</option>
        <option value="tech">Technology</option>
        <option value="design">Design</option>
        <option value="business">Business</option>
    </x-select>
    <x-input-error :messages="['The category field is required.']" />
</div>

Livewire Integration

Use with Livewire for reactive forms:

<x-select name="role" wire:model.live="selectedRole">
    <option value="">Select a role</option>
    <option value="admin">Administrator</option>
    <option value="editor">Editor</option>
    <option value="viewer">Viewer</option>
</x-select>

In your Livewire component:

class UserForm extends Component
{
    public string $selectedRole = '';

    public function updatedSelectedRole()
    {
        // React to role changes
    }
}

Props Reference

Prop	Type	Default	Description
width	string	max-w-xs	CSS width class for the select container.
error	bool	false	When true, applies error styling with a red border.
icon	string|null	null	Icon name to display on the left side. Uses x-icons.* components.
chevron	bool	true	Whether to display the chevron-down icon on the right side.
name	string	-	Name attribute for form submission.
id	string	-	ID attribute for label association.
disabled	bool	false	Whether the select is disabled.
wire:model	string	-	Livewire property binding. Use wire:model.live for real-time updates.

Slots

Slot	Description
Default slot	Contains the <option> elements for the dropdown.

References

Category	Path / Name	Description
Component	resources/views/components/select.blade.php	Select component file