sp-swatch

Examples API

Attributes and Properties #

Property Attribute Type Default Description
autofocus autofocus boolean false When this control is rendered, focus it automatically
border border SwatchBorder
color color string ''
dir dir 'ltr' | 'rtl' 'ltr'
disabled disabled boolean false Disable this control. It will not receive focus or events
label label string ''
mixedValue mixed-value boolean false
nothing nothing boolean false
role role string 'button'
rounding rounding SwatchRounding
selected selected boolean false
shape shape SwatchShape
size size ElementSize
tabIndex tabIndex number The tab index to apply to this control. See general documentation about the tabindex HTML property
value value string

Events #

Name Type Description
change Event

Description #

An <sp-swatch> shows a small sample of a fill — such as a color, gradient, texture, or material — that is intended to be applied to an object.

Usage #

See it on NPM! How big is this package in your project?

yarn add @spectrum-web-components/swatch

Import the side effectful registration of <sp-swatch> via:

import '@spectrum-web-components/swatch/sp-swatch.js';

When looking to leverage the Swatch base class as a type and/or for extension purposes, do so via:

import { Swatch } from '@spectrum-web-components/swatch';

Sizes #

Extra Small
<div style="display: flex;gap: 5px;">
<sp-swatch color="rgb(255 0 0 / 0.7)" size="xs"></sp-swatch>
<sp-swatch rounding="none" color="rgb(255 0 0 / 0.7)" size="xs"></sp-swatch>
<sp-swatch rounding="full" color="rgb(255 0 0 / 0.7)" size="xs"></sp-swatch>
<sp-swatch border="light" color="rgb(255 0 0 / 0.7)" size="xs"></sp-swatch>
<sp-swatch border="none" color="rgb(255 0 0 / 0.7)" size="xs"></sp-swatch>
<sp-swatch nothing size="xs"></sp-swatch>
<sp-swatch
shape="rectangle"
color="rgb(255 0 0 / 0.7)"
size="xs"
>
</sp-swatch>
<sp-swatch
shape="rectangle"
disabled
color="rgb(255 0 0 / 0.7)"
size="xs"
>
</sp-swatch>
<sp-swatch
rounding="full"
shape="rectangle"
mixed-value
size="xs"
>
</sp-swatch>
</div>
Small
<div style="display: flex;gap: 5px;">
<sp-swatch color="rgb(255 0 0 / 0.7)" size="s"></sp-swatch>
<sp-swatch rounding="none" color="rgb(255 0 0 / 0.7)" size="s"></sp-swatch>
<sp-swatch rounding="full" color="rgb(255 0 0 / 0.7)" size="s"></sp-swatch>
<sp-swatch border="light" color="rgb(255 0 0 / 0.7)" size="s"></sp-swatch>
<sp-swatch border="none" color="rgb(255 0 0 / 0.7)" size="s"></sp-swatch>
<sp-swatch nothing size="s"></sp-swatch>
<sp-swatch
shape="rectangle"
color="rgb(255 0 0 / 0.7)"
size="s"
>
</sp-swatch>
<sp-swatch
shape="rectangle"
disabled
color="rgb(255 0 0 / 0.7)"
size="s"
>
</sp-swatch>
<sp-swatch
rounding="full"
shape="rectangle"
mixed-value
size="s"
>
</sp-swatch>
</div>
Medium
<div style="display: flex;gap: 5px;">
<sp-swatch color="rgb(255 0 0 / 0.7)" size="m"></sp-swatch>
<sp-swatch rounding="none" color="rgb(255 0 0 / 0.7)" size="m"></sp-swatch>
<sp-swatch rounding="full" color="rgb(255 0 0 / 0.7)" size="m"></sp-swatch>
<sp-swatch border="light" color="rgb(255 0 0 / 0.7)" size="m"></sp-swatch>
<sp-swatch border="none" color="rgb(255 0 0 / 0.7)" size="m"></sp-swatch>
<sp-swatch nothing size="m"></sp-swatch>
<sp-swatch
shape="rectangle"
color="rgb(255 0 0 / 0.7)"
size="m"
>
</sp-swatch>
<sp-swatch
shape="rectangle"
disabled
color="rgb(255 0 0 / 0.7)"
size="m"
>
</sp-swatch>
<sp-swatch
rounding="full"
shape="rectangle"
mixed-value
size="m"
>
</sp-swatch>
</div>
Large
<div style="display: flex;gap: 5px;">
<sp-swatch color="rgb(255 0 0 / 0.7)" size="l"></sp-swatch>
<sp-swatch rounding="none" color="rgb(255 0 0 / 0.7)" size="l"></sp-swatch>
<sp-swatch rounding="full" color="rgb(255 0 0 / 0.7)" size="l"></sp-swatch>
<sp-swatch border="light" color="rgb(255 0 0 / 0.7)" size="l"></sp-swatch>
<sp-swatch border="none" color="rgb(255 0 0 / 0.7)" size="l"></sp-swatch>
<sp-swatch nothing size="l"></sp-swatch>
<sp-swatch
shape="rectangle"
color="rgb(255 0 0 / 0.7)"
size="l"
>
</sp-swatch>
<sp-swatch
shape="rectangle"
disabled
color="rgb(255 0 0 / 0.7)"
size="l"
>
</sp-swatch>
<sp-swatch
rounding="full"
shape="rectangle"
mixed-value
size="l"
>
</sp-swatch>
</div>

