Getting Started

DotSelect is a zero-dependency, HTML-first select replacement library. It transforms native <select> elements into rich, searchable, and fully accessible dropdowns — all configured through HTML attributes.

Why DotSelect?

Modern web applications need powerful select components, but most libraries come with heavy trade-offs:

• jQuery dependency — Many popular select libraries still require jQuery
• JavaScript boilerplate — Most require manual initialization and configuration objects
• Framework lock-in — Built exclusively for React, Vue, or Angular

DotSelect takes a different approach:

Feature	DotSelect	Select2	Choices.js	Tom Select
Zero dependencies	Yes	jQuery required	No	No
HTML-first config	Yes	No	No	No
AJAX with pagination	Yes	Yes	No	Yes
Chained selects	Built-in	Plugin	No	No
Bundle size (min+gz)	~12 KB	~30 KB	~20 KB	~18 KB
RTL support	Auto-detect	Manual	Limited	Limited

Quick Start

The fastest way to get started is with the CDN. Add these two lines to your HTML:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dot-select@latest/dist/css/dot-select.min.css">
<script src="https://cdn.jsdelivr.net/npm/dot-select@latest/dist/js/dot-select.min.js"></script>

Then add data-dot-select to any <select> element:

<select data-dot-select>
  <option value="">Choose a fruit...</option>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="cherry">Cherry</option>
</select>

import { DotSelect } from 'dot-select'

const ds = new DotSelect('select[data-dot-select]')

// API
ds.getValue()
ds.setValue(['value'])
ds.clear()
ds.destroy()

import { useEffect, useRef } from 'react'
import { DotSelect } from 'dot-select'
import 'dot-select/css'

export default function Select() {
  const ref = useRef(null)

  useEffect(() => {
    const ds = new DotSelect(ref.current)
    return () => ds.destroy()
  }, [])

  return (
    <select data-dot-select>
      <option value="">Choose a fruit...</option>
      <option value="apple">Apple</option>
      <option value="banana">Banana</option>
      <option value="cherry">Cherry</option>
    </select>
  )
}

<template>
  <select data-dot-select>
    <option value="">Choose a fruit...</option>
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="cherry">Cherry</option>
  </select>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { DotSelect } from 'dot-select'
import 'dot-select/css'

const selectRef = ref(null)
let ds = null

onMounted(() => {
  ds = new DotSelect(selectRef.value)
})

onBeforeUnmount(() => {
  ds?.destroy()
})
</script>

That's it. No JavaScript initialization required.

TIP

DotSelect automatically initializes all <select> elements with the data-dot-select attribute on DOMContentLoaded. For elements added dynamically, call DotSelect.init().

How It Works

DotSelect follows a simple principle: your HTML is the configuration.

1. You write a standard <select> element
2. You add data-dot-select to enable DotSelect
3. You add data attributes to configure behavior
4. DotSelect reads those attributes and enhances the element

<!-- A searchable, clearable, multiple select — no JS needed -->
<select
  data-dot-select
  data-placeholder="Pick your languages..."
  data-searchable="true"
  data-allow-clear="true"
  multiple
>
  <option value="js">JavaScript</option>
  <option value="py">Python</option>
  <option value="rb">Ruby</option>
  <option value="go">Go</option>
  <option value="rs">Rust</option>
</select>

import { DotSelect } from 'dot-select'

const ds = new DotSelect('select[data-dot-select]')

// API
ds.getValue()
ds.setValue(['value'])
ds.clear()
ds.destroy()

import { useEffect, useRef } from 'react'
import { DotSelect } from 'dot-select'
import 'dot-select/css'

export default function Select() {
  const ref = useRef(null)

  useEffect(() => {
    const ds = new DotSelect(ref.current)
    return () => ds.destroy()
  }, [])

  return (
    <!-- A searchable, clearable, multiple select — no JS needed -->
    <select
      data-dot-select
      data-placeholder="Pick your languages..."
      data-searchable="true"
      data-allow-clear="true"
      multiple
    >
      <option value="js">JavaScript</option>
      <option value="py">Python</option>
      <option value="rb">Ruby</option>
      <option value="go">Go</option>
      <option value="rs">Rust</option>
    </select>
  )
}

<template>
  <!-- A searchable, clearable, multiple select — no JS needed -->
  <select
    data-dot-select
    data-placeholder="Pick your languages..."
    data-searchable="true"
    data-allow-clear="true"
    multiple
  >
    <option value="js">JavaScript</option>
    <option value="py">Python</option>
    <option value="rb">Ruby</option>
    <option value="go">Go</option>
    <option value="rs">Rust</option>
  </select>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { DotSelect } from 'dot-select'
import 'dot-select/css'

const selectRef = ref(null)
let ds = null

onMounted(() => {
  ds = new DotSelect(selectRef.value)
})

onBeforeUnmount(() => {
  ds?.destroy()
})
</script>

Next Steps

• Installation — npm, CDN, and ES Module setup
• Basic Usage — Single select, multiple select, and common patterns
• AJAX — Remote data loading with search and pagination
• Configuration Reference — Full list of all data attributes