/
1.1k
Sponsor

Text Input

PreviousNext

Single-line text input with placeholder, validation, mask

InkOpenTUI
Terminal

Installation

$ pnpm dlx shadcn@latest add @termcn/ink/text-input

Usage

import { TextInput } from "@/components/ui/text-input";
<TextInput
  label="Project Name"
  placeholder="my-project"
  onSubmit={(value) => console.log("Name:", value)}
/>

Examples

Placeholder

A text input with placeholder text.

Terminal

With Label

Multiple labeled inputs stacked together.

Terminal

Cursor and editing

With showCursor (default true), use the left and right arrow keys to move the insertion point; type and Backspace apply at the cursor.

Terminal

API Reference

TextInput

PropTypeDefault
valuestring-
onChange(value: string) => void-
onSubmit(value: string) => void-
placeholderstring""
maskstring-
showCursorbooleantrue
highlightPastedTextbooleanfalse
validate(value: string) => string|null-
widthnumber40
labelstring-
autoFocusbooleanfalse
idstring-
borderedbooleantrue
borderStyle"single" | "double" | "round" | "bold" | "singleDouble" | "doubleSingle" | "classic""round"
paddingXnumber1
cursorstring"█"

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: Left / Right move by grapheme, Home / End move to the boundaries, and Backspace / Delete remove one complete grapheme. Enter submits or confirms (Ctrl+Enter in TextArea); Tab / Shift+Tab leave through Ink focus traversal.
  • 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.