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

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

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
small, compact, dense

Dense Input

input13

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

Ready when you are

Hero Input

input14

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

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

Code Input

input25

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

$12,480.00USD

Currency Input

input7

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

1h45m
HH:MM

Duration Input

input21

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

you@company.com

Email Subscribe

input1

Inline email field with a mail icon and a primary submit button docked on the right.