Select

Styled native <select>

One choice from a list too long for radios. It is the native <select>, so phones show their own picker and every keyboard and screen reader already knows it. To type and filter a long list, use Combobox; to keep the options visible, Listbox.

Basic

Season

第一期 (2015)第二期 ♭ (2017)Fine (2019)第三期

The two TV seasons and the film

Season (small)

第一期 (2015)第二期 ♭ (2017)Fine (2019)第三期

Season (large)

第一期 (2015)第二期 ♭ (2017)Fine (2019)第三期

Pick one

<script setup lang="ts">
import { ref } from "vue";
import { BlessLabel, BlessSelect } from "blessing-ui";
const season = ref<string>();
const small = ref("s1");
const large = ref<string>();
const options = [
  { value: "s1", label: "第一期 (2015)" },
  { value: "s2", label: "第二期 ♭ (2017)" },
  { label: "Film", options: [{ value: "fine", label: "Fine (2019)" }] },
  { value: "s3", label: "第三期", disabled: true },
];
</script>

<template>
  <div class="row" style="align-items: flex-start">
    <div class="col">
      <BlessLabel for="d-season">Season</BlessLabel>
      <BlessSelect
        id="d-season"
        v-model="season"
        placeholder="Choose…"
        :options
        description="The two TV seasons and the film"
      />
    </div>
    <div class="col">
      <BlessLabel for="d-sm">Season (small)</BlessLabel>
      <BlessSelect id="d-sm" v-model="small" size="sm" :options />
    </div>
    <div class="col">
      <BlessLabel for="d-lg">Season (large)</BlessLabel>
      <BlessSelect
        id="d-lg"
        v-model="large"
        size="lg"
        placeholder="Choose…"
        :options
        :error="large ? '' : 'Pick one'"
      />
    </div>
  </div>
</template>

• placeholder shows until something is picked and reads as undefined; with required, an unpicked select fails validation as it should.
• Options can be grouped: { label, options: [...] } becomes an <optgroup>.
• On Chrome 135+ the open list is styled too (appearance: base-select); elsewhere the browser's own list opens.

Usage

import { BlessSelect } from "blessing-ui";

API

Props

Name	Type	Default	Description
id	string	—
options*	(BlessOption<T> | { label: string; options: BlessOption<T>[]; })[]	—
placeholder	string	—
size	"md" | "sm" | "lg"	"md"
disabled	boolean	—
invalid	boolean	—
description	string	—
error	string	—
modelValue	T	—

Events

Name	Payload	Description
update:modelValue	[value: T | undefined]