Selectra

Alpine.js + Tailwind CSS — No jQuery required

Easy integration: Just add x-data="selectra({...})" and x-selectra to any element. The template renders automatically.

Single Select

Basic single-value selection with search.

Multi Select (Tags)

Select multiple values with removable tags.

Tagging

Type to create new tags on the fly. Supports paste with comma-separated values.

Option Groups

Grouped options with headers.

Remote Loading

Search loads results from a simulated API. Try typing "a", "b", or "c".

Remote Loading (Single)

Search loads results from a simulated API. Try typing "a", "b", or "c".

Max Items Limit

Limited to 3 items maximum.

Native <select> Enhancement

Enhance a standard <select> element — options are read automatically.

Form Field Name

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.

Submitted form data:

Array-Format Options

Pass options as [text, value] tuples — ideal for data from Rails pluck or similar APIs.

Multi Select with Count

Shows number of selected items as a badge instead of individual tags. Selected options display a checkmark in the dropdown.