HQ UI

List Box

ListBox are designed to present and manage lists of options or data entries, allowing users to view and select from multiple choices efficiently.

Installation

In the terminal, run the following command to begin:
npx hq-kit add list-box

Basic

Filtering

Selection Mode

Item Details

Section

Rearrange

Dragging Between Items

Controlled

Disabled

You can also disable an item directly by passing the isDisabled prop to ListBox.Item.

<ListBox.Item isDisabled>Disabled</ListBox.Item>