List

const List: ForwardRefExoticComponent<ListProps & RefAttributes<ListHandle>>;

Keyboard-navigable list with vim-style bindings.

Renders count items via a renderItem function, managing selection state internally or through controlled props.

Keyboard shortcuts (when focused):

Key	Action
↑ / k	Move selection up
↓ / j	Move selection down
gg	Jump to first item
G	Jump to last item
Enter	Confirm selection

Example

<List
  count={items.length}
  renderItem={({ index, selected, focused }) => (
    <Box style={{ bg: selected && focused ? "cyan" : undefined }}>
      <Text>{items[index].name}</Text>
    </Box>
  )}
  onSelect={(index) => console.log("Selected:", items[index])}
/>

---

Properties

Property	Type	Description
count	number	Total number of items
defaultSelectedIndex?	number	Initial index for uncontrolled mode
disabledIndices?	Set<number>	Set of disabled indices that are skipped during navigation
focusable?	boolean	Whether the list is focusable (default: true)
onSelect?	(index) => void	Callback when enter is pressed on selected item
onSelectionChange?	(index) => void	Callback when selected index should change
renderItem	(info) => ReactNode	Render function for each item
selectedIndex?	number	Controlled selected index
style?	Style	Outer box style

---

ListItemInfo

Information passed to each item’s render function.

Properties

Property	Type	Description
focused	boolean	Whether the List component itself has focus.
index	number	Zero-based index of this item.
selected	boolean	Whether this item is currently selected (highlighted).

---

ListHandle

Handle for List — exposes selected index

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
selectedIndex	readonly	number	Currently selected index	-