Preview

Controls

Disabled

Theme

Surface

Direction

Viewport

Device view renders in an isolated frame so real responsive breakpoints apply. Switch to Full for overflowing popovers.

Installation

terminal

php artisan ui:add select

Registry contract

Install confidence

php artisan ui:add select writes only the generated targets below. The CLI validates each file hash before writing and prompts before replacing local changes unless --force is used.

Version: 1.3.0
License: open
Stability: stable
Contract: v2
Foundation: ≥ 1.0.0

Type	Generated target
blade	resources/views/components/ui/select.blade.php

Registry dependencies

None.

Package dependencies

composer: jml/brok:^1.0

Guidance

Bounded compact selection

Choose from a bounded option set in limited space.

Use when

Use when users choose among a bounded set and space efficiency matters more than always-visible comparison. Do not use for tiny lists or when users benefit from seeing all options at once.
Selecting one value from a compact list where native platform behavior is desirable.
A server-submitted form needs resilient no-JavaScript behavior.

Avoid when

Use to save space with longer lists; do not hide tiny sets that deserve direct comparison.
Options need search, rich metadata, or custom multi-select behavior; use select-advanced or combobox.
There are only two to five choices that should remain visible; use radio or choicebox.

Task length: micro
Interaction cost: low
Interruptiveness: none
Input precision: constrained
Mobile / touch risk: low
Accessibility risk: medium
Needs background context: No
Comparison needed: No

Preferred alternatives

Radio or checkbox for visible comparison

Anti-patterns

Hiding tiny or high-frequency option sets

Anatomy

root leading icon native select chevron

Theming hooks

select root select icon invalid ring

Canonical examples

default
sizes
states
groups
placeholder
in-form

Related: select-advanced combobox radio field

API

manifest knowledge + registry-derived coverage

Props

Prop	Type / values	Default	Description
name	string\|null	null	Form field name and Laravel validation key.
size	sm\|default\|lg	default	Control height and text size.
invalid	bool\|null	null	Overrides validation-derived invalid state.
disabled	false\|true	false	Documented catalog control used by the preview workbench.
icon	mixed\|null	null	Declared by @props in the registry Blade source.

Slots

default — Native option elements.

Data slots

select select-icon

Capabilities

wcag-2.2-aa-target responsive rtl darkMode localized

Behavior

Uses native browser selection, keyboard, touch, autofill, and form-submission semantics.
Self-wires validation ARIA when nested in x-ui.field with a matching name.
Wraps a native select and keeps browser keyboard/form behavior intact.
Declares registry capability flags: a11y, responsive, rtl, darkMode, localized.

Usage

previews.components.select.default.blade.php Blade

<x-ui.select aria-label="{{ __('Country') }}" class="max-w-sm">
    <option>{{ __('United States') }}</option>
    <option>{{ __('Netherlands') }}</option>
    <option>{{ __('Japan') }}</option>
</x-ui.select>

Accessibility & localization

WCAG 2.2 AA RTL-ready data-slot Keyboard focus-visible Localized labels

Associate the select with a visible label.
Use a disabled empty option for a non-value placeholder.
Uses semantic HTML and a stable data-slot attribute for styling/scripting hooks.
Focus-visible rings use the ring token so keyboard focus is always visible.
Disabled and invalid states are conveyed to assistive tech, not by color alone.
Targets WCAG 2.2 AA; verify contrast in light, dark, admin and customer surfaces above.
Labels go through __() and the component uses logical properties (ms-*, text-start, start-*) so it mirrors correctly — flip the preview to RTL to confirm.

Source

The exact, editable file ui:add writes into your app — copy it or own the whole thing. Previews render this same code; there are no preview-only components.

Changelog

Current version: v1.3.0. See the site changelog for the full release history.

Native Select