Select

Select Component

The Select component provides a styled dropdown for single value selection with optional label, hint, tooltip, and validation integration. It supports custom icons inside the select box and dynamically generates unique IDs for accessibility.

Example Usage (Single Select)

<x-select tooltip="Choose an option">
    <option value="1">Option One</option>
    <option value="2">Option Two</option>
    <option value="3">Option Three</option>
</x-select>

Props (Single Select)

• label (string|null)
  Optional label text displayed above the select dropdown.

• hint (string|null)
  Optional helper text shown below the select for additional guidance.

• uuid (string|null)
  Unique identifier used for the select and label elements for accessibility. Automatically generated if not provided.

• icon (string|null)
  CSS class for an icon displayed inside the select on the right side.

• tooltip (string|null)
  Tooltip text shown on hover over the select dropdown.

• showRequired (bool, default: true)
  Displays a red asterisk (*) next to the label if the field is required.

• showValidation (bool, default: true)
  Enables displaying validation error messages when integrated with Livewire.

---

Select.Multiple Component

The Select.Multiple component is a custom multi-select dropdown built with Alpine.js. It allows users to select multiple options from a list with checkboxes, showing the selected items as comma-separated text inside the button. It supports keyboard navigation, dynamic filtering by first keypress, tooltips, and Livewire integration for reactive data binding.

Example Usage (Multiple Select)

<x-select.multiple
    label="Skills"
    tooltip="Select your skills"
    wire:model="selectedSkills"
    required
    hint="Select one or more skills">
    <option value="1">Option One</option>
    <option value="2">Option Two</option>
    <option value="3">Option Three</option>
</x-select.multiple>

Warning

For multiple select, wire:model must be bound to an array property initialized in your Livewire component.

Props (Multiple Select)

• label (string|null)
  Optional label displayed above the multi-select button.

• placeholder (string, default: Select options...)
  Placeholder text shown inside the button when no options are selected.

• uuid (string|null)
  Unique ID used for accessibility and internal references. Automatically generated if not provided.

• hint (string|null)
  Helper text shown below the component.

• chevronIcon (string, default: "icon-chevron-down")
  CSS class for the dropdown arrow icon shown on the button.

• showRequired (bool, default: true)
  Shows a red asterisk (*) next to the label if the field is required.

• showValidation (bool, default: true)
  Shows validation error messages when using Livewire.

• tooltip (string|null)
  Tooltip text shown on hover over the button.

• selectedOptions (array)
  Initial array of selected values (used if not using Livewire).

• selectAllText (string, default: Select All)
  Text shown to select all options

• deselectAllText (string, default: Deselect All)
  Text shown to deselect all options

Overview

The Select component provides a basic single-selection dropdown styled with Tailwind CSS, accessible and enhanced with optional icons and tooltips. The Select.Multiple component builds on this by offering a keyboard-navigable, checkbox-driven multi-select dropdown with reactive support via Livewire. Both components support validation and accessibility best practices including unique IDs, labels, and screen reader support.