Combobox

Searchable select

A text field that searches a list as you type — the right control when a BlessSelect would have more options than a person can scan. multiple turns picks into removable chips; creatable lets the user add an option that isn't there yet and emits create so you can persist it.

For a handful of options use BlessSelect (native, no JS). For commands rather than values, use BlessCommand.

Filtering is client-side over options. For server-side search, listen to search (the query as typed) and bind options to what comes back — the list re-renders, nothing else changes. Keyboard: ↑ / ↓ move, Enter picks (or creates), Esc closes, and in multiple mode Backspace on an empty query removes the last chip. Inside a BlessField the field's label names the input; label is for a combobox with no visible label.

Basic

Single

加藤恵

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

霞ヶ丘詩羽

氷堂美智留

波島出海

安芸倫也

value:

Multiple + creatable

加藤恵 澤村・スペンサー・英梨々

✓加藤恵

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

霞ヶ丘詩羽

氷堂美智留

波島出海

安芸倫也

values: [ "megumi", "eriri" ]

Disabled / invalid

✓加藤恵

加藤恵

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

霞ヶ丘詩羽

氷堂美智留

波島出海

安芸倫也

<script setup lang="ts">
import { ref } from "vue";
import { BlessCombobox, BlessLabel, type BlessOption } from "blessing-ui";
const options = ref<BlessOption<string>[]>([
  { value: "megumi", label: "加藤恵" },
  { value: "eriri", label: "澤村・スペンサー・英梨々" },
  { value: "utaha", label: "霞ヶ丘詩羽" },
  { value: "michiru", label: "氷堂美智留" },
  { value: "izumi", label: "波島出海" },
  { value: "tomoya", label: "安芸倫也", disabled: true },
]);
const one = ref<string>();
const many = ref<string[]>(["megumi", "eriri"]);
function create(label: string) {
  const value = label.toLowerCase().replace(/\s+/g, "-");
  options.value.push({ value, label });
  many.value.push(value);
}
</script>

<template>
  <div class="row" style="align-items: flex-start">
    <div class="col">
      <BlessLabel for="d-one">Single</BlessLabel>
      <BlessCombobox id="d-one" v-model="one" :options placeholder="Search heroine…" />
      <small>value: {{ one }}</small>
    </div>
    <div class="col">
      <BlessLabel for="d-many">Multiple + creatable</BlessLabel>
      <BlessCombobox
        id="d-many"
        v-model="many"
        :options
        multiple
        creatable
        placeholder="Add…"
        @create="create"
      />
      <small>values: {{ many }}</small>
    </div>
    <div class="col">
      <BlessLabel>Disabled / invalid</BlessLabel>
      <BlessCombobox :options model-value="megumi" disabled label="Disabled example" />
      <BlessCombobox :options invalid placeholder="invalid" size="sm" label="Invalid example" />
    </div>
  </div>
</template>

Not inside <p>

The floating panel is a <div>. HTML closes a <p> when it meets a <div>, so a trigger placed inside a paragraph renders differently on the server and the client. Wrap with <span>/<div> instead.

Usage

import { BlessCombobox } from "blessing-ui";

API

Props

Name	Type	Default	Description
id	string	—
options*	BlessOption<T>[]	—
placeholder	string	—
multiple	boolean	—
creatable	boolean	—	allow creating a new option from the query; emits `create`
disabled	boolean	—
invalid	boolean	—
emptyText	string	"No results."
size	"md" | "sm" | "lg"	"md"
label	string	—	accessible name when there is no <label for>
modelValue	T | T[]	—

Events

Name	Payload	Description
search	[query: string]
create	[label: string]
update:modelValue	[value: T | T[] | undefined]

Slots

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