Segmented Control

Pill-grouped segmented control with inset muted track and a raised card under the active choice.

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

Import & use
import { Form24 } from "@/components/beste/piece/form24";

<Form24
  label="View mode"
  options={[
    "Kanban",
    "List",
    "Calendar",
    "Timeline"
  ]}
  activeIndex={1}
/>

More Form pieces

View all Form
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.

Required
Oud Beste
We use this for invoices and tax documents.

Required Field

form4

Labeled input flanked by a red asterisk and a Required pill, plus an explanatory hint below.

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.

Consent Row

form33

Legal consent card with a custom checkbox, inline underlined policy links, and a red asterisk when required.

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.