Autosave Field

Inline field with an autosave status pill that shifts between saved, saving, and unsaved dot colors.

Saved
Beste Sözen
Auto-saves as you type.Saved just now

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

Import & use
import { Form28 } from "@/components/beste/piece/form28";

<Form28
  label="Display name"
  value="Beste Sözen"
  placeholder="How should we call you?"
  status="saved"
  savedAt="Saved just now"
  hint="Auto-saves as you type."
/>

More Form pieces

View all Form
Required
Oud Beste
We use this for invoices and tax documents.

Required Field

form4

Labeled input flanked by a red asterisk and a Required pill, plus an explanatory hint below.

Mira & Co.
Shown on invoices and in the team directory.

Labeled Input

form1

Standard text field with a label on top and a muted helper line under the control.

Mira & Co.

Inline Edit

form31

Click-to-edit field that toggles between a plain value with a hover pencil and an input flanked by save and cancel buttons.

Looks good, @mir
Beste Sözen
Beste Sözen@mira
Miranda Chase
Miranda Chase@miranda
Mirko Petrov
Mirko Petrov@mirko

Mention Picker

form15

Inline @-mention typed into a field, paired with an avatar-led autocomplete dropdown beneath.

Beste v3 ships real-time collaboration, custom themes, and a brand new AI editor. Available to all workspaces starting next Tuesday.
Posted to your workspace feed and email digest.132 / 280

Textarea Counter

form7

Multi-line field with a character counter that turns amber near the limit and rose past it.

Segmented Control

form24

Pill-grouped segmented control with inset muted track and a raised card under the active choice.