About this piece
Form Autofill
Name, email and company get typed in one after another behind a caret, then the Continue button spins through a loading state and morphs into an emerald check that says you're in.
Usage
The import and the props worth knowing about, in one place.
import { Form37 } from "@/components/beste/piece/form37";
<Form37
heading="Create your workspace"
fields={[
{
"label": "Name",
"value": "Nina Simone",
"placeholder": "Your name"
},
{
"label": "Email",
"value": "hello@beste.co",
"placeholder": "you@company.com",
"type": "email"
},
{
"label": "Company",
"value": "Beste Records",
"placeholder": "Company name"
}
]}
submitLabel="Continue"
loadingLabel="Setting things up"
doneLabel="You're in"
/>More Form pieces
View all Formmira-studio
mira-studio.beste.co is available.Success State
Validated field with an emerald ring, check mark, and a confirming note beneath.
Saved
Beste Sözen
Auto-saves as you type.Saved just now
Autosave Field
Inline field with an autosave status pill that shifts between saved, saving, and unsaved dot colors.
Two-factor authenticationRequire a verification code at sign-in.
Toggle Switch
Setting row with label, supporting copy, and a sliding switch that turns emerald when on.
4
7
1
9
OTP Input
Six-cell verification code field with an active cell that rings and a caret on the next empty slot.
