Multi-line field with a character counter that turns amber near the limit and rose past it.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Form7 } from "@/components/beste/piece/form7";
<Form7
label="Launch announcement"
value="Beste v3 ships real-time collaboration, custom themes, and a brand new AI editor. Available to all workspaces starting next Tuesday."
max={280}
hint="Posted to your workspace feed and email digest."
/>Standard text field with a label on top and a muted helper line under the control.
Font-size slider with discrete tick dots under the rail and a mono value chip in the header.
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.
Six-cell verification code field with an active cell that rings and a caret on the next empty slot.
Click-to-edit field that toggles between a plain value with a hover pencil and an input flanked by save and cancel buttons.