Modifying attributes #

An <sp-swatch> element can be modified by the following attributes/properties to customize its delivery as desired for your use case: border, color, disabled, mixedValue (accepted as the mixed-value attribute), nothing, rounding, and shape. Use these in concert with each other for a variety of final visual deliveries.

Border #

The border attribute/property is not required and when applied accepts the values of none or light.

<sp-swatch-group>
<sp-swatch color="rgb(255 0 0 / 0.7)"></sp-swatch>
<sp-swatch color="rgb(255 0 0 / 0.7)" border="light"></sp-swatch>
<sp-swatch color="rgb(255 0 0 / 0.7)" border="none"></sp-swatch>
</sp-swatch-group>

Color #

The color attribute/property determines the color value that the <sp-swatch> element will deliver.

<sp-swatch-group>
<sp-swatch color="rgb(255 0 0 / 0.7)"></sp-swatch>
<sp-swatch color="orange"></sp-swatch>
<sp-swatch color="var(--spectrum-global-color-magenta-500)"></sp-swatch>
</sp-swatch-group>

Disabled #

The disabled attribute/property determines prevents interaction on the <sp-swatch> element.

<sp-swatch-group>
<sp-swatch disabled color="rgb(255 0 0 / 0.7)"></sp-swatch>
<sp-swatch disabled color="orange"></sp-swatch>
<sp-swatch
disabled
color="var(--spectrum-global-color-magenta-500)"
>
</sp-swatch>
</sp-swatch-group>

Mixed value #

The mixed-value attribute and mixedValue property outline when an <sp-swatch> element represents more than one color.

<sp-swatch-group>
<sp-swatch mixed-value></sp-swatch>
<sp-swatch mixed-value rounding="full"></sp-swatch>
<sp-swatch mixed-value shape="rectangle"></sp-swatch>
</sp-swatch-group>

Nothing #

The nothing attribute/property outlines that the <sp-swatch> represents no color or that it represents "transparent".

<sp-swatch-group>
<sp-swatch nothing></sp-swatch>
<sp-swatch nothing rounding="full"></sp-swatch>
<sp-swatch nothing shape="rectangle"></sp-swatch>
</sp-swatch-group>

Rounding #

The rounding attribute/property is not required and when applied accepts the values of none or full.

<sp-swatch-group>
<sp-swatch color="rgb(255 0 0 / 0.7)"></sp-swatch>
<sp-swatch color="rgb(255 0 0 / 0.7)" rounding="none"></sp-swatch>
<sp-swatch color="rgb(255 0 0 / 0.7)" rounding="full"></sp-swatch>
</sp-swatch-group>

Shape #

The shape attribute/property is not required and when applied accepts the values of rectangle.

<sp-swatch-group>
<sp-swatch color="rgb(255 0 0 / 0.7)"></sp-swatch>
<sp-swatch color="rgb(255 0 0 / 0.7)" shape="rectangle"></sp-swatch>
</sp-swatch-group>