Explorer

Select

Accessible select dropdown with search and keyboard navigation.

Componentsdocsbase-ui/select

Installation

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

Manual

API Reference

Root

Groups all parts of the select. 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 open state changes

disabledboolean

=false

Disable select

readOnlyboolean

=false

Read-only state

requiredboolean

=false

Required field

modalboolean

=true

Trap focus in popup

alignOptionToTriggerboolean

=true

Align selected option to trigger

Trigger

A button that opens the select dropdown. Renders a div element.

classNamestring | function

CSS class name

renderReactElement | function

Custom render function

Trigger data attributes
Attribute	Description
data-popup-open	Present when dropdown is open
data-disabled	Present when select is disabled
data-readonly	Present when select is read-only
data-valid	Present in valid state
data-invalid	Present in invalid state

Value

Renders the selected value as text. Renders a span element.

placeholderstring

Text when no value selected

classNamestring | function

CSS class name

renderReactElement | function

Custom render function

Icon

A visual indicator icon for the select. Renders a span element.

classNamestring | function

CSS class name

renderReactElement | function

Custom render function

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 trigger. 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
Attribute	Description
data-open	Present when popup is open
data-closed	Present when popup is closed
data-side	Side popup is positioned on
data-align	Alignment relative to side

Popup

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

classNamestring | function

CSS class name

renderReactElement | function

Custom render function

Popup data attributes
Attribute	Description
data-open	Present when popup is open
data-closed	Present when popup is closed
data-starting-style	Present when animating in
data-ending-style	Present when animating out

Backdrop

An overlay displayed beneath the popup. Renders a div element.

classNamestring | function

CSS class name

renderReactElement | function

Custom render function

Backdrop data attributes
Attribute	Description
data-open	Present when popup is open
data-closed	Present when popup is closed
data-starting-style	Present when animating in
data-ending-style	Present when animating out

Arrow

An arrow element pointing to the trigger. Renders a div element.

classNamestring | function

CSS class name

renderReactElement | function

Custom render function

Arrow data attributes
Attribute	Description
data-side	Side the arrow is on
data-align	Alignment of the arrow
data-open	Present when popup is open
data-closed	Present when popup is closed

List

A scrollable list of items inside the popup. Renders a div element.

classNamestring | function

CSS class name

renderReactElement | function

Custom render function

ScrollUpArrow

A scroll indicator at the top of the list. Renders a div element.

classNamestring | function

CSS class name

renderReactElement | function

Custom render function

ScrollUpArrow data attributes
Attribute	Description
data-direction	Scroll direction (up)

ScrollDownArrow

A scroll indicator at the bottom of the list. Renders a div element.

classNamestring | function

CSS class name

renderReactElement | function

Custom render function

ScrollDownArrow data attributes
Attribute	Description
data-direction	Scroll direction (down)

Item

An individual item in the select. Renders a div element.

valueany

Option value

labelstring

Option display label

disabledboolean

=false

Disable option

classNamestring | function

CSS class name

renderReactElement | function

Custom render function

Item data attributes
Attribute	Description
data-highlighted	Present when option is highlighted
data-selected	Present when option is selected
data-disabled	Present when option is disabled

ItemText

Renders the text content of an item. Renders a span element.

classNamestring | function

CSS class name

renderReactElement | function

Custom render function

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. 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

edbn/ui

Explorer

Select

Accessible select dropdown with search and keyboard navigation.

Componentsdocsbase-ui/select

Installation

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

Manual

API Reference

Root

Groups all parts of the select. 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 open state changes

disabledboolean

=false

Disable select

readOnlyboolean

=false

Read-only state

requiredboolean

=false

Required field

modalboolean

=true

Trap focus in popup

alignOptionToTriggerboolean

=true

Align selected option to trigger

Trigger

A button that opens the select dropdown. Renders a div element.

classNamestring | function

CSS class name

renderReactElement | function

Custom render function

Trigger data attributes
Attribute	Description
data-popup-open	Present when dropdown is open
data-disabled	Present when select is disabled
data-readonly	Present when select is read-only
data-valid	Present in valid state
data-invalid	Present in invalid state

Value

Renders the selected value as text. Renders a span element.

placeholderstring

Text when no value selected

classNamestring | function

CSS class name

renderReactElement | function

Custom render function

Icon

A visual indicator icon for the select. Renders a span element.

classNamestring | function

CSS class name

renderReactElement | function

Custom render function

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 trigger. 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
Attribute	Description
data-open	Present when popup is open
data-closed	Present when popup is closed
data-side	Side popup is positioned on
data-align	Alignment relative to side

Popup

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

classNamestring | function

CSS class name

renderReactElement | function

Custom render function

Popup data attributes
Attribute	Description
data-open	Present when popup is open
data-closed	Present when popup is closed
data-starting-style	Present when animating in
data-ending-style	Present when animating out

Backdrop

An overlay displayed beneath the popup. Renders a div element.

classNamestring | function

CSS class name

renderReactElement | function

Custom render function

Backdrop data attributes
Attribute	Description
data-open	Present when popup is open
data-closed	Present when popup is closed
data-starting-style	Present when animating in
data-ending-style	Present when animating out

Arrow

An arrow element pointing to the trigger. Renders a div element.

classNamestring | function

CSS class name

renderReactElement | function

Custom render function

Arrow data attributes
Attribute	Description
data-side	Side the arrow is on
data-align	Alignment of the arrow
data-open	Present when popup is open
data-closed	Present when popup is closed

List

A scrollable list of items inside the popup. Renders a div element.

classNamestring | function

CSS class name

renderReactElement | function

Custom render function

ScrollUpArrow

A scroll indicator at the top of the list. Renders a div element.

classNamestring | function

CSS class name

renderReactElement | function

Custom render function

ScrollUpArrow data attributes
Attribute	Description
data-direction	Scroll direction (up)

ScrollDownArrow

A scroll indicator at the bottom of the list. Renders a div element.

classNamestring | function

CSS class name

renderReactElement | function

Custom render function

ScrollDownArrow data attributes
Attribute	Description
data-direction	Scroll direction (down)

Item

An individual item in the select. Renders a div element.

valueany

Option value

labelstring

Option display label

disabledboolean

=false

Disable option

classNamestring | function

CSS class name

renderReactElement | function

Custom render function

Item data attributes
Attribute	Description
data-highlighted	Present when option is highlighted
data-selected	Present when option is selected
data-disabled	Present when option is disabled

ItemText

Renders the text content of an item. Renders a span element.

classNamestring | function

CSS class name

renderReactElement | function

Custom render function

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. 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