Listbox

Single / multi select list, role=listbox

A choice where the options should stay visible — a short list in a sidebar, a filter panel, a settings pane. When space is tight use Select; for a handful of single choices RadioGroup is simpler; to type and filter, Combobox.

Basic

加藤恵

澤村・スペンサー・英梨々

霞ヶ丘詩羽

氷堂美智留

波島出海

megumi

加藤恵

✓澤村・スペンサー・英梨々

✓霞ヶ丘詩羽

氷堂美智留

波島出海

[ "eriri", "utaha" ] · 3 rows then scroll · type to jump

<script setup lang="ts">
import { ref } from "vue";
import { BlessListbox } from "blessing-ui";
const options = [
  { value: "megumi", label: "加藤恵" },
  { value: "eriri", label: "澤村・スペンサー・英梨々" },
  { value: "utaha", label: "霞ヶ丘詩羽" },
  { value: "michiru", label: "氷堂美智留", disabled: true },
  { value: "izumi", label: "波島出海" },
];
const one = ref("megumi");
const many = ref<string[]>(["eriri", "utaha"]);
</script>

<template>
  <div class="row" style="align-items: flex-start">
    <div class="col">
      <BlessListbox v-model="one" :options label="Heroine" />
      <small>{{ one }}</small>
    </div>
    <div class="col">
      <BlessListbox v-model="many" :options multiple :rows="3" label="Heroines" />
      <small>{{ many }} · 3 rows then scroll · type to jump</small>
    </div>
  </div>
</template>

• One tab stop. Arrows move, Home/End jump, Space or Enter picks, and typing letters jumps to a matching label. Focus starts on the selected option.
• multiple toggles each option; rows caps the height and scrolls.
• Inside a Field the field's label names it. name submits one value per selected option.

Usage

import { BlessListbox } from "blessing-ui";

API

Props

Name	Type	Default	Description
id	string	—
name	string	—	submitted with the form, one value per selected option
options*	BlessOption<T>[]	—
multiple	boolean	—
disabled	boolean	—
label	string	—
rows	number	0	visible rows before scrolling; 0 = no limit
modelValue	T | T[]	—

Events

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

Slots

Name	Scope	Description
default	{ option: BlessOption<T>; selected: boolean; }