A list you choose from, open on the page.
Import it from rei-kit:
import { BaseListbox } from 'rei-kit'
Open BaseListbox in the live documentation, where every prop below is a control you can change, in four materials and ten palettes.
<script setup lang="ts">
import { ref } from 'vue'
import { BaseListbox } from 'rei-kit'
const chosen = ref<string[]>(['ada'])
const people = [
{ value: 'ada', label: 'Ada Lovelace', description: 'Owner' },
{ value: 'kenji', label: 'Kenji Mori', description: 'Editor' },
{ value: 'mei', label: 'Mei Lin', description: 'Invited', disabled: true },
]
</script>
<template>
<BaseListbox v-model="chosen" mode="multiple" :options="people" label="People with access" />
</template>
| Prop | Type | Required or default | What it is for |
|---|---|---|---|
modelValue | Value | undefined | The chosen option, or options, with `v-model`. |
options | readonly ListboxOption<V>[] | yes | |
label | string | yes | The list's accessible name. |
mode | M | 'single' as M | One option, or any number of them. |
height | string | '14rem' | How tall before it scrolls. Any CSS length. |
rei-kit is an accessible Vue 3 and Tailwind CSS 4 component library: 106 components, themed by role rather than by colour on three independent axes — ten WCAG-checked palettes, four materials and light or dark, each switched with one attribute. Typed, tested, SSR-safe, no runtime dependencies, MIT.