Input

Import

import { Input } from 'tuimorphic';

Basic Usage

<Input placeholder="Enter text..." />

Props

Prop	Type	Default	Description
`caretChars`	`string`	`' '`	Custom caret character(s) to display
`label`	`string`	—	Label text for the input
`isBlink`	`boolean`	`true`	Whether the caret should blink
`type`	`string`	`'text'`	Input type (text, password, email, number, etc.)
`value`	`string`	—	Controlled input value
`defaultValue`	`string`	—	Default value for uncontrolled input
`placeholder`	`string`	—	Placeholder text
`disabled`	`boolean`	`false`	Whether the input is disabled
`readOnly`	`boolean`	`false`	Whether the input is read-only
`onChange`	`(event: ChangeEvent) => void`	—	Change event handler
`onFocus`	`(event: FocusEvent) => void`	—	Focus event handler
`onBlur`	`(event: FocusEvent) => void`	—	Blur event handler
`className`	`string`	—	Additional CSS class names
`ref`	`React.Ref<HTMLInputElement>`	—	Forwarded ref to the input element

All standard HTML input attributes are also supported.

With Label

Username

<Input label="Username" placeholder="Enter username" />

Password Input

Password inputs automatically mask the text with bullet characters:

Password

<Input type="password" label="Password" placeholder="Enter password" />

With Placeholder

Enter your email...

<Input placeholder="Enter your email..." />

Disabled State

Disabled Input

Cannot edit

<Input label="Disabled Input" disabled defaultValue="Cannot edit" />

Custom Caret

Customize the caret character for different visual styles:

<Input label="Default caret" placeholder="Type here..." />
<Input label="Block caret" caretChars="█" placeholder="Type here..." />
<Input label="Underscore caret" caretChars="_" placeholder="Type here..." />
<Input label="Pipe caret" caretChars="|" placeholder="Type here..." />

Caret Blinking

Control whether the caret blinks:

<Input label="Blinking caret (default)" placeholder="Type here..." />
<Input label="Static caret" isBlink={false} placeholder="Type here..." />

Input Types

<Input type="text" label="Text" placeholder="Regular text" />
<Input type="email" label="Email" placeholder="[email protected]" />
<Input type="password" label="Password" placeholder="Enter password" />
<Input type="number" label="Number" placeholder="Enter number" />
<Input type="tel" label="Phone" placeholder="+1 (555) 000-0000" />
<Input type="url" label="URL" placeholder="https://example.com" />

Interactive Example

Interactive Input

Type something...

Current value: (empty)

const [value, setValue] = useState('');
 
<Input
  label="Interactive Input"
  value={value}
  onChange={(e) => setValue(e.target.value)}
  placeholder="Type something..."
/>

Features

Custom blinking caret: Terminal-style caret that blinks at the cursor position
Arrow key navigation: Press Up/Down arrows to navigate between inputs
Password masking: Passwords are displayed as bullet characters
Controlled/uncontrolled: Works both as controlled and uncontrolled component

Key	Action
`Arrow Up`	Focus previous focusable element
`Arrow Down`	Focus next focusable element
`Arrow Left/Right`	Move caret within input

Accessibility

Semantic <input> element with proper labeling
Supports all standard input attributes
Keyboard accessible with visible focus states
Works with screen readers

Styling

Variable	Description
`--theme-border`	Input border color
`--theme-background`	Input background color
`--theme-text`	Input text color
`--theme-focused-border`	Border color when focused

TextArea - Multi-line text input
Select - Dropdown selection
ComboBox - Searchable dropdown