Radio Group

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

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

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

Import & use
import { Form23 } from "@/components/beste/piece/form23";

<Form23
  legend="Delivery speed"
  options={[
    {
      "label": "Standard",
      "description": "3–5 business days · Free"
    },
    {
      "label": "Express",
      "description": "Next business day · $8"
    },
    {
      "label": "Same-day",
      "description": "Order by noon · $14"
    }
  ]}
  selectedIndex={1}
/>

More Form pieces

View all Form
Violet · #6D5EFA

Color Swatches

form26

Row of round color swatches where the selected one picks up an outer contrast ring.

Start typing to search
Beste Sözen
Beste SözenDesign lead
Mirko Petrov
Mirko PetrovEngineer
Noor Ahmed
Noor AhmedProduct

Contact Picker

form29

Searchable people picker with a focused search input above a list that tints the selected row.

DesignPolishGood first issueAdd label

Multi Select

form16

Picker that keeps chosen options as removable violet pills next to a chevron to open the list.

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.

Segmented Control

form24

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

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.