CommandInput
An interactive input field with history and auto-complete support.
CommandInput is a robust input component designed for CLI prompt interaction. It supports input history (accessible via Up/Down arrows), inline ghost text for autocompletion, and masked text for passwords.
Usage
import { CommandInput } from 'caret-tui';
const App = () => {
return (
<CommandInput
placeholder="Enter command..."
suggestions={['start', 'stop', 'restart', 'status']}
onSubmit={(val) => console.log(`Command submitted: ${val}`)}
/>
);
};Props
| Prop | Type | Default | Description |
|---|---|---|---|
id | string | 'command-input' | The focus ID used by FocusProvider. |
placeholder | string | 'Type a command...' | Text displayed when the input is empty. |
prefix | string | 'λ' | The prefix character before the input. |
suggestions | string[] | [] | List of words for ghost-text auto-completion (press Tab to complete). |
onSubmit | (value: string) => void | - | Callback fired when the user presses Enter. |
variant | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'primary' | The visual variant when focused. |
type | 'text' | 'password' | 'text' | Renders asterisks * if set to password. |