Floating Label

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

mira@beste.co

New here? Read the installation guide.

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.

Labeled Input

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

Friendly
FormalNeutralFriendlyPlayful

Tick Slider

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

Mira
Beste

Input Row

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

16
1224

Stepped Slider

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

USD · US Dollar

Native Select

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

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.

Markdown version