fxd-select Demo

Bootstrap-friendly select enhancer with search, optgroups, and keyboard navigation.

View no-Bootstrap demo

Basic Select
Plain enhancement with default options.
// Default init
new FxdSelect(document.querySelector('#demo-basic'));
Search + Custom Placeholder
Search enabled with custom placeholders.
// Search + placeholder
new FxdSelect(document.querySelector('#demo-search'), {
  placeholder: 'Pick a language',
  filterPlaceholder: 'Type to search',
});
Optgroups
Group headers stay visible while filtering.
// Optgroups
new FxdSelect(document.querySelector('#demo-groups'), { maxHeight: '10em' });
Disabled Options
Disabled options are respected.
// Disabled option is not selectable
new FxdSelect(document.querySelector('#demo-disabled'));
Multi-Select + Clearable
Pill display with selection count.
// Multi-select with pills
new FxdSelect(document.querySelector('#demo-multi'), {
  maxDisplayItems: 2,
  placeholder: 'Pick drinks',
});
Selection Count Style
Count badge for compact displays.
// Count-only display
new FxdSelect(document.querySelector('#demo-count'), {
  multiValueStyle: 'count',
  selectionCountClass: 'badge bg-primary',
  selectionCountTemplate: (count) => `${count} picks`,
});
Custom Render Option
Render badges inside items and a custom value.
// Custom rendering
new FxdSelect(document.querySelector('#demo-render'), {
  renderOption: (opt) => {
    const badge = document.createElement('span');
    badge.className = 'badge bg-dark-subtle text-dark me-2';
    badge.textContent = opt.value.toUpperCase();
    const wrap = document.createElement('span');
    wrap.append(badge, opt.label);
    return wrap;
  },
  renderValue: (model) => {
    const s = model.find((o) => o.selected);
    return s ? `Plan: ${s.label}` : 'Pick a plan';
  },
});