Z

Select

Native select dropdown styled to match the design system. Supports options with labels, values, disabled states, and optional placeholder.

Component Props

Prop Type Default Description
name string required Input name attribute
options array [] Array of options (see format below)
value mixed null Selected value
placeholder string null Optional empty option label
state string 'default' Visual state: default, error, success, disabled
ariaDescribedby string null ID of helper/error text element
class string '' Additional wrapper classes

Options Format: Array of arrays with keys: 

[
    ['value' => '1', 'label' => 'Option 1'],
    ['value' => '2', 'label' => 'Option 2', 'disabled' => true],
]

States

Default

Error

Please select a risk level

Success

Preference saved

Disabled

This field cannot be changed

Real-World Examples

Location Selector

Language Selector

Alert Frequency

With Disabled Options

Usage Example

Basic Usage

<x-building-blocks.select
    name="country"
    placeholder="Select a country"
    :options="[
        ['value' => 'us', 'label' => 'United States'],
        ['value' => 'mx', 'label' => 'Mexico'],
    ]"
/>

With Pre-selected Value

<x-building-blocks.select
    name="language"
    value="en"
    :options="[
        ['value' => 'en', 'label' => 'English'],
        ['value' => 'es', 'label' => 'Español'],
    ]"
/>

With Error State

<x-building-blocks.select
    name="category"
    state="error"
    placeholder="Select category"
    :options="$categories"
    ariaDescribedby="category-error"
/>
<p id="category-error" class="text-error-600">
    Please select a category
</p>

With Disabled Options

<x-building-blocks.select
    name="plan"
    :options="[
        ['value' => 'free', 'label' => 'Free'],
        ['value' => 'pro', 'label' => 'Pro'],
        ['value' => 'enterprise', 'label' => 'Enterprise', 'disabled' => true],
    ]"
/>

Key Features

  • Native Select: Uses native HTML select for best performance and accessibility
  • Custom Styling: Styled to match design system with custom chevron icon
  • Flexible Options: Supports simple arrays or detailed option objects
  • Disabled Options: Individual options can be disabled
  • Placeholder Support: Optional empty option for "Select..." prompts
  • WCAG 2.1 AA: Fully accessible with proper ARIA attributes

Best Practices

Do:

  • Use clear, descriptive option labels
  • Include a placeholder for optional selections
  • Keep option lists reasonably short (under 15 items)
  • Order options logically (alphabetically, by frequency, etc.)
  • Use disabled options sparingly and with clear reasoning
  • Provide helper text for context when needed

Don't:

  • Don't use select for very long lists (consider autocomplete instead)
  • Don't use select for binary choices (use radio buttons)
  • Don't pre-select options unless there's a clear default
  • Don't use vague labels like "Option 1", "Option 2"
  • Don't nest optgroups too deeply (keep it simple)