Select Component

A native HTML select element wrapper with enhanced styling, validation states, and support for both array-based and slot-based options.

Props

• label - string - Label text above the select
• name - string - Input name attribute
• id - string|null - Custom ID (auto-generated if not provided)
• value - string - Selected value
• placeholder - string - Placeholder text for the select
• options - array - Options array in ['value' => 'label'] format
• hint - string - Helper text
• error - bool - Error state
• errorMessage - string - Error message
• required - bool - Required field
• disabled - bool - Disabled state
• size - string|null - 'sm' | 'lg' | null (default: null)

Slots

• default - Custom option elements (can use <optgroup> for grouping)

Sizes

• sm - Small padding and text size
• default - Standard padding and text size
• lg - Large padding and text size

Features

• • Native HTML select element
• • Array-based options support
• • Slot-based custom options
• • Optgroup support via slots
• • Size options (sm, default, lg)
• • Error and validation states
• • Disabled state support
• • Custom arrow styling
• • Dark mode support
• • Responsive design

Common Use Cases

<x-select 
    label="Country" 
    name="country" 
    :options="['us' => 'United States', 'uk' => 'United Kingdom']" 
/>

<x-select 
    label="Country" 
    name="country" 
    :options="['us' => 'United States', 'uk' => 'United Kingdom']" 
    value="us"
/>

<x-select label="Category" name="category">
    <optgroup label="Fruits">
        <option value="apple">Apple</option>
        <option value="banana">Banana</option>
    </optgroup>
    <optgroup label="Vegetables">
        <option value="carrot">Carrot</option>
        <option value="potato">Potato</option>
    </optgroup>
</x-select>