ComponentsMultiSelect
MultiSelect
stableArrow-key list with space-to-toggle multi-choice selection.
Browser preview is a simulation. The copied component runs in actual terminal apps.
multi-select.tsx
Pick frameworks:(space to toggle)
❯◉React
❯○Vue
❯◉Svelte
❯○Solid
multi-select.tsx
Installation
npx orizen-tui@latest add multi-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/multi-select.tsx
Usage
multi-select.imports.tsx
multi-select.example.tsx
Examples
Usage
multi-select.example1.tsx
Pick frameworks:(space to toggle)
❯◉React
❯○Vue
❯◉Svelte
❯○Solid
multi-select.example1.tsx
API Reference
MultiSelect
PropTypeDefaultDescription
itemsArray<{ label: string; value: string }>-List of selectable items
items-
Array<{ label: string; value: string }>List of selectable items
valuestring[]-Selected values (controlled)
value-
string[]Selected values (controlled)
onChange(values: string[]) => void-Called when selection changes (controlled)
onChange-
(values: string[]) => voidCalled when selection changes (controlled)
defaultValuestring[][]Initial values (uncontrolled)
defaultValue[]
string[]Initial values (uncontrolled)
onSubmit(values: string[]) => voidundefinedCalled when Enter is pressed
onSubmitundefined
(values: string[]) => voidCalled when Enter is pressed
labelstringundefinedHeading above the list
labelundefined
stringHeading above the list
focusbooleantrueWhether list accepts keyboard events
focustrue
booleanWhether list accepts keyboard events