480
Sponsor

Text Input

PreviousNext

Single-line text input with placeholder, validation, mask

InkOpenTUI
Terminal

Installation

$ pnpm dlx shadcn@latest add @termcn/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
import { TextInput } from "@/components/ui/text-input";

export function TextInputPlaceholder() {
  return <TextInput placeholder="Search packages..." />;
}

With Label

Multiple labeled inputs stacked together.

Terminal
import { Box } from "ink";

import { TextInput } from "@/components/ui/text-input";

export function TextInputLabel() {
  return (
    <Box flexDirection="column" gap={1}>
      <TextInput label="Name" placeholder="Enter your name" />
      <TextInput label="Email" placeholder="you@example.com" />
    </Box>
  );
}

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
import { Box, Text } from "ink";

import { TextInput } from "@/components/ui/text-input";

export function TextInputCursor() {
  return (
    <Box flexDirection="column" gap={1}>
      <Text dimColor>← → move cursor · type / backspace at cursor</Text>
      <TextInput
        autoFocus
        label="Editable"
        placeholder="Try arrows"
        showCursor
      />
    </Box>
  );
}

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"█"