Utility
Terminal
Installation
$ pnpm dlx shadcn@latest add @termcn/ink/tree-select
Usage
import { TreeSelect } from "@/components/ui/tree-select";<TreeSelect
label="Select a file"
nodes={[
{
value: "src",
label: "src",
children: [
{ value: "index.ts", label: "index.ts" },
{ value: "utils.ts", label: "utils.ts" },
],
},
{ value: "README.md", label: "README.md" },
]}
onChange={(value) => {}}
/>API Reference
TreeSelect
| Prop | Type | Default |
|---|---|---|
nodes | TreeSelectNode<T>[] | required |
value | T | - |
onChange | (value: T) => void | - |
onSubmit | (value: T) => void | - |
label | string | - |
expandedByDefault | boolean | false |
Notes
Accessibility
termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.
- Keyboard: Arrow keys move inside the composite;
Home/Endselect the first or last enabled item;Enter/Spaceactivate, select, or toggle;Escapecancels or closes an owned surface;Tab/Shift+Tabmove between termcn/Ink focus targets. - Focus and composition: Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
- Screen reader: Ink labels and semantic state expose the component without relying on visual styling alone.