# Text Input

Single-line text input with placeholder, validation, mask



<ComponentPreview base="opentui" name="text-input-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui-text-input
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource base="opentui" name="text-input" title="components/ui/text-input.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

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

```tsx
<TextInput
  label="Project Name"
  placeholder="my-project"
  onSubmit={(value) => console.log("Name:", value)}
/>
```

Examples [#examples]

Placeholder [#placeholder]

A text input with placeholder text.

<ComponentPreview base="opentui" name="text-input-placeholder" />

With Label [#with-label]

Multiple labeled inputs stacked together.

<ComponentPreview base="opentui" name="text-input-label" />

Cursor and editing [#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.

<ComponentPreview base="opentui" name="text-input-cursor" />

API Reference [#api-reference]

TextInput [#textinput]

| Prop                  | Type                                                                                         | Default   |
| --------------------- | -------------------------------------------------------------------------------------------- | --------- |
| `value`               | `string`                                                                                     | -         |
| `onChange`            | `(value: string) => void`                                                                    | -         |
| `onSubmit`            | `(value: string) => void`                                                                    | -         |
| `placeholder`         | `string`                                                                                     | `""`      |
| `mask`                | `string`                                                                                     | -         |
| `showCursor`          | `boolean`                                                                                    | `true`    |
| `highlightPastedText` | `boolean`                                                                                    | `false`   |
| `validate`            | `(value: string) => string\|null`                                                            | -         |
| `width`               | `number`                                                                                     | `40`      |
| `label`               | `string`                                                                                     | -         |
| `autoFocus`           | `boolean`                                                                                    | `false`   |
| `id`                  | `string`                                                                                     | -         |
| `bordered`            | `boolean`                                                                                    | `true`    |
| `borderStyle`         | `"single" \| "double" \| "round" \| "bold" \| "singleDouble" \| "doubleSingle" \| "classic"` | `"round"` |
| `paddingX`            | `number`                                                                                     | `1`       |
| `cursor`              | `string`                                                                                     | `"█"`     |