Select

Native dropdown with custom chevron, matching Input.vue dimensions and focus styles. Accepts string or object option arrays.

ExamplesCodeUsageChangelog

Examples

Basic

Choose a productCrusher RunScreeningsGabion StoneRip Rap

Tailwind v4

<script setup>
import { ref } from 'vue'
const product = ref('')
</script>

<template>
  <Select
    v-model="product"
    placeholder="Choose a product"
    :options="['Crusher Run', 'Screenings', 'Gabion Stone', 'Rip Rap']"
  />
</template>

Object options

Filter by statusActiveInactiveArchived

Tailwind v4

<Select
  v-model="status"
  :options="[
    { label: 'Active', value: 'active' },
    { label: 'Inactive', value: 'inactive' },
    { label: 'Archived', value: 'archived' },
  ]"
/>

With hint and error

Pick a shiftMorningAfternoonNight

Shifts start at 6 AM, 2 PM, and 10 PM

Plant sectionABC

Please select a section

Tailwind v4

<Select
  v-model="shift"
  :options="['Morning', 'Afternoon', 'Night']"
  hint="Shifts start at 6 AM, 2 PM, and 10 PM"
/>
<Select
  v-model="section"
  :options="['A', 'B', 'C']"
  error="Please select a section"
/>

Disabled

Crusher RunScreenings

Tailwind v4

<Select :model-value="'Screenings'" :options="['Crusher Run', 'Screenings']" disabled />

Props

Prop	Type	Default	Description
modelValue	string | number	—	Currently selected value
options	Array<{ label: string; value: string | number } | string>	—	Option list; strings are used as both label and value
placeholder	string	—	Placeholder option shown when no value is selected
disabled	boolean	false	Prevents interaction and dims the control
error	string	—	Validation error message shown below the select
hint	string	—	Helper text shown below the select when no error

Emits

Event	Payload	Description
update:modelValue	string | number	New value on change