Stable

Select Orion

An advanced select (select2-like): progressive enhancement of a native <select> — searchable menu in the top layer, rich options (icon + sublabel), groups, multi with chips, clear button. Requires ng_select_orion.js.

1 · Single (search + clear)

Wrap a native <select> in .ng-select-orion[data-ng-select-orion]. The native control stays the source of truth; the component enhances it.

index.html
<div class="ng-select-orion" data-ng-select-orion data-clearable data-placeholder="Pick a city…">
    <select class="ng-select ng-select-orion-native" name="city">
        <option value="">Pick a city…</option>
        <option value="RM">Rome</option>
        <option value="MI">Milan</option>
        <option value="NA">Naples</option>
    </select>
</div>
Live preview

2 · Multi, groups & rich options

Add multiple for chips. Use <optgroup> for groups, and data-icon (Phosphor) / data-sublabel on an <option> for richer items.

index.html
<div class="ng-select-orion" data-ng-select-orion data-clearable data-placeholder="Add…">
    <select class="ng-select ng-select-orion-native" name="tech" multiple>
        <optgroup label="Frontend">
            <option value="js" data-icon="ph-file-js">JavaScript</option>
            <option value="css" data-icon="ph-paint-brush">CSS</option>
        </optgroup>
        <optgroup label="Backend">
            <option value="php" data-icon="ph-elephant" data-sublabel="server">PHP</option>
        </optgroup>
    </select>
</div>
Live preview

Reference

Root attributes

data-ng-select-orionMarks the root for enhancement (required).
data-placeholderPlaceholder text (overrides the empty <option>).
data-clearableAdds a clear (✕) button.
data-searchable="0"Disables the in-menu search (default: on).

Sizes

.ng-select-orion-sm.ng-select-orion-lg

Events (on the root, no bubble)

ng:select-orion:openng:select-orion:closeng:select-orion:changeng:select-orion:addng:select-orion:remove

Instance API (el.__ngSelectOrion)

.add(v).remove(v).clear().getValues().setValue(v)

Requires ng_select_orion.js in your foot. Classes are .ng-select-orion-* (no collision with the form .ng-select).