File Input

File picker with a muted Choose file button on the left and the selected filename and size on the right.

passport-scan.pdf842 KB

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

Import & use
import { Input18 } from "@/components/beste/piece/input18";

<Input18
  label="Attach ID document"
  filename="passport-scan.pdf"
  size="842 KB"
/>

More Input pieces

View all Input
Mira violet#6D5EFA

Color Input

input20

Color field pairing a filled swatch with the chosen name and hex code and an eyedropper button.

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.

How was your stay?
4.0
Tap to rate. Optional comment on the next step.

Rating Input

input22

Five-star rater with filled amber stars in muted tiles and a decimal rating chip to the right.

small, compact, dense

Dense Input

input13

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

acct_7Z91X2Q
Provided by admin. Contact support to change.

Readonly Input

input12

Locked field with a muted fill, padlock icon, and a why-locked helper line underneath.

Ready when you are

Hero Input

input14

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