GitHub55X

Listbox

Vue listbox for selecting one or more options from a keyboard-navigable list.

API Reference
PreviousNext

Installation

Install from the Vuzeno registry:

      
      bunx --bun shadcn-vue@latest add https://vuzeno.com/r/listbox.json

Usage

      
      <script setup lang="ts">
import { Listbox } from "@/components/ui/listbox";
</script>

<template>
  <Listbox.Root>
    <!-- … -->
  </Listbox.Root>
</template>

Examples

Controlled

The Listbox component can be controlled by using the value and onValueChange props. This allows you to manage the selected value externally.

Root Provider

An alternative way to control the listbox is to use the RootProvider component and the useListbox hook. This way you can access the state and methods from outside the component.

Disabled Item

Listbox items can be disabled using the disabled prop on the collection item.

Multiple

You can set the selectionMode property as multiple to allow the user to select multiple items at a time.

Grouping

The Listbox component supports grouping items. You can use the groupBy function to group items based on a specific property.

Extended Selection

The extended selection mode allows users to select multiple items using keyboard modifiers like Cmd (Mac) or Ctrl (Windows/Linux).

Horizontal

Use the orientation prop to display the listbox items horizontally.

Grid Layout

Use createGridCollection to display items in a grid layout with keyboard navigation support.

Filtering

Use useListCollection with the filter function to enable filtering of items.

Select All

Use useListboxContext to implement a "Select All" functionality that allows users to select or deselect all items at once.

Value Text

Use Listbox.ValueText to display the selected values as a comma-separated string.

Composition

      
      Listbox.Root
├── Listbox.Context
├── Listbox.Content
├── Listbox.Empty
├── Listbox.Input
├── Listbox.Item
├── Listbox.ItemContext
├── Listbox.ItemGroup
├── Listbox.ItemGroupLabel
├── Listbox.ItemIndicator
├── Listbox.ItemText
├── Listbox.Label
├── Listbox.RootProvider
├── Listbox.ValueText

API

See Ark UI Listbox docs for full props and examples.

KbdMarquee