Local & tags — single with search, multiple as tags (live)
selekt-max-tags-visible="3" — beyond 3 the rest collapse to a count.selekt-max-tags-visible="0" — no tags, only "N selected" (dense toolbars, column pickers).Remote & dependent — lazy options from an endpoint, chained fields
selekt-depends-on + selekt-depends-param — disabled until the country exists, reloads (and clears) on change.Display modes — switch, modal, hierarchy, create
Groups + nested children from the endpoint's tree shape.
selekt-create — a miss offers "add"; the endpoint returns the new option.The rules
- A real
<select>+ theselektattribute; init once per page withg.selekt('select[selekt]')— per-element config lives inselekt-*attributes. The native element stays the form value — validator and former see it like any field. - Use selekt when the options need SEARCH, TAGS or a REMOTE source; a plain
.form-selectis right for short static lists (forms). - Picking the display mode: the default dropdown almost always;
switchfor 2–4 short static choices that read better inline;modalfor LARGE or hierarchical sets (comfortable on touch);complexwhen the endpoint returns a tree (groups, children);selekt-createonly where users may grow the list (tags, labels). - Chained fields ride
selekt-depends-on/selekt-depends-param— never wire your own change handlers for reloads. - Set values from code through the instance (
el.selekt.setValue(...)) — never by poking the DOM. - Docs:
templates/app/docs/libs/selekt.md; every option + edge cases: /tests/selekt.