Color Swatch

A row of color circles with a single active selection - the ring springs between swatches as you pick. Controlled or uncontrolled.

Installation

npx stepwise-ui add color-swatch

Default

#3b82f6

import { ColorSwatch } from '@/components/stepwise/color-swatch'

const [color, setColor] = useState('#3b82f6')

<ColorSwatch
  colors={['#ef4444', '#f59e0b', '#22c55e', '#3b82f6', '#8b5cf6', '#ec4899']}
  value={color}
  onChange={setColor}
/>

Sizes

<ColorSwatch size={20} defaultValue="#18181b" colors={…} />
<ColorSwatch size={34} defaultValue="#0ea5e9" colors={…} />

Props

PropTypeDescription

colors

string[]

The selectable colors (any CSS color).

value

string

Controlled active color.

defaultValue

string

Uncontrolled initial color.

onChange

(color: string) => void

Fires on selection.

size

number

Circle diameter in px. Default 26.

labels

string[]

Screen-reader labels, parallel to colors.

className

string

Merged onto the root.