Alpine.js + Tailwind CSS — No jQuery required
x-data="selectra({...})"
and x-selectra to any element. The template renders automatically.
Basic single-value selection with search.
Select multiple values with removable tags.
Type to create new tags on the fly. Supports paste with comma-separated values.
Grouped options with headers.
Search loads results from a simulated API. Try typing "a", "b", or "c".
Search loads results from a simulated API. Try typing "a", "b", or "c".
Limited to 3 items maximum.
Enhance a standard <select> element — options are read
automatically.
Use the name option to auto-create a hidden input for form submission — no <select> needed. Select values and click Submit to see the form data.
Pass options as [text, value] tuples — ideal for data from Rails pluck or similar APIs.
Shows number of selected items as a badge instead of individual tags. Selected options display a checkmark in the dropdown.