ComponentsSelect
Select
stableArrow-key navigable single-choice list with full keyboard support.
Browser preview is a simulation. The copied component runs in actual terminal apps.
select.tsx
Pick a framework:
❯React
❯Vue
❯Svelte
❯Solid
select.tsx
Installation
npx orizen-tui@latest add select
if dependency install fails, run: npm install ink@^5.0.1 react@^18.3.1 @types/react@^18.3.18 orizen-tui-core@latest
- Copy and paste the following code into your project.
- Update import paths to match your project setup.
components/ui/orizen/select.tsx
Usage
select.imports.tsx
select.example.tsx
Examples
Usage
select.example1.tsx
Pick a framework:
❯React
❯Vue
❯Svelte
❯Solid
select.example1.tsx
API Reference
Select
PropTypeDefaultDescription
itemsReadonlyArray<{ label: string; value: T }>-List items
items-
ReadonlyArray<{ label: string; value: T }>List items
valueT-Selected value (controlled)
value-
TSelected value (controlled)
onSelect(item) => void-Called when item is selected (optional)
onSelect-
(item) => voidCalled when item is selected (optional)
initialIndexnumber0Initially highlighted item (uncontrolled)
initialIndex0
numberInitially highlighted item (uncontrolled)
labelstringundefinedHeading above the list
labelundefined
stringHeading above the list
focusbooleantrueWhether list accepts keyboard events
focustrue
booleanWhether list accepts keyboard events