Readonly Input

acct_7Z91X2Q
Provided by admin. Contact support to change.
About this piece

Readonly Input

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

Usage

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

import { Input12 } from "@/components/beste/piece/input12";

<Input12
  label="Account ID"
  value="acct_7Z91X2Q"
  reason="Provided by admin. Contact support to change."
/>

More Input pieces

View all Input
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.

Beste Sözen

Text Field

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

small, compact, dense

Dense Input

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

Ξ
0x4A81…6fA0ENS
Ethereum · Mainnet

Wallet Input

Crypto address field with a gradient Ξ avatar, shortened mono address, and an ENS lookup chip.

$12,480.00USD

Currency Input

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

Choose a password
0 characters entered
  • At least 8 characters
  • Contains a number
  • Contains a symbol

Password Strength

Masked characters type into the field while a four-segment meter climbs from rose through amber to emerald and each rule in the checklist ticks green, then it clears and starts over.