Skip to content

Overview

The <x-aura::select> component renders a native HTML <select> dropdown styled consistently with the Aura UI design system. It supports labels, placeholder text, hint messages, error states, and size variants. Options are defined using the <x-aura::select.option> sub-component. The select fully supports wire:model for Livewire data binding.

Basic Usage

<x-aura::select label="Country" name="country" placeholder="Select a country">
    <x-aura::select.option value="it">Italy</x-aura::select.option>
    <x-aura::select.option value="de">Germany</x-aura::select.option>
    <x-aura::select.option value="fr">France</x-aura::select.option>
</x-aura::select>

Props

Select

Prop Type Default Description
label string|null null Label text displayed above the select.
placeholder string|null null Placeholder option shown as the initial disabled/selected item.
hint string|null null Help text displayed below the select. Hidden when an error is present.
error string|null null Error message displayed below the select, applying error styling.
disabled bool false Disables the select element.
size string 'md' Size variant for the select. Options: sm, md, lg.

Select Option

Prop Type Default Description
value string|null null The option value attribute.
disabled bool false Disables this specific option.

Slots

Slot Description
Default (Select) Contains <x-aura::select.option> elements or plain <option> tags.
Default (Select Option) The display text for the option.

Variants / Examples

With Livewire Binding

<x-aura::select
    label="Category"
    placeholder="Choose a category"
    wire:model.live="selectedCategory"
>
    @foreach($categories as $category)
        <x-aura::select.option :value="$category->id">
            {{ $category->name }}
        </x-aura::select.option>
    @endforeach
</x-aura::select>

With Error State

Please select a valid role.

<x-aura::select
    label="Role"
    name="role"
    placeholder="Select a role"
    error="Please select a valid role."
>
    <x-aura::select.option value="admin">Administrator</x-aura::select.option>
    <x-aura::select.option value="editor">Editor</x-aura::select.option>
    <x-aura::select.option value="viewer">Viewer</x-aura::select.option>
</x-aura::select>

With Hint Text

This will be used for all communications.

<x-aura::select
    label="Language"
    name="language"
    placeholder="Choose your language"
    hint="This will be used for all communications."
>
    <x-aura::select.option value="en">English</x-aura::select.option>
    <x-aura::select.option value="it">Italian</x-aura::select.option>
    <x-aura::select.option value="de">German</x-aura::select.option>
</x-aura::select>

Size Variants

<x-aura::select label="Small" size="sm" placeholder="Pick one">
    <x-aura::select.option value="a">Option A</x-aura::select.option>
</x-aura::select>

<x-aura::select label="Medium (default)" size="md" placeholder="Pick one">
    <x-aura::select.option value="a">Option A</x-aura::select.option>
</x-aura::select>

<x-aura::select label="Large" size="lg" placeholder="Pick one">
    <x-aura::select.option value="a">Option A</x-aura::select.option>
</x-aura::select>

Disabled Options

<x-aura::select label="Subscription" name="subscription" placeholder="Select a plan">
    <x-aura::select.option value="free">Free</x-aura::select.option>
    <x-aura::select.option value="basic">Basic</x-aura::select.option>
    <x-aura::select.option value="premium" :disabled="true">Premium (coming soon)</x-aura::select.option>
</x-aura::select>

Accessibility

  • When a label prop is provided, a <label> element is rendered and visually associated with the select.
  • Error messages are displayed in a <p> tag with the aura-input-error-text class, providing a clear visual indicator.
  • The disabled state is applied natively to the <select> element, ensuring it is skipped during keyboard navigation and announced by screen readers.
  • All additional HTML attributes (including aria-*, id, required) are forwarded to the <select> element via Blade's attribute bag.