Single Select Examples

Basic Single Select

A minimal single-select dropdown:

<select data-dot-select data-placeholder="Choose a fruit...">
  <option value="">Choose a fruit...</option>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="cherry">Cherry</option>
  <option value="grape">Grape</option>
  <option value="mango">Mango</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 data-placeholder="Choose a fruit...">
      <option value="">Choose a fruit...</option>
      <option value="apple">Apple</option>
      <option value="banana">Banana</option>
      <option value="cherry">Cherry</option>
      <option value="grape">Grape</option>
      <option value="mango">Mango</option>
    </select>
  )
}

<template>
  <select data-dot-select data-placeholder="Choose a fruit...">
    <option value="">Choose a fruit...</option>
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="cherry">Cherry</option>
    <option value="grape">Grape</option>
    <option value="mango">Mango</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>

Searchable Select

Enable filtering with data-searchable:

<select data-dot-select data-searchable="true" data-placeholder="Search countries...">
  <option value="">Search countries...</option>
  <option value="ar">Argentina</option>
  <option value="au">Australia</option>
  <option value="br">Brazil</option>
  <option value="ca">Canada</option>
  <option value="cn">China</option>
  <option value="fr">France</option>
  <option value="de">Germany</option>
  <option value="in">India</option>
  <option value="jp">Japan</option>
  <option value="mx">Mexico</option>
  <option value="uk">United Kingdom</option>
  <option value="us">United States</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 data-searchable="true" data-placeholder="Search countries...">
      <option value="">Search countries...</option>
      <option value="ar">Argentina</option>
      <option value="au">Australia</option>
      <option value="br">Brazil</option>
      <option value="ca">Canada</option>
      <option value="cn">China</option>
      <option value="fr">France</option>
      <option value="de">Germany</option>
      <option value="in">India</option>
      <option value="jp">Japan</option>
      <option value="mx">Mexico</option>
      <option value="uk">United Kingdom</option>
      <option value="us">United States</option>
    </select>
  )
}

<template>
  <select data-dot-select data-searchable="true" data-placeholder="Search countries...">
    <option value="">Search countries...</option>
    <option value="ar">Argentina</option>
    <option value="au">Australia</option>
    <option value="br">Brazil</option>
    <option value="ca">Canada</option>
    <option value="cn">China</option>
    <option value="fr">France</option>
    <option value="de">Germany</option>
    <option value="in">India</option>
    <option value="jp">Japan</option>
    <option value="mx">Mexico</option>
    <option value="uk">United Kingdom</option>
    <option value="us">United States</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>

Clearable Select

Allow the user to clear the selection:

<select data-dot-select data-allow-clear="true" data-placeholder="Select priority (optional)...">
  <option value="">Select priority (optional)...</option>
  <option value="low">Low</option>
  <option value="medium">Medium</option>
  <option value="high">High</option>
  <option value="critical">Critical</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 data-allow-clear="true" data-placeholder="Select priority (optional)...">
      <option value="">Select priority (optional)...</option>
      <option value="low">Low</option>
      <option value="medium">Medium</option>
      <option value="high">High</option>
      <option value="critical">Critical</option>
    </select>
  )
}

<template>
  <select data-dot-select data-allow-clear="true" data-placeholder="Select priority (optional)...">
    <option value="">Select priority (optional)...</option>
    <option value="low">Low</option>
    <option value="medium">Medium</option>
    <option value="high">High</option>
    <option value="critical">Critical</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>

With Optgroups

Organize options into groups:

<select data-dot-select data-searchable="true" data-placeholder="Choose a programming language...">
  <option value="">Choose a programming language...</option>
  <optgroup label="Compiled">
    <option value="c">C</option>
    <option value="cpp">C++</option>
    <option value="go">Go</option>
    <option value="rust">Rust</option>
    <option value="java">Java</option>
  </optgroup>
  <optgroup label="Interpreted">
    <option value="python">Python</option>
    <option value="ruby">Ruby</option>
    <option value="php">PHP</option>
    <option value="perl">Perl</option>
  </optgroup>
  <optgroup label="Web">
    <option value="javascript">JavaScript</option>
    <option value="typescript">TypeScript</option>
  </optgroup>
