Function Select

Select(props: SelectProps): SelectInstance

Creates a filterable select list component.

Returns a SelectInstance — call it inside cel.viewport() to produce the current Node tree. Internal state (search query, highlight position, scroll offset) is managed automatically. Keyboard navigation works when the component is focused (Tab into it or click an item).

Keyboard:

Key	Action
Type	Filter items by prefix
`↑` / `↓`	Move highlight (wraps around)
`Enter`	Select highlighted item
`Escape`	Unfocus (framework default)
`Home`/`End`	Jump to first/last
`Backspace`	Delete last filter character

Parameters

props: SelectProps
Select configuration and items.

Returns SelectInstance

A callable instance that produces the Select node tree.

Example

import { cel, VStack, Text, ProcessTerminal } from "@cel-tui/core";
import { Select } from "@cel-tui/components";

let selected = "";

const fruitSelect = Select({
  items: ["apple", "banana", "cherry", "date", "elderberry"],
  onSelect: (value) => {
    selected = value;
    cel.render();
  },
});

cel.init(new ProcessTerminal());
cel.viewport(() =>
  VStack({ height: "100%" }, [
    Text(`Selected: ${selected}`),
    fruitSelect(),
  ]),
);

Function Select

Parameters

Returns SelectInstance

Example

Settings