Listbox

Designed to present a list of choices for user selection.

Usage

A versatile UI element that allows users to select one or more options from a predefined list. It is commonly used in forms, dropdown menus, and other interactive interfaces where selection is required.

import { Listbox } from "@elemnts-ui/react"

<Listbox>
  <Listbox.Label />
  <Listbox.Content>
    <Listbox.Item>
      <Listbox.ItemText />
      <Listbox.ItemIndicator />
    </Listbox.Item>
  </Listbox.Content>
</Listbox>

Disabled

Mark certain items in the listbox as disabled to show they are not selectable, while still displaying them for informational purposes.

With Checkmark

Use custom checkmarks to indicate selected items in scenarios that allow multiple selections, ensuring clear visual distinction for users.

API Reference

ListboxRoot

Manages selection state and keyboard navigation.

Prop	Type	Default
collection	`ListCollection<T>`	`undefined`
value	`string[]`	`undefined`
defaultValue	`string[]`	`undefined`
onValueChange	`(details: ValueChangeDetails<T>) => void`	`undefined`
selectionMode	`'single' \| 'multiple' \| 'extended'`	`'single'`
orientation	`'horizontal' \| 'vertical'`	`'vertical'`
disabled	`boolean`	`false`
deselectable	`boolean`	`false`
loopFocus	`boolean`	`false`
asChild	`boolean`	`false`

ListboxContent

Manages the content of the listbox, including the list of items and their layout.

Prop	Type	Default
asChild	`boolean`	`undefined`

ListboxItem

A single selectable item in the listbox.

Prop	Type	Default
item	`T`	`undefined`
asChild	`boolean`	`false`

ListboxItemText

Text content for the listbox item.

Prop	Type	Default
asChild	`boolean`	`false`

ListboxItemIndicator

Indicates the selected state of the listbox item.

Prop	Type	Default
asChild	`boolean`	`false`

ListboxItemGroup

Groups items in the listbox.

Prop	Type	Default
asChild	`boolean`	`false`

ListboxItemGroupLabel

Labels the group of items in the listbox.

Prop	Type	Default
asChild	`boolean`	`false`

ListboxValueText

Displays the selected value text in the listbox.

Prop	Type	Default
asChild	`boolean`	`false`
placeholder	`string`	`undefined`

ListboxEmpty

Shown when the listbox is empty.

Prop	Type	Default
asChild	`boolean`	`false`