Select

Single-value dropdown with arrow-key navigation, typeahead, and subtle open/close animation.

Installation

npx dafink-ui add select

Demo

Framework

The framework your project uses.

Disabled

Error state

This field is required.

Props

Name	Type	Default	Description
options	SelectOption[]	-	Array of { value, label } objects.
value	string	undefined	Controlled selected value.
onChange	(value: string) => void	undefined	Called when a selection is made.
placeholder	string	'Select…'	Shown when no value is selected.
label	string	undefined	Visible label above the trigger.
hint	string	undefined	Helper text (hidden when error is set).
error	string	undefined	Error message; switches trigger to error state.
size	'sm' \| 'md'	'md'	Trigger height and text size.
disabled	boolean	false	Prevents interaction.
className	string	''	Additional classes on the root wrapper.
triggerClassName	string	''	Additional classes on the trigger button itself, for restyling the control (className only reaches the outer wrapper).
aria-label	string	undefined	Accessible name for the trigger when there's no visible label (e.g. a compact inline use like a table cell).

Accessibility

The trigger is a native <button> (aria-haspopup="listbox", aria-expanded, aria-controls); opening moves focus to the popup <ul role="listbox"> itself (tabIndex=-1, focused programmatically), which drives the active option via aria-activedescendant rather than moving real DOM focus between role="option" items. Focus is not trapped: Tab closes the list and lets focus continue naturally to the next page element, while Escape closes and explicitly returns focus to the trigger.

Key	Function
`enter`	Opens the dropdown from the trigger, or confirms the active option and closes when the list is open.
`space`	Opens the dropdown from the trigger, or confirms the active option and closes when the list is open.
`down arrow`	Moves the active option to the next one, wrapping from the last to the first.
`up arrow`	Moves the active option to the previous one, wrapping from the first to the last.
`home`	Jumps the active option to the first item.
`end`	Jumps the active option to the last item.
`escape`	Closes the dropdown and returns focus to the trigger.
`tab`	Closes the dropdown without returning focus to the trigger, letting Tab land on the next page element.