Combo Box

A combo box combines a text input with a listbox, allowing users to filter a list of options to items matching a query.

Installation

CLI

Copy & Paste

bash

npx @sly-cli/sly add draft-ui combobox

Examples

Default

This is the default ComboBox

Example

Code

Favorite Animal

With Button

Any React Aria Component Button placed inside ComboBox, will automatically toggle the appearance of ComboBoxContent when pressed.

Example

Code

Favorite Animal

Disabled Keys

To disable specific ComboBoxItem's, add an array of disabledKey's to ComboBox. Ensure the ComboBoxItem's have appropriate, corresponding id's.

Example

Code

Favorite Animal

Disabled

Use the isDisabled prop to disable the ComboxInput altogether.

Example

Code

Favorite Animal