Checkbox Group

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

Notifications

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

Import & use
import { Form22 } from "@/components/beste/piece/form22";

<Form22
  legend="Notifications"
  items={[
    {
      "label": "Comments on my posts",
      "checked": true,
      "hint": "In-app and email"
    },
    {
      "label": "Weekly digest",
      "checked": true,
      "hint": "Every Monday · 08:00"
    },
    {
      "label": "Product announcements",
      "checked": false
    }
  ]}
/>

More Form pieces

View all Form

Notifications

New bookings
Payment received
Weekly summary

Preferences Toggles

form35

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

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

Labeled Input

form1

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

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

Toggle Switch

form21

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

Billing addressUsed on invoices and receipts.
221B Riverside Ave
Istanbul
34381

Fieldset Group

form9

Bordered card bundling a legend, description, and a short stack of related inputs.

Delivery speed
Standard3–5 business days · Free
ExpressNext business day · $8
Same-dayOrder by noon · $14

Radio Group

form23

Radio-card list where the selected row picks up a primary ring and a tinted background.

Assign to
Filter people…
Beste Sözen
Beste Sözen
Andrea Kim
Andrea Kim
Noor Ahmed
Noor Ahmed
Jules Park
Jules Park

Assignee Picker

form20

Popover with a header label, filter bar, and a selectable person list that checks chosen rows.