@selkit/dom

Vanilla-JS renderer for Selkit — the framework-agnostic select toolkit. Mounts a fully-featured select (search, multiple, tagging, keyboard, a11y, dropdown positioning) on top of @selkit/core, with no framework required.

Install

pnpm add @selkit/dom @selkit/themes

Usage

import { createSelkitDom } from '@selkit/dom'
import '@selkit/themes/base.css'

const instance = createSelkitDom(document.getElementById('host'), {
  options: [
    { value: 'a', label: 'Apple' },
    { value: 'b', label: 'Banana' },
  ],
  multiple: true,
  placeholder: 'Pick fruits…',
})

instance.controller.on('change', ({ value }) => console.log(value))

// later
instance.destroy()

It can also enhance an existing native <select>. See the vanilla guide for enhancement mode, dropdownParent, virtual scroll, templates and more.

Docs

📖 cluion.github.io/selkit · 繁體中文

License

MIT