edbnedbn/ui
ComponentsMapsAudioPDF
GitHub stars
Explorer
Get Started
Components

Combobox

Searchable dropdown for filtering and selecting from a list, built on Base UI Combobox.

Componentsdocsbase-ui/combobox

Installation

npx shadcn@latest add https://ui.edbn.me/r/combobox.json

Manual

API Reference

Root

Groups all parts of the combobox. Doesn't render its own HTML element.

defaultValueany

Initial selected value

valueany

Controlled selected value

onValueChangefunction

Called when value changes

defaultOpenboolean
=false

Initial open state

openboolean

Controlled open state

onOpenChangefunction

Called when popup opens/closes

defaultInputValuestring
=''

Initial input value

inputValuestring

Controlled input value

onInputValueChangefunction

Called when input value changes

disabledboolean
=false

Disable combobox

readOnlyboolean
=false

Read-only state

requiredboolean
=false

Required field

loopFocusboolean
=true

Loop keyboard focus

Input

The text input that filters the popup options list. Renders an input element.

autoSelectboolean
=false

Auto-select highlighted option on blur

filterOptionsfunction | null

Options filter function

classNamestring | function

CSS class name

renderReactElement | function

Custom render function

Input data attributes
AttributeDescription
data-popup-openPresent when popup is open
data-disabledPresent when combobox is disabled
data-readonlyPresent when combobox is read-only

Portal

Moves the popup to a different part of the DOM. Renders a div element.

containerElement | null

Portal container

keepMountedboolean
=false

Keep in DOM when closed

Positioner

Positions the popup against the input. Renders a div element.

side'top' | 'bottom' | 'left' | 'right'
='bottom'

Side relative to anchor

sideOffsetnumber
=0

Distance from anchor

align'start' | 'center' | 'end'
='start'

Alignment relative to side

classNamestring | function

CSS class name

renderReactElement | function

Custom render function

Positioner data attributes
AttributeDescription
data-openPresent when popup is open
data-closedPresent when popup is closed
data-sideSide popup is positioned on
data-alignAlignment relative to side

Popup

A container for the combobox options. Renders a div element.

classNamestring | function

CSS class name

renderReactElement | function

Custom render function

Popup data attributes
AttributeDescription
data-openPresent when popup is open
data-closedPresent when popup is closed
data-starting-stylePresent when animating in
data-ending-stylePresent when animating out

List

A scrollable list of items. Renders a div element.

classNamestring | function

CSS class name

renderReactElement | function

Custom render function

Item

An individual item in the combobox list. Renders a div element.

valueany

Option value

labelstring

Option display label

disabledboolean
=false

Disable this option

classNamestring | function

CSS class name

renderReactElement | function

Custom render function

Item data attributes
AttributeDescription
data-highlightedPresent when option is highlighted
data-selectedPresent when option is selected
data-disabledPresent when option is disabled

ItemIndicator

Indicates whether the item is selected. Renders a span element.

keepMountedboolean
=false

Keep in DOM when not selected

classNamestring | function

CSS class name

renderReactElement | function

Custom render function

Group

Groups related options with a label. Renders a div element.

classNamestring | function

CSS class name

renderReactElement | function

Custom render function

GroupLabel

An accessible label for an option group. Renders a div element.

classNamestring | function

CSS class name

renderReactElement | function

Custom render function

Empty

Shown when no items match the input. Renders a div element.

classNamestring | function

CSS class name

renderReactElement | function

Custom render function