Hero Input

About this piece

Oversized text field with large type and a fatter caret, made for hero sections and prompt bars.

Usage

The import and the props worth knowing about, in one place.

import { Input14 } from "@/components/beste/piece/input14";

<Input14
  value="Ready when you are"
  placeholder="Ask anything"
/>

small, compact, dense

Tight small-size text field for data tables and filter rails, with smaller type and tight padding.

typescript

const answer = 42;return answer * 2;

Dark mono code field with a language eyebrow, line-number gutter, and content lines on a foreground canvas.

$12,480.00USD

Money field with a leading currency symbol, right-aligned mono amount, and a unit label.

Beste Sözen

Bare text input atom with a focused state that adds a primary ring and a blinking caret after the value.

Session length

1h45m

HH:MM

Length field with a timer icon, h and m unit-annotated number tiles, and an HH:MM format hint.

Thanks for the thorough write-up. Two things came to mind while reading — first, the retry logic feels brittle around rate limits;

Shift + ↵ for new line

Multi-line input with a shift-enter hint row and a visible corner grip for resize.