</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 data-searchable="true" data-placeholder="Choose a programming language...">
      <option value="">Choose a programming language...</option>
      <optgroup label="Compiled">
        <option value="c">C</option>
        <option value="cpp">C++</option>
        <option value="go">Go</option>
        <option value="rust">Rust</option>
        <option value="java">Java</option>
      </optgroup>
      <optgroup label="Interpreted">
        <option value="python">Python</option>
        <option value="ruby">Ruby</option>
        <option value="php">PHP</option>
        <option value="perl">Perl</option>
      </optgroup>
      <optgroup label="Web">
        <option value="javascript">JavaScript</option>
        <option value="typescript">TypeScript</option>
      </optgroup>
    </select>
  )
}

<template>
  <select data-dot-select data-searchable="true" data-placeholder="Choose a programming language...">
    <option value="">Choose a programming language...</option>
    <optgroup label="Compiled">
      <option value="c">C</option>
      <option value="cpp">C++</option>
      <option value="go">Go</option>
      <option value="rust">Rust</option>
      <option value="java">Java</option>
    </optgroup>
    <optgroup label="Interpreted">
      <option value="python">Python</option>
      <option value="ruby">Ruby</option>
      <option value="php">PHP</option>
      <option value="perl">Perl</option>
    </optgroup>
    <optgroup label="Web">
      <option value="javascript">JavaScript</option>
      <option value="typescript">TypeScript</option>
    </optgroup>
  </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>

Pre-Selected Value

Start with a value already selected:

<select data-dot-select data-allow-clear="true" data-placeholder="Choose a timezone...">
  <option value="">Choose a timezone...</option>
  <option value="utc-8">Pacific Time (UTC-8)</option>
  <option value="utc-5">Eastern Time (UTC-5)</option>
  <option value="utc+0" selected>UTC</option>
  <option value="utc+1">Central European (UTC+1)</option>
  <option value="utc+8">China Standard (UTC+8)</option>
  <option value="utc+9">Japan Standard (UTC+9)</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 data-allow-clear="true" data-placeholder="Choose a timezone...">
      <option value="">Choose a timezone...</option>
      <option value="utc-8">Pacific Time (UTC-8)</option>
      <option value="utc-5">Eastern Time (UTC-5)</option>
      <option value="utc+0" selected>UTC</option>
      <option value="utc+1">Central European (UTC+1)</option>
      <option value="utc+8">China Standard (UTC+8)</option>
      <option value="utc+9">Japan Standard (UTC+9)</option>
    </select>
  )
}

<template>
  <select data-dot-select data-allow-clear="true" data-placeholder="Choose a timezone...">
    <option value="">Choose a timezone...</option>
    <option value="utc-8">Pacific Time (UTC-8)</option>
    <option value="utc-5">Eastern Time (UTC-5)</option>
    <option value="utc+0" selected>UTC</option>
    <option value="utc+1">Central European (UTC+1)</option>
    <option value="utc+8">China Standard (UTC+8)</option>
    <option value="utc+9">Japan Standard (UTC+9)</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>

Disabled Options

Prevent selection of specific options:

<select data-dot-select data-placeholder="Choose a subscription plan...">
  <option value="">Choose a subscription plan...</option>
  <option value="free">Free — $0/month</option>
  <option value="starter">Starter — $9/month</option>
  <option value="pro">Pro — $29/month</option>
  <option value="enterprise" disabled>Enterprise — Contact Sales</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 data-placeholder="Choose a subscription plan...">
      <option value="">Choose a subscription plan...</option>
      <option value="free">Free — $0/month</option>
      <option value="starter">Starter — $9/month</option>
      <option value="pro">Pro — $29/month</option>
      <option value="enterprise" disabled>Enterprise — Contact Sales</option>
    </select>
  )
}

