Classic Theme

The Classic theme provides a traditional, understated select appearance with subtle enhancements. It is designed for applications where the select should blend in with standard native form controls.

Usage

CDN

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

npm

import 'dot-select/dist/css/themes/classic.min.css';

SCSS

@import 'dot-select/src/scss/themes/classic';

Characteristics

The Classic theme differs from the Default theme in several ways:

Feature	Default Theme	Classic Theme
Border radius	6px	3px
Focus indicator	Blue ring	Blue bottom border
Selected items	Pill-shaped badges	Flat inline text
Dropdown shadow	Elevated	Subtle
Font size	0.875rem	Inherits from parent
Arrow icon	Chevron SVG	CSS triangle

Example

<div style="max-width: 400px; font-family: Georgia, serif;">
  <label style="display: block; margin-bottom: 4px;">Department</label>
  <select data-dot-select data-searchable="true" data-placeholder="Select department...">
    <option value="">Select department...</option>
    <option value="eng">Engineering</option>
    <option value="design">Design</option>
    <option value="marketing">Marketing</option>
    <option value="sales">Sales</option>
    <option value="hr">Human Resources</option>
  </select>
</div>

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 (
    <div style="max-width: 400px; font-family: Georgia, serif;">
      <label style="display: block; margin-bottom: 4px;">Department</label>
      <select data-dot-select data-searchable="true" data-placeholder="Select department...">
        <option value="">Select department...</option>
        <option value="eng">Engineering</option>
        <option value="design">Design</option>
        <option value="marketing">Marketing</option>
        <option value="sales">Sales</option>
        <option value="hr">Human Resources</option>
      </select>
    </div>
  )
}

<template>
  <div style="max-width: 400px; font-family: Georgia, serif;">
    <label style="display: block; margin-bottom: 4px;">Department</label>
    <select data-dot-select data-searchable="true" data-placeholder="Select department...">
      <option value="">Select department...</option>
      <option value="eng">Engineering</option>
      <option value="design">Design</option>
      <option value="marketing">Marketing</option>
      <option value="sales">Sales</option>
      <option value="hr">Human Resources</option>
    </select>
  </div>
</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>

Multiple Select (Classic Style)

In multiple mode, the Classic theme displays selected items as a comma-separated list rather than individual badges:

<select data-dot-select multiple data-placeholder="Select departments...">
  <option value="eng" selected>Engineering</option>
  <option value="design" selected>Design</option>
  <option value="marketing">Marketing</option>
  <option value="sales">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 multiple data-placeholder="Select departments...">
      <option value="eng" selected>Engineering</option>
      <option value="design" selected>Design</option>
      <option value="marketing">Marketing</option>
      <option value="sales">Sales</option>
    </select>
  )
}

<template>
  <select data-dot-select multiple data-placeholder="Select departments...">
    <option value="eng" selected>Engineering</option>
    <option value="design" selected>Design</option>
    <option value="marketing">Marketing</option>
    <option value="sales">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>

This renders as: Engineering, Design in the control, rather than individual badge elements.

Variables

Variable	Value	Description
$ds-primary-color	#2563eb	Primary accent
$ds-border-color	#c6c6c6	Border color
$ds-border-radius	3px	Border radius
$ds-font-family	inherit	Inherits from parent
$ds-font-size	inherit	Inherits from parent
$ds-dropdown-shadow	0 2px 4px rgba(0,0,0,0.08)	Subtle shadow
$ds-focus-border-color	#2563eb	Bottom border on focus

Customizing

$ds-primary-color: #059669;
$ds-border-radius: 0;

@import 'dot-select/src/scss/themes/classic';

TIP

The Classic theme is a good choice for enterprise applications, content management systems, and any project where a minimal, traditional form appearance is preferred.