Select

const Select: ForwardRefExoticComponent<SelectProps & RefAttributes<SelectHandle>>;

Dropdown select with keyboard navigation, type-to-filter, and scrolling.

Opens on Space or Enter. Close with Escape or Tab. Type to filter when open (if searchable is enabled).

Automatically detects whether to open upward or downward based on available space, unless you override with openDirection.

Examples

const [color, setColor] = useState<string>();

<Select
  items={[
    { label: "Red",   value: "red" },
    { label: "Green", value: "green" },
    { label: "Blue",  value: "blue" },
  ]}
  value={color}
  onChange={setColor}
  placeholder="Pick a color"
/>

// Force dropdown to always open upward
<Select items={items} value={v} onChange={setV} openDirection="up" />

---

Properties

Property	Type	Description
disabled?	boolean	Disabled state
dropdownStyle?	Style	Dropdown overlay style overrides
focusedStyle?	Style	Trigger style when focused
highlightColor?	Color	Highlight color for the selected item in the dropdown (default: “cyan”)
items	SelectItem[]	List of selectable items
maxVisible?	number	Max visible items in the dropdown before scrolling (default: 8)
onChange?	(value) => void	Callback when selection changes
openDirection?	"auto" | "up" | "down"	Force dropdown open direction: “up”, “down”, or “auto” (default: “auto”)
placeholder?	string	Placeholder text when nothing is selected
searchable?	boolean	Enable type-to-filter when dropdown is open (default: true)
style?	Style	Trigger box style
value?	string	Currently selected value (controlled)

---

SelectItem

A single option inside a Select dropdown.

Properties

Property	Type	Description
disabled?	boolean	When true, the item is dimmed and cannot be selected.
label	string	Display text shown in the dropdown.
value	string	Value returned when this item is selected.

---

SelectHandle

Handle for Select — exposes current selected value

Extends

• FocusableHandle

Methods

blur()

blur(): void;

Programmatically blur (unfocus) this element

Returns

void

Inherited from

FocusableHandle.blur

---

focus()

focus(): void;

Programmatically focus this element

Returns

void

Inherited from

FocusableHandle.focus

---

scrollIntoView()

scrollIntoView(options?): void;

Scroll the nearest parent ScrollView to make this element visible. Behaves like the DOM Element.scrollIntoView() method. No-op if the element is not inside a ScrollView.

Parameters

Parameter	Type	Description
options?	ScrollIntoViewOptions	Alignment options (default: { block: "nearest" })

Returns

void

Example

const inputRef = useRef<InputHandle>(null);

// Minimal scroll — just enough to make it visible
inputRef.current?.scrollIntoView();

// Center the element in the viewport
inputRef.current?.scrollIntoView({ block: "center" });

Inherited from

FocusableHandle.scrollIntoView

Properties

Property	Modifier	Type	Description	Inherited from
isFocused	readonly	boolean	Whether this element is currently focused	FocusableHandle.isFocused
isOpen	readonly	boolean	Whether the dropdown is currently open	-
value	readonly	string | undefined	Currently selected value (undefined if nothing selected)	-