Single Select

Basic single-value selection with search.

Select a country... United States Canada Mexico United Kingdom France Germany Italy Spain Portugal Netherlands Belgium Switzerland Austria Australia New Zealand Japan South Korea China India Brazil Argentina South Africa Nigeria Egypt Sweden Norway Denmark Finland Poland Ireland

Multi Select (Tags)

Select multiple values with removable tags.

JavaScript TypeScript Python Ruby Go Rust Java C# C++ Swift Kotlin PHP Elixir Zig Lua

Tagging (Create New)

Create new tags on the fly. Supports paste with comma-separated values.

bug feature enhancement documentation help wanted

Option Groups

Grouped options with headers.

Choose... Alpha Beta Gamma Delta A B C D One Two Three Four

Remote Loading (Multi)

Load options from API with search. Try typing "a", "b", or "c".

Remote Loading (Single)

Load options from API for single select. Try typing "a", "b", or "c".

Max Items Limit

Limited to 3 items maximum.

United States Canada Mexico United Kingdom France Germany Italy Spain Portugal Netherlands Belgium Switzerland Austria Australia New Zealand Japan South Korea China India Brazil Argentina South Africa Nigeria Egypt Sweden Norway Denmark Finland Poland Ireland

Native <select> Enhancement

Place x-selectra directly on a <select> — options are read automatically. Works without JavaScript!

Select a fruit... Apple Banana Cherry Grape Mango Orange Peach Strawberry

Form Field Name

Use a native <select> with multiple to submit form data. Selectra enhances the UI while maintaining standard HTML semantics.

JavaScript TypeScript Python Ruby Go Rust Java C# C++ Swift Kotlin PHP Elixir Zig Lua

Submit

Submitted form data:

Standard Select

Selectra works seamlessly with standard semantic HTML <select> elements. No configuration needed for simple cases.

Select a provider... Java Python Ruby Rust Kotlin Go Swift

Multi Select with Count

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

United States Canada Mexico United Kingdom France Germany Italy Spain Portugal Netherlands Belgium Switzerland Austria Australia New Zealand Japan South Korea China India Brazil Argentina South Africa Nigeria Egypt Sweden Norway Denmark Finland Poland Ireland

Direct on <select>

Place x-selectra directly on a <select> — no wrapper <div> needed. The plugin auto-wraps it.

Pick a fruit... Apple Banana Cherry Grape Mango

Direct Multi-select on <select>

A <select multiple> with x-selectra directly on it. Mode is auto-detected from the multiple attribute.

JavaScript TypeScript Python Ruby Go Rust Java C# C++ Swift Kotlin PHP Elixir Zig Lua