Inline Edit

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

Mira & Co.

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

Import & use
import { Form31 } from "@/components/beste/piece/form31";

<Form31
  label="Workspace name"
  value="Mira Studio"
  draft="Mira & Co."
  editing={true}
/>

More Form pieces

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

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.

design systemstypographymotionType and press ↵
Up to 8 tags. Use hyphens instead of spaces.

Tag Input

form14

Free-form tagger that wraps committed tokens as removable chips and shows a placeholder slot at the end.

Two-factor authenticationRequire a verification code at sign-in.

Toggle Switch

form21

Setting row with label, supporting copy, and a sliding switch that turns emerald when on.

Notifications

New bookings
Payment received
Weekly summary

Preferences Toggles

form35

A compact settings card listing labeled rows, each with an accent on/off toggle switch.

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

Autosave Field

form28

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