Toggle Switch

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

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

New here? Read the installation guide.

Import & use
import { Form21 } from "@/components/beste/piece/form21";

<Form21
  label="Two-factor authentication"
  description="Require a verification code at sign-in."
  on={true}
/>

More Form pieces

View all Form

Notifications

New bookings
Payment received
Weekly summary

Preferences Toggles

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

sk_••••••••••••••••••••••••••••0000

Copyable Field

Read-only value with an optional mask toggle and a copy button that flips to an emerald Copied state on click.

Mira
Beste

Input Row

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

Mira & Co.

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.

Notifications

Checkbox Group

Legend-headed list of notification toggles with filled primary checks and muted helper lines.

•••••••••••••••••••••Caps

Password Toggle

Masked password input with a caps-lock alert pill and an eye button that flips visibility.

Markdown version