Components

Select

Let users pick one option from a native list.

Import

import { Select } from "@dr-max/ui/select"

The entry carries its own precompiled CSS (including the styles of the Icon and Required parts it composes) — no extra style imports needed.

Usage

Pass the choices via the options prop ({ label, value, disabled? }) and bind the selected value with v-model. placeholder renders as a disabled empty option:

Country

<script setup lang="ts">
import { Select } from "@dr-max/ui/select"
import { ref } from "vue"

const country = ref("")

const options = [
  { label: "Czechia", value: "cz" },
  { label: "Slovakia", value: "sk" },
  { label: "Poland", value: "pl" }
]
</script>

<template>
  <Select v-model="country" label="Country" placeholder="Choose a country" :options="options" />
</template>

The default slot appends raw <option> elements after the ones generated from options.

Disabled options

Disable a single option with its disabled flag:

Pickup point

<script setup lang="ts">
const options = [
  { label: "Prague — Anděl", value: "andel" },
  { label: "Prague — Chodov", value: "chodov" },
  { label: "Brno — Vaňkovka (temporarily closed)", value: "vankovka", disabled: true }
]
</script>

Required and optionality

required renders a visual required indicator, optionality-description describes an optional field beside its label, and additional-description adds supporting text below the field:

Country

<template>
  <Select
    v-model="country"
    label="Country"
    placeholder="Choose a country"
    :options="options"
    required
  />
</template>

Validation errors

errors renders validation messages below the select once touched marks the validation as active:

Country

Choose your country

<template>
  <Select
    v-model="country"
    label="Country"
    placeholder="Choose a country"
    :options="options"
    touched
    :errors="[{ label: 'Choose your country', param: 'required' }]"
  />
</template>

Disabled

Country

<template>
  <Select v-model="country" label="Country" placeholder="Choose a country" :options="options" disabled />
</template>

Playground

Country

label

placeholder

optionalityDescription

additionalDescription

required

disabled

touched

<script setup lang="ts">
import { Select } from '@dr-max/ui/select'

const options = [
  { label: 'Czechia', value: 'cz' },
  { label: 'Slovakia', value: 'sk' },
  { label: 'Poland', value: 'pl' },
  { label: 'Romania', value: 'ro' },
  { label: 'Italy', value: 'it' }
]
</script>

<template>
  <Select label="Country" placeholder="Choose a country" :options="options" />
</template>