Select

Form

A styled native select for choosing from a list of options, with optional option groups.

Props

Prop	Type	Default	Description
`modelValue`	`string \| number \| null`	—	Selected value (v-model).
`options`	`(DsSelectOption \| DsSelectGroup)[]`	—	Options or option groups.
`placeholder`	`string`	—	Placeholder option label.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Height of the select.
`error`	`boolean`	`false`	Error border state.
`disabled`	`boolean`	`false`	Disable the select.

Examples

Interactive

vue

<script setup lang="ts">
const value = ref('')
const options = [
  { label: 'Design', value: 'design' },
  { label: 'Engineering', value: 'eng' },
  { label: 'Product', value: 'product' },
]
</script>
<template>
  <DsSelect v-model="value" :options="options" placeholder="Select a team" class="w-64" />
</template>

Skeleton

Use DsSelectSkeleton as a loading placeholder while content is being fetched.

Small

vue

<DsSelectSkeleton size="sm" />

Medium

vue

<DsSelectSkeleton size="md" />

Large

vue

<DsSelectSkeleton size="lg" />

Accessibility

Uses native <select> for maximum accessibility and keyboard support.
Error state sets visual red border.

RadioGroup

Slider