build69
build69  /  Components  /  Text Inputs  /  Input

Input

v1.0.6Updated 28 Sept 2026

Single-line text input for short values. Leading / trailing icons, prefix / suffix addons, clear button, password reveal, copy-to-clipboard, character counter, a lock / pen editability indicator, and validation states.

View source← Back to catalog

Preview

Live · 16 stories
DefaultOpen ↗
▸Why this is recommendedformtextfieldinput+7

The default, out-of-the-box Input.

Recommended for+14
  • ✓Form fields
  • ✓Search boxes
  • ✓Filter inputs
  • ✓Password fields
  • ✓Search with clear button
  • ✓Inputs with units (฿, %, etc.)
  • ✓Fields that show a lock when read-only and a pen when editable
  • ✓Read-only fields the user can unlock to edit
Tags+6
formtextfieldinputclearablepasswordcopyablevalidationlockedread-onlydefault
Features+4
  • Native types supported
  • Disabled / read-only
  • Inherits form sizing
  • Leading + trailing icon slots
  • Clearable (X button)
  • Password reveal toggle
  • Copy-to-clipboard button
  • Character counter
  • Validation states: idle / loading / valid / invalid — the tick and the error mark carry an accessible name (role="img"), and the mark goes decorative when the field already has an aria-describedby error message so nothing is announced twice
  • Lock / pen editability indicator (locked prop) — trailing glyph shows a lock when read-only, a pen when editable; lock also sets the field readOnly
  • Prefix / suffix text addons
  • i18n: labels prop overrides every built-in string (copy toasts, loading / validating spinner names, valid / invalid indicator names, password / clear / copy / lock / pen aria-labels); char-counter digits format via LocaleProvider
Not recommended for−2
  • ✕Multiline text (use Textarea)
  • ✕Numeric stepper (compose with InputGroup)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "Input" })

Usage

import { Input } from '@/components/inputs/input';
import { Mail } from 'lucide-react';

<Input leading={<Mail className="size-4" />} clearable placeholder="you@build69.com" />

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
type

Native input type

string—
leading

Leading icon / addon

ReactNode—
trailing

Trailing icon / addon

ReactNode—
clearable

Show clear button when filled

boolean—
password

Password field with reveal toggle

boolean—
copyable

Show copy-to-clipboard button

boolean—
showCount

Show character counter

boolean—
locked

Editability status indicator: a trailing lock glyph when true (also sets the field readOnly), a pen glyph when false. Leave undefined for no indicator. Status readout only — the icon does not toggle editing on click.

boolean—
state

Validation state

'idle' | 'loading' | 'valid' | 'invalid'—
labels

Override the built-in Pro-extension strings — copy toasts, the loading / async-validation spinner names, and password / clear / copy / lock / pen aria-labels (i18n). Merged over DEFAULT_INPUT_LABELS.

Partial<InputLabels>—

Related

Platform docsAll componentsSource files