Size Examples

DotSelect supports three built-in size variants: small, medium (default), and large.

Small

<select data-dot-select data-size="sm" data-placeholder="Small select...">
  <option value="">Small select...</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</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-size="sm" data-placeholder="Small select...">
      <option value="">Small select...</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </select>
  )
}

<template>
  <select data-dot-select data-size="sm" data-placeholder="Small select...">
    <option value="">Small select...</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</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>

Medium (Default)

<select data-dot-select data-placeholder="Default select...">
  <option value="">Default select...</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</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="Default select...">
      <option value="">Default select...</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </select>
  )
}

<template>
  <select data-dot-select data-placeholder="Default select...">
    <option value="">Default select...</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</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>

Large

<select data-dot-select data-size="lg" data-placeholder="Large select...">
  <option value="">Large select...</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</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-size="lg" data-placeholder="Large select...">
      <option value="">Large select...</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </select>
  )
}

<template>
  <select data-dot-select data-size="lg" data-placeholder="Large select...">
    <option value="">Large select...</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</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>

Size Comparison

Size	Attribute	Min Height	Font Size	Padding
Small	data-size="sm"	32px	0.8rem	4px 8px
Medium	data-size="md" (default)	38px	0.875rem	6px 12px
Large	data-size="lg"	46px	1rem	8px 16px

Multiple Select Sizes

Sizes also apply to multiple selects, adjusting the item badge size:

<!-- Small multiple -->
<select data-dot-select data-size="sm" data-plugins="remove-button" multiple data-placeholder="Small multi...">
  <option value="a" selected>Alpha</option>
  <option value="b" selected>Beta</option>
  <option value="c">Gamma</option>
  <option value="d">Delta</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 multiple -->
    <select data-dot-select data-size="sm" data-plugins="remove-button" multiple data-placeholder="Small multi...">
      <option value="a" selected>Alpha</option>
      <option value="b" selected>Beta</option>
      <option value="c">Gamma</option>
      <option value="d">Delta</option>
    </select>
  )
}

<template>
  <!-- Small multiple -->
  <select data-dot-select data-size="sm" data-plugins="remove-button" multiple data-placeholder="Small multi...">
    <option value="a" selected>Alpha</option>
    <option value="b" selected>Beta</option>
    <option value="c">Gamma</option>
    <option value="d">Delta</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>

<!-- Default multiple -->
<select data-dot-select data-plugins="remove-button" multiple data-placeholder="Default multi...">
  <option value="a" selected>Alpha</option>
  <option value="b" selected>Beta</option>
  <option value="c">Gamma</option>
  <option value="d">Delta</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 (
    <!-- Default multiple -->
    <select data-dot-select data-plugins="remove-button" multiple data-placeholder="Default multi...">
      <option value="a" selected>Alpha</option>
      <option value="b" selected>Beta</option>
      <option value="c">Gamma</option>
      <option value="d">Delta</option>
    </select>
  )
}

<template>
  <!-- Default multiple -->
  <select data-dot-select data-plugins="remove-button" multiple data-placeholder="Default multi...">
    <option value="a" selected>Alpha</option>
    <option value="b" selected>Beta</option>
    <option value="c">Gamma</option>
    <option value="d">Delta</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>

<!-- Large multiple -->
<select data-dot-select data-size="lg" data-plugins="remove-button" multiple data-placeholder="Large multi...">
  <option value="a" selected>Alpha</option>
  <option value="b" selected>Beta</option>
  <option value="c">Gamma</option>
  <option value="d">Delta</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 (
    <!-- Large multiple -->
    <select data-dot-select data-size="lg" data-plugins="remove-button" multiple data-placeholder="Large multi...">
      <option value="a" selected>Alpha</option>
      <option value="b" selected>Beta</option>
      <option value="c">Gamma</option>
      <option value="d">Delta</option>
    </select>
  )
}

<template>
  <!-- Large multiple -->
  <select data-dot-select data-size="lg" data-plugins="remove-button" multiple data-placeholder="Large multi...">
    <option value="a" selected>Alpha</option>
    <option value="b" selected>Beta</option>
    <option value="c">Gamma</option>
    <option value="d">Delta</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 Sizes

The search input scales with the component size:

<select data-dot-select data-size="sm" data-searchable="true" data-placeholder="Small searchable...">
  <option value="">Small searchable...</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</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-size="sm" data-searchable="true" data-placeholder="Small searchable...">
      <option value="">Small searchable...</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
    </select>
  )
}

<template>
  <select data-dot-select data-size="sm" data-searchable="true" data-placeholder="Small searchable...">
    <option value="">Small searchable...</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</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>

<select data-dot-select data-searchable="true" data-placeholder="Default searchable...">
  <option value="">Default searchable...</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</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="Default searchable...">
      <option value="">Default searchable...</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
    </select>
  )
}

<template>
  <select data-dot-select data-searchable="true" data-placeholder="Default searchable...">
    <option value="">Default searchable...</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</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>

<select data-dot-select data-size="lg" data-searchable="true" data-placeholder="Large searchable...">
  <option value="">Large searchable...</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</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-size="lg" data-searchable="true" data-placeholder="Large searchable...">
      <option value="">Large searchable...</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
    </select>
  )
}

<template>
  <select data-dot-select data-size="lg" data-searchable="true" data-placeholder="Large searchable...">
    <option value="">Large searchable...</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</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>

Bootstrap 5 Theme Sizes

When using the Bootstrap 5 theme, you can also use Bootstrap's native size classes:

<select class="form-select form-select-sm" data-dot-select data-placeholder="Bootstrap small...">
  <option value="">Bootstrap small...</option>
  <option value="1">Option 1</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 class="form-select form-select-sm" data-dot-select data-placeholder="Bootstrap small...">
      <option value="">Bootstrap small...</option>
      <option value="1">Option 1</option>
    </select>
  )
}

<template>
  <select class="form-select form-select-sm" data-dot-select data-placeholder="Bootstrap small...">
    <option value="">Bootstrap small...</option>
    <option value="1">Option 1</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>

<select class="form-select" data-dot-select data-placeholder="Bootstrap default...">
  <option value="">Bootstrap default...</option>
  <option value="1">Option 1</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 class="form-select" data-dot-select data-placeholder="Bootstrap default...">
      <option value="">Bootstrap default...</option>
      <option value="1">Option 1</option>
    </select>
  )
}

<template>
  <select class="form-select" data-dot-select data-placeholder="Bootstrap default...">
    <option value="">Bootstrap default...</option>
    <option value="1">Option 1</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>

<select class="form-select form-select-lg" data-dot-select data-placeholder="Bootstrap large...">
  <option value="">Bootstrap large...</option>
  <option value="1">Option 1</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 class="form-select form-select-lg" data-dot-select data-placeholder="Bootstrap large...">
      <option value="">Bootstrap large...</option>
      <option value="1">Option 1</option>
    </select>
  )
}

<template>
  <select class="form-select form-select-lg" data-dot-select data-placeholder="Bootstrap large...">
    <option value="">Bootstrap large...</option>
    <option value="1">Option 1</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>

TIP

When using the Bootstrap 5 theme, form-select-sm and form-select-lg classes take precedence over data-size. You can use either approach, but avoid mixing both on the same element.