Kselect.js — Demo

🔍

Single Select — Searchable

A standard single-value select with live search filtering. Includes an optional clear button.

Demo

Value: —

const ks1 = Kselect.init('#single-basic')[0];

☑️

Multi Select with Checkboxes

Multi-value select with checkbox indicators. Selected values appear as removable tags inline in the control.

Demo

Values: —

const ks2 = Kselect.init('#multi-basic')[0];

🔢

Selection Limit — maxSelect

Cap the number of items a user can pick. When the limit is hit, remaining options dim out and an amber notice appears in the dropdown so the user knows why.

Demo — pick up to 3 toppings

Selected: —

const ksMaxSelect = Kselect.init('#max-select-demo', {
  maxSelect: 3,
  maxSelectText: 'Max {n} toppings',
})[0];

📦

Collapse selected to a summary — summarizeSelected

Show a summary like "{n} selected" instead of a row of tags. Set to 'auto' (the default) to collapse only when the tags would wrap, 'off' to always show every tag, or a number to collapse once the count exceeds it. The label template is configurable via summarizeSelectedText. This demo uses a threshold of 1 with a custom label — pick one item to see the tag, two or more to see "{n} Channels Applied".

Demo — pick notification channels

Selected: —

const ksSummarize = Kselect.init('#summarize-demo', {
  summarizeSelected: 1,
  summarizeSelectedText: '{n} Channels Applied',
})[0];

📂

Optgroups — Collapsible

Options organised into labelled groups. Click the group header to collapse/expand. Search automatically expands matching groups.

Demo

Selected: —

const ks3 = Kselect.init('#optgroup-select', {
  collapseGroups: false,
})[0];

📁

Optgroups — Collapsed by Default

Same structure but groups start collapsed. Useful when you have many groups and want a compact initial view.

Demo

Value: —

const ks4 = Kselect.init('#optgroup-collapsed', {
  collapseGroups: true,
})[0];

🔒

Disabled States

The whole control can be disabled, or individual options can be marked disabled.

Disabled control

Disabled options

// Disabled control (respects the disabled attribute on the <select>)
const ks5 = Kselect.init('#disabled-control')[0];

// Individual disabled options (respects disabled on each <option>)
const ks6 = Kselect.init('#disabled-options')[0];

// Enable / disable via the API
ks5.disable();
ks5.enable();

🔄

Dynamic Sync

The underlying <select> is updated programmatically. Dispatch kselect:sync to force the widget to reflect changes.

Demo

// After modifying the select DOM:
const evt = new Event('kselect:sync');
selectEl.dispatchEvent(evt);
        

const ks7 = Kselect.init('#sync-demo')[0];

// Later, after adding/removing <option> elements:
const selectEl = document.getElementById('sync-demo');
selectEl.dispatchEvent(new Event('kselect:sync'));

// Or via the instance:
ks7.refresh();

🎨

Custom Themes via CSS Variables

Override CSS custom properties on the wrapper element to create any look.

Dark theme (Catppuccin)

Green accent theme

/* Override on the wrapper or a parent: */
.my-theme {
  --ks-color-border-focus: #10b981;
  --ks-color-option-selected: #10b981;
  --ks-color-tag-bg: #ecfdf5;
  --ks-color-tag-text: #059669;
  /* ... and more */
}
        

// No special options needed — theming is purely via CSS variables
const ks8 = Kselect.init('#theme-dark')[0];
const ks9 = Kselect.init('#theme-green')[0];

✅

Select All Checkbox

A "Select all" row at the top of the dropdown. It reflects checked / indeterminate / unchecked state as items are toggled individually.

Demo

Selected: —

const ksSelectAll = Kselect.init('#select-all-demo', {
  selectAll: true,
})[0];

☑️

Select All per Optgroup

Each optgroup gets its own "Select all" row. Both global and per-group select-all can be combined.

Demo

Selected: —

const ksSelectAllGroups = Kselect.init('#select-all-groups-demo', {
  selectAll: true,
  selectAllGroups: true,
})[0];

📡

Events

Listen for native change and custom kselect:change, kselect:open, kselect:close events.

Demo

Event log

Waiting for events…

selectEl.addEventListener('kselect:change', e => {
  console.log('new value:', ks.getValue());
});
        

const ks10 = Kselect.init('#event-demo')[0];
const selectEl = document.getElementById('event-demo');

selectEl.addEventListener('change', () => { /* native change */ });
selectEl.addEventListener('kselect:change', () => {
  console.log(ks10.getValue());
});
selectEl.addEventListener('kselect:open',   () => { /* dropdown opened */ });
selectEl.addEventListener('kselect:close',  () => { /* dropdown closed */ });

🔔

Native change event — alert test

A plain addEventListener('change', …) on the underlying <select> — no kselect API involved. Select an item to see if the native event fires.

Demo — select an item to trigger an alert

const ksChangeEvent = Kselect.init('#change-event-demo')[0];
const changeEventEl = document.getElementById('change-event-demo');

changeEventEl.addEventListener('change', function () {
  const values = ksChangeEvent.getValue();
  alert('change fired! values: ' + values.join(', '));
});

📱

Native picker on touch devices

Set nativeOnMobile: true to fall back to the OS picker on phones and tablets. Open this page on a phone to see the difference — on desktop you still get the full custom widget.

Demo

Selected: —

const ks = Kselect.init('#native-mobile-demo', {
  nativeOnMobile: true,
})[0];

// All API methods still work on either device
ks.getValue();
ks.setValue('cherry');

📱

Native picker on touch devices (multi)

nativeOnMobile: true works for multi-selects too. On phones, users get the OS-native multi-select UI (a stacked list on iOS); on desktop, the full custom widget with checkboxes and tag pills.

Demo

Selected: —

const ks = Kselect.init('#native-mobile-multi-demo', {
  nativeOnMobile: true,
})[0];

// getValue() returns an array for multi selects, in either mode
ks.getValue();          // → ['cheese', 'olives']
ks.setValue(['cheese', 'mushrooms']);

✨

HTML Option Labels — allowHtml: true

With allowHtml enabled (the default), HTML markup inside <option> tags is rendered live — bold text, colours, flags, icons, whatever you put in.

Demo

Selected: —

<!-- HTML is written directly inside <option> tags -->
<option value="bold"><strong>Bold text</strong></option>
<option value="colored"><span style="color:#e11d48">Coloured</span></option>

const ksAllowHtml = Kselect.init('#allow-html-demo', {
  allowHtml: true, // default — can be omitted
})[0];

🔒

HTML Option Labels — allowHtml: false

With allowHtml: false, HTML tags are shown as literal text. Useful when option content comes from user input or untrusted sources.

Demo — same options, tags shown as text

Selected: —

const ksNoHtml = Kselect.init('#no-html-demo', {
  allowHtml: false,
})[0];