Select
An interactive single-choice list menu.
Select provides an accessible, navigable list of options. It features keyboard navigation (Up/Down arrows or j/k keys), pagination (Ctrl+U/D), and support for disabled items and sub-descriptions.
Usage
import { Select } from 'caret-tui';
const options = [
{ label: 'Development', value: 'dev', description: 'Local environment' },
{ label: 'Staging', value: 'stage', description: 'Testing environment' },
{ label: 'Production', value: 'prod', disabled: true }
];
const App = () => (
<Select
label="Choose Environment:"
options={options}
onSelect={(val) => console.log(val)}
/>
);Props
| Prop | Type | Default | Description |
|---|---|---|---|
options | SelectOption<T>[] | - | The array of choices available. |
onSelect | (value: T) => void | - | Callback fired when an option is selected. |
onCancel | () => void | - | Optional callback fired if the user presses Esc. |
label | string | - | An optional title displayed above the list. |
visibleCount | number | 8 | Maximum number of options to show simultaneously. |
isActive | boolean | true | If false, keyboard interaction is disabled. |
SelectOption<T> Definition
| Field | Type | Description |
|---|---|---|
label | string | The primary text displayed for the option. |
value | T | The underlying value. |
description | string | Secondary text displayed underneath the label when focused. |
disabled | boolean | If true, the option is grayed out and cannot be selected. |