Color Swatches

About this piece

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"
    },
    {
      "tone": "sky",
      "name": "Sky"
    },
    {
      "tone": "emerald",
      "name": "Emerald"
    },
    {
      "tone": "amber",
      "name": "Amber"
    },
    {
      "tone": "rose",
      "name": "Rose"
    },
    {
      "tone": "slate",
      "name": "Slate"
    }
  ]}
  selectedIndex={0}
/>