Floating Label

Focused input with the label shrunk to the top-left corner and a blinking caret after the value.

mira@beste.co

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

Import & use
import { Form6 } from "@/components/beste/piece/form6";

<Form6
  label="Email address"
  value="mira@beste.co"
/>

More Form pieces

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

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

Friendly
FormalNeutralFriendlyPlayful

Labeled-tick slider with a primary fill, a value pill in the header, and the active tick bolded.

16
1224

Font-size slider with discrete tick dots under the rail and a mono value chip in the header.

Mira
Beste

Two inputs arranged side by side on a responsive grid for first/last names and paired fields.

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

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

USD · US Dollar

Open-state select showing the focused control and the flyout list with one option muted as chosen.