Validated field with an emerald ring, check mark, and a confirming note beneath.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Form3 } from "@/components/beste/piece/form3";
<Form3
label="Subdomain"
value="mira-studio"
confirmation="mira-studio.beste.co is available."
/>Invalid field with a rose ring, alert icon inside the input, and a descriptive error under it.
Six-cell verification code field with an active cell that rings and a caret on the next empty slot.
Labeled input flanked by a red asterisk and a Required pill, plus an explanatory hint below.
Read-only value with an optional mask toggle and a copy button that flips to an emerald Copied state on click.
Inline field with an autosave status pill that shifts between saved, saving, and unsaved dot colors.
Password field with a four-segment meter underneath that shifts color and label with strength.