Docs
Components
List Box

List Box

A list of options and allows a user to select one or more of them.

Preview

Code

Installation

CLI

Manual

npx shadcn@latest add @kanpeki/list-box

Anatomy

Single import

Multiple imports

import { ListBox } from "~/components/ui/list-box";

<ListBox.Root>
  {(item) => <ListBox.Item id={item.id}>{item.name}</ListBox.Item>}
</ListBox.Root>;

Examples

Multiple

Component list-box-multiple not found in registry.

Details

Component list-box-details not found in registry.

Section

Component list-box-section not found in registry.

API Reference

ListBox.Root

Prop	Type	Default
`items`	`Iterable<T>`
`children`	`ReactNode \| function`
`selectionMode`	`enum`
`selectedKeys`	`Iterable<Key>`
`defaultSelectedKeys`	`Iterable<Key>`
`onSelectionChange`	`function`
`disabledKeys`	`Iterable<Key>`
`isLoading`	`boolean`
`renderEmptyState`	`function`

ListBox.Item

Prop	Type	Default
`id`	`Key`
`textValue`	`string`
`isDisabled`	`boolean`
`children`	`ReactNode`
`className`	`string`

ListBox.Group

Prop	Type	Default
`children`	`ReactNode`

ListBox.Label

Prop	Type	Default
`children`	`ReactNode`
`className`	`string`

ListBox.Empty

Prop	Type	Default
`children`	`ReactNode`
`className`	`string`

ListBox.LoadMoreItem

Prop	Type	Default
`onLoadMore`	`function`
`children`	`ReactNode`
`className`	`string`

Label Menu

On This Page

Installation
Anatomy
Examples
Multiple
Details
Section
API Reference
ListBox.Root
ListBox.Item
ListBox.Group
ListBox.Label
ListBox.Empty
ListBox.LoadMoreItem

Contribute