Bootstrap 5 Theme

The Bootstrap 5 theme makes DotSelect match the look and feel of Bootstrap 5 form controls. It uses Bootstrap's design tokens for colors, spacing, borders, and typography.

Usage

CDN

Include Bootstrap 5 CSS first, then the DotSelect Bootstrap theme:

<!-- Bootstrap 5 CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

<!-- DotSelect Bootstrap 5 Theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dot-select@latest/dist/css/themes/bootstrap5.min.css">

<!-- DotSelect JS -->
<script src="https://cdn.jsdelivr.net/npm/dot-select@latest/dist/js/dot-select.min.js"></script>

npm

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

SCSS

// Import Bootstrap variables first
@import 'bootstrap/scss/variables';

// Then import the DotSelect Bootstrap 5 theme
@import 'dot-select/src/scss/themes/bootstrap5';

Integration with Bootstrap Forms

DotSelect inherits Bootstrap's form sizing and validation states:

<div class="mb-3">
  <label for="country" class="form-label">Country</label>
  <select id="country" class="form-select" data-dot-select data-searchable="true" data-placeholder="Select a country...">
    <option value="">Select a country...</option>
    <option value="us">United States</option>
    <option value="ca">Canada</option>
    <option value="uk">United Kingdom</option>
  </select>
</div>

import { DotSelect } from 'dot-select'

const ds = new DotSelect('#country')

// 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 class="mb-3">
      <label for="country" class="form-label">Country</label>
      <select id="country" class="form-select" data-dot-select data-searchable="true" data-placeholder="Select a country...">
        <option value="">Select a country...</option>
        <option value="us">United States</option>
        <option value="ca">Canada</option>
        <option value="uk">United Kingdom</option>
      </select>
    </div>
  )
}

<template>
  <div class="mb-3">
    <label for="country" class="form-label">Country</label>
    <select id="country" class="form-select" data-dot-select data-searchable="true" data-placeholder="Select a country...">
      <option value="">Select a country...</option>
      <option value="us">United States</option>
      <option value="ca">Canada</option>
      <option value="uk">United Kingdom</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>

Form Sizes

The theme respects Bootstrap's .form-select-sm and .form-select-lg classes:

<!-- Small -->
<select class="form-select form-select-sm" data-dot-select>
  <option>Small</option>
</select>

<!-- Default -->
<select class="form-select" data-dot-select>
  <option>Default</option>
</select>

<!-- Large -->
<select class="form-select form-select-lg" data-dot-select>
  <option>Large</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 (
    <!-- Small -->
    <select class="form-select form-select-sm" data-dot-select>
      <option>Small</option>
    </select>
    
    <!-- Default -->
    <select class="form-select" data-dot-select>
      <option>Default</option>
    </select>
    
    <!-- Large -->
    <select class="form-select form-select-lg" data-dot-select>
      <option>Large</option>
    </select>
  )
}

<template>
  <!-- Small -->
  <select class="form-select form-select-sm" data-dot-select>
    <option>Small</option>
  </select>
  
  <!-- Default -->
  <select class="form-select" data-dot-select>
    <option>Default</option>
  </select>
  
  <!-- Large -->
  <select class="form-select form-select-lg" data-dot-select>
    <option>Large</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>

Validation States

Bootstrap validation classes are supported:

<div class="mb-3">
  <label class="form-label">Required Field</label>
  <select class="form-select is-invalid" data-dot-select data-placeholder="Please select...">
    <option value="">Please select...</option>
    <option value="1">Option 1</option>
  </select>
  <div class="invalid-feedback">Please make a selection.</div>
</div>

<div class="mb-3">
  <label class="form-label">Valid Field</label>
  <select class="form-select is-valid" data-dot-select>
    <option value="1" selected>Option 1</option>
  </select>
  <div class="valid-feedback">Looks good!</div>
</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 class="mb-3">
      <label class="form-label">Required Field</label>
      <select class="form-select is-invalid" data-dot-select data-placeholder="Please select...">
        <option value="">Please select...</option>
        <option value="1">Option 1</option>
      </select>
      <div class="invalid-feedback">Please make a selection.</div>
    </div>
    
    <div class="mb-3">
      <label class="form-label">Valid Field</label>
      <select class="form-select is-valid" data-dot-select>
        <option value="1" selected>Option 1</option>
      </select>
      <div class="valid-feedback">Looks good!</div>
    </div>
  )
}

<template>
  <div class="mb-3">
    <label class="form-label">Required Field</label>
    <select class="form-select is-invalid" data-dot-select data-placeholder="Please select...">
      <option value="">Please select...</option>
      <option value="1">Option 1</option>
    </select>
    <div class="invalid-feedback">Please make a selection.</div>
  </div>
  
  <div class="mb-3">
    <label class="form-label">Valid Field</label>
    <select class="form-select is-valid" data-dot-select>
      <option value="1" selected>Option 1</option>
    </select>
    <div class="valid-feedback">Looks good!</div>
  </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>

Input Groups

Use DotSelect inside Bootstrap input groups:

<div class="input-group mb-3">
  <span class="input-group-text">Category</span>
  <select class="form-select" data-dot-select data-placeholder="Choose...">
    <option value="">Choose...</option>
    <option value="tech">Technology</option>
    <option value="science">Science</option>
    <option value="art">Art</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 class="input-group mb-3">
      <span class="input-group-text">Category</span>
      <select class="form-select" data-dot-select data-placeholder="Choose...">
        <option value="">Choose...</option>
        <option value="tech">Technology</option>
        <option value="science">Science</option>
        <option value="art">Art</option>
      </select>
    </div>
  )
}

<template>
  <div class="input-group mb-3">
    <span class="input-group-text">Category</span>
    <select class="form-select" data-dot-select data-placeholder="Choose...">
      <option value="">Choose...</option>
      <option value="tech">Technology</option>
      <option value="science">Science</option>
      <option value="art">Art</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>

Bootstrap Theme Variables

The Bootstrap 5 theme maps to Bootstrap's CSS custom properties:

DotSelect Variable	Bootstrap Equivalent
$ds-primary-color	var(--bs-primary)
$ds-border-color	var(--bs-border-color)
$ds-border-radius	var(--bs-border-radius)
$ds-font-family	var(--bs-body-font-family)
$ds-font-size	var(--bs-body-font-size)
$ds-focus-ring-color	var(--bs-focus-ring-color)

TIP

If you customize Bootstrap's SCSS variables, the DotSelect Bootstrap theme will automatically pick up those changes when compiled together.