Laravel Select Component

Free · MIT

A styled dropdown select input with label, hint, error states, and a sub-component for options.

A Select built for the TALL stack — Blade, Livewire 3 & 4, Alpine.js and Tailwind CSS 4. Server-rendered by default, dark-mode ready, and WCAG-minded. Drop it in with a single Blade tag: <x-aura::select>

Try it live in the docs Install free

Installation

composer require bluestarsystem/aura-ui

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>

See the full API, props and live examples in the Select documentation.

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.

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`.