ColorSwatches API

API reference docs for theColorSwatchescomponent. For examples and details on the usage of this component, visit the component demo page.

Props​

Props

Type

Description

Default

ariaLabelPrefix?

string

Used as a prefix for the aria-label of each swatch

_

colors

string[]

A list of colors (hex codes) for the user to pick from

_

customFirstSwatch?

ReactNode

Allows the consumer to provide a custom element for the first swatch

_

customLastSwatch?

ReactNode

Allows the consumer to provide a custom element for the last swatch

_

inputName?

string

Used as the HTML 'name' attribute for each swatch input

_

onChange?

(value: string) => void

Callback function that is called when the color changes

_

rows?

number

The number of rows to display

1

size

'20' | '24' | '28' | '32' | '36' | '40'

The width and height of the options

'32'

value

string

The currently selected color

_