About this piece
Color Swatches
Row of round color swatches where the selected one picks up an outer contrast ring.
Usage
The import and the props worth knowing about, in one place.
import { Form26 } from "@/components/beste/piece/form26";
<Form26
label="Accent color"
swatches={[
{
"tone": "violet",
"name": "Violet",
"hex": "#6D5EFA"
},
{
"tone": "sky",
"name": "Sky",
"hex": "#0EA5E9"
},
{
"tone": "emerald",
"name": "Emerald",
"hex": "#10B981"
},
{
"tone": "amber",
"name": "Amber",
"hex": "#F59E0B"
},
{
"tone": "rose",
"name": "Rose",
"hex": "#EF4444"
},
{
"tone": "slate",
"name": "Slate",
"hex": "#111827"
}
]}
selectedIndex={0}
/>More Form pieces
View all FormDelivery speed
Standard3–5 business days · Free
ExpressNext business day · $8
Same-dayOrder by noon · $14
Radio Group
Radio-card list where the selected row picks up a primary ring and a tinted background.
Start typing to search
Beste SözenDesign lead
Mirko PetrovEngineer
Noor AhmedProduct
Contact Picker
Searchable people picker with a focused search input above a list that tints the selected row.
DesignPolishGood first issueAdd label
Multi Select
Picker that keeps chosen options as removable violet pills next to a chevron to open the list.
Mira
Beste
Input Row
Two inputs arranged side by side on a responsive grid for first/last names and paired fields.