Text Field

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

Beste Sözen

New here? Read the installation guide.

Import & use
import { Input5 } from "@/components/beste/piece/input5";

<Input5
  value="Beste Sözen"
  placeholder="Type something"
  focused={true}
/>

More Input pieces

View all Input
Ready when you are

Hero Input

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

$12,480.00USD

Currency Input

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

typescript
12
const answer = 42;return answer * 2;

Code Input

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

small, compact, dense

Dense Input

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

1h45m
HH:MM

Duration Input

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

Textarea

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

Markdown version