<template>
  <select data-dot-select data-placeholder="Choose a subscription plan...">
    <option value="">Choose a subscription plan...</option>
    <option value="free">Free — $0/month</option>
    <option value="starter">Starter — $9/month</option>
    <option value="pro">Pro — $29/month</option>
    <option value="enterprise" disabled>Enterprise — Contact Sales</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>

Full-Featured Single Select

Combining multiple features:

<select
  data-dot-select
  data-searchable="true"
  data-allow-clear="true"
  data-size="lg"
  data-placeholder="Search and select a team member..."
  data-no-results-text="No team members match your search"
>
  <option value="">Search and select a team member...</option>
  <optgroup label="Engineering">
    <option value="alice">Alice Johnson — Frontend</option>
    <option value="bob">Bob Smith — Backend</option>
    <option value="carol">Carol Williams — DevOps</option>
  </optgroup>
  <optgroup label="Design">
    <option value="david">David Brown — UI/UX</option>
    <option value="eve">Eve Davis — Graphic Design</option>
  </optgroup>
  <optgroup label="Product">
    <option value="frank">Frank Miller — Product Manager</option>
    <option value="grace">Grace Lee — Analyst</option>
  </optgroup>
</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
      data-searchable="true"
      data-allow-clear="true"
      data-size="lg"
      data-placeholder="Search and select a team member..."
      data-no-results-text="No team members match your search"
    >
      <option value="">Search and select a team member...</option>
      <optgroup label="Engineering">
        <option value="alice">Alice Johnson — Frontend</option>
        <option value="bob">Bob Smith — Backend</option>
        <option value="carol">Carol Williams — DevOps</option>
      </optgroup>
      <optgroup label="Design">
        <option value="david">David Brown — UI/UX</option>
        <option value="eve">Eve Davis — Graphic Design</option>
      </optgroup>
      <optgroup label="Product">
        <option value="frank">Frank Miller — Product Manager</option>
        <option value="grace">Grace Lee — Analyst</option>
      </optgroup>
    </select>
  )
}

<template>
  <select
    data-dot-select
    data-searchable="true"
    data-allow-clear="true"
    data-size="lg"
    data-placeholder="Search and select a team member..."
    data-no-results-text="No team members match your search"
  >
    <option value="">Search and select a team member...</option>
    <optgroup label="Engineering">
      <option value="alice">Alice Johnson — Frontend</option>
      <option value="bob">Bob Smith — Backend</option>
      <option value="carol">Carol Williams — DevOps</option>
    </optgroup>
    <optgroup label="Design">
      <option value="david">David Brown — UI/UX</option>
      <option value="eve">Eve Davis — Graphic Design</option>
    </optgroup>
    <optgroup label="Product">
      <option value="frank">Frank Miller — Product Manager</option>
      <option value="grace">Grace Lee — Analyst</option>
    </optgroup>
  </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>

Listening for Changes

Handle selection changes with JavaScript:

<select id="status-select" data-dot-select data-placeholder="Set status...">
  <option value="">Set status...</option>
  <option value="active">Active</option>
  <option value="paused">Paused</option>
  <option value="archived">Archived</option>
</select>

document.querySelector('#status-select').addEventListener('ds:change', (e) => {
  console.log('Status changed to:', e.detail.value);
});

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 id="status-select" data-dot-select data-placeholder="Set status...">
      <option value="">Set status...</option>
      <option value="active">Active</option>
      <option value="paused">Paused</option>
      <option value="archived">Archived</option>
    </select>
  )
}

<template>
  <select id="status-select" data-dot-select data-placeholder="Set status...">
    <option value="">Set status...</option>
    <option value="active">Active</option>
    <option value="paused">Paused</option>
    <option value="archived">Archived</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>