Input Row

Mira
Beste
About this piece

Input Row

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

Usage

The import and the props worth knowing about, in one place.

import { Form8 } from "@/components/beste/piece/form8";

<Form8
  fields={[
    {
      "label": "First name",
      "value": "Mira"
    },
    {
      "label": "Last name",
      "value": "Beste"
    }
  ]}
/>

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.

One email when we open the doors. Nothing else.

Inline Subscribe Row

A single-row capture card with a labelled email field, an accent submit button beside it, and fine print underneath.

532 000 12 34
We'll text a login code if you enable 2FA.

Phone Input

Phone field with a flag and dial-code chooser on the left, then the national number in mono.

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

Tag Input

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

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

Notifications

New bookings
Payment received
Weekly summary

Preferences Toggles

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