styleKeyscolorSwatches
Color Swatches
Color Swatches are used to show and/or select color options for products.
Color swatches can be used as their own component, or can be used with Selection Set to allow users to make selections.
Playground
Default size
<ColorSwatches><ColorSwatch primaryColor={'red'} title={'color red'}></ColorSwatch><ColorSwatch primaryColor={'indigo'} title={'color indigo'}></ColorSwatch><ColorSwatch primaryColor={'green'} title={'color green'}></ColorSwatch><ColorSwatch primaryColor={'gold'} title={'color gold'}></ColorSwatch><ColorSwatch primaryColor={'blue'} title={'color blue'}></ColorSwatch><ColorSwatch primaryColor={'orange'} title={'color orange'}></ColorSwatch><ColorSwatch primaryColor={'pink'} title={'color pink'}></ColorSwatch><ColorSwatch primaryColor={'brown'} title={'color brown'}></ColorSwatch><ColorSwatchprimaryColor={'limegreen'}title={'color lime green'}></ColorSwatch><ColorSwatchprimaryColor={'darkmagenta'}title={'color dark magenta'}></ColorSwatch></ColorSwatches>
<div class="color-swatches"><divclass="color-swatch"title="color red"aria-label="color red"style="background-color: red;"></div><divclass="color-swatch"title="color indigo"aria-label="color indigo"style="background-color: indigo;"></div><divclass="color-swatch"title="color green"aria-label="color green"style="background-color: green;"></div><divclass="color-swatch"title="color gold"aria-label="color gold"style="background-color: gold;"></div><divclass="color-swatch"title="color blue"aria-label="color blue"style="background-color: blue;"></div><divclass="color-swatch"title="color limegreen"aria-label="color limegreen"style="background-color: limegreen;"></div><divclass="color-swatch"title="color darkmagenta"aria-label="color darkmagenta"style="background-color: darkmagenta;"></div><divclass="color-swatch"title="fancy image"aria-label="fancy image"style='background-color: transparent; background-image: url("https://picsum.photos/id/165/100/100");'></div></div>
Super size
<ColorSwatches sizeVariant="super"><ColorSwatch primaryColor={'red'} title={'color red'}></ColorSwatch><ColorSwatch primaryColor={'indigo'} title={'color indigo'}></ColorSwatch><ColorSwatch primaryColor={'green'} title={'color green'}></ColorSwatch><ColorSwatch primaryColor={'gold'} title={'color gold'}></ColorSwatch><ColorSwatch primaryColor={'blue'} title={'color blue'}></ColorSwatch><ColorSwatch primaryColor={'orange'} title={'color orange'}></ColorSwatch><ColorSwatch primaryColor={'pink'} title={'color pink'}></ColorSwatch><ColorSwatch primaryColor={'brown'} title={'color brown'}></ColorSwatch><ColorSwatchprimaryColor={'limegreen'}title={'color lime green'}></ColorSwatch><ColorSwatchprimaryColor={'darkmagenta'}title={'color dark magenta'}></ColorSwatch></ColorSwatches>
<div class="color-swatches color-swatches-super">etc</div>
Indicating "more"
If there is not enough space to show all the available swatches, you can add the "More" sub-element, filling it with a + sign and the number of additional swatches.
+3
<ColorSwatches><ColorSwatch primaryColor={'red'} title={'color red'}></ColorSwatch><ColorSwatch primaryColor={'indigo'} title={'color indigo'}></ColorSwatch><ColorSwatch primaryColor={'green'} title={'color green'}></ColorSwatch><ColorSwatch primaryColor={'gold'} title={'color gold'}></ColorSwatch><ColorSwatch primaryColor={'blue'} title={'color blue'}></ColorSwatch><ColorSwatch primaryColor={'orange'} title={'color orange'}></ColorSwatch><ColorSwatch primaryColor={'pink'} title={'color pink'}></ColorSwatch><ColorSwatch primaryColor={'brown'} title={'color brown'}></ColorSwatch><ColorSwatchprimaryColor={'limegreen'}title={'color lime green'}></ColorSwatch><ColorSwatchprimaryColor={'darkmagenta'}title={'color dark magenta'}></ColorSwatch><ColorSwatchesMore>+3</ColorSwatchesMore></ColorSwatches>
<div class="color-swatches"><divclass="color-swatch"title="color red"aria-label="color red"style="background-color: red;"></div><span class="color-swatches-more">+3</span></div>
Two-tone color swatches
<ColorSwatches><ColorSwatchprimaryColor={'red'}secondaryColor={'blue'}title={'color red/blue'}></ColorSwatch><ColorSwatchprimaryColor={'indigo'}secondaryColor={'pink'}title={'color indigo/pink'}></ColorSwatch><ColorSwatchprimaryColor={'green'}secondaryColor={'gold'}title={'color green/gold'}></ColorSwatch><ColorSwatchdisabledprimaryColor={'darkmagenta'}secondaryColor={'limegreen'}title={'color darkmagenta/limegreen'}></ColorSwatch></ColorSwatches>
<div class="color-swatches"><divclass="color-swatch"title="color red/blue"aria-label="color red/blue"style="background-color: red; color: blue;"></div></div>
Background image
You can use an image for the swatch background, if the swatch does not represent one or two colors. The background image should be square.
<><ColorSwatches><ColorSwatch primaryColor="indigo" title="color indigo" /><ColorSwatch primaryColor="green" title="color green" /><ColorSwatchbackgroundImage="https://picsum.photos/id/165/100/100"title="fancy image"/></ColorSwatches></>
<div class="color-swatches"><divclass="color-swatch"title="fancy image"aria-label="fancy image"style='background-color: transparent; background-image: url("https://picsum.photos/id/165/100/100");'></div></div>
Using a Selection Set with radio buttons
<SelectionSet defaultSelectedValue="indigo"><ColorSwatches><SelectionSetInput value="red"><SelectionSetLabel><ColorSwatch primaryColor={'red'} title={'color red'}></ColorSwatch></SelectionSetLabel></SelectionSetInput><SelectionSetInput value="indigo"><SelectionSetLabel><ColorSwatchprimaryColor={'indigo'}title={'color indigo'}></ColorSwatch></SelectionSetLabel></SelectionSetInput><SelectionSetInput value="green"><SelectionSetLabel><ColorSwatch primaryColor={'green'} title={'color green'}></ColorSwatch></SelectionSetLabel></SelectionSetInput><SelectionSetInput value="gold"><SelectionSetLabel><ColorSwatch primaryColor={'gold'} title={'color gold'}></ColorSwatch></SelectionSetLabel></SelectionSetInput><SelectionSetInput value="blue"><SelectionSetLabel><ColorSwatch primaryColor={'blue'} title={'color blue'}></ColorSwatch></SelectionSetLabel></SelectionSetInput><SelectionSetInput value="orange"><SelectionSetLabel><ColorSwatchprimaryColor={'orange'}title={'color orange'}></ColorSwatch></SelectionSetLabel></SelectionSetInput><SelectionSetInput value="pink"><SelectionSetLabel><ColorSwatch primaryColor={'pink'} title={'color pink'}></ColorSwatch></SelectionSetLabel></SelectionSetInput><SelectionSetInput value="brown"><SelectionSetLabel><ColorSwatch primaryColor={'brown'} title={'color brown'}></ColorSwatch></SelectionSetLabel></SelectionSetInput><SelectionSetInput disabled value="limegreen"><SelectionSetLabel><ColorSwatchprimaryColor={'limegreen'}title={'color lime green'}></ColorSwatch></SelectionSetLabel></SelectionSetInput><SelectionSetInput disabled value="darkmagenta"><SelectionSetLabel><ColorSwatchprimaryColor={'darkmagenta'}title={'color dark magenta'}></ColorSwatch></SelectionSetLabel></SelectionSetInput></ColorSwatches></SelectionSet>
Using a Selection Set with super-size checkboxes
<SelectionSetvariant="multi-select"defaultSelectedValues={{indigo: true,blue: true,}}><ColorSwatches sizeVariant="super"><SelectionSetInput value="red"><SelectionSetLabel><ColorSwatch primaryColor={'red'} title={'color red'}></ColorSwatch></SelectionSetLabel></SelectionSetInput><SelectionSetInput value="indigo"><SelectionSetLabel><ColorSwatchprimaryColor={'indigo'}title={'color indigo'}></ColorSwatch></SelectionSetLabel></SelectionSetInput><SelectionSetInput value="green"><SelectionSetLabel><ColorSwatch primaryColor={'green'} title={'color green'}></ColorSwatch></SelectionSetLabel></SelectionSetInput><SelectionSetInput value="gold"><SelectionSetLabel><ColorSwatch primaryColor={'gold'} title={'color gold'}></ColorSwatch></SelectionSetLabel></SelectionSetInput><SelectionSetInput value="blue"><SelectionSetLabel><ColorSwatch primaryColor={'blue'} title={'color blue'}></ColorSwatch></SelectionSetLabel></SelectionSetInput><SelectionSetInput value="orange"><SelectionSetLabel><ColorSwatchprimaryColor={'orange'}title={'color orange'}></ColorSwatch></SelectionSetLabel></SelectionSetInput><SelectionSetInput value="pink"><SelectionSetLabel><ColorSwatch primaryColor={'pink'} title={'color pink'}></ColorSwatch></SelectionSetLabel></SelectionSetInput><SelectionSetInput value="brown"><SelectionSetLabel><ColorSwatch primaryColor={'brown'} title={'color brown'}></ColorSwatch></SelectionSetLabel></SelectionSetInput><SelectionSetInput disabled value="limegreen"><SelectionSetLabel><ColorSwatchprimaryColor={'limegreen'}title={'color lime green'}></ColorSwatch></SelectionSetLabel></SelectionSetInput><SelectionSetInput disabled value="darkmagenta"><SelectionSetLabel><ColorSwatchprimaryColor={'darkmagenta'}title={'color dark magenta'}></ColorSwatch></SelectionSetLabel></SelectionSetInput></ColorSwatches></SelectionSet>
Guidelines
Developer Gudielines
By default, color swatches have a transparent background circle. In React, you can use the React props to set the swatch's primary color (and secondary color as necessary). In the vanilla API, you will need to set each swatch's
background-colorCSS property, either with an inlinestyleattribute, or via an external stylesheet. If you want to create a two-tone swatch in the vanilla API, set the CSSbackground-colorattribute to the shade on the bottom/right, and the CSScolorattribute to the color on the top/left.For color swatches that are acting as radio buttons or checkboxes, setting the
disabledproperty on the associated input tag will give the swatch the disabled look. For color swatches that are not radio buttons or checkboxes, you can add thecolor-swatch-disabledCSS class to the swatch itself.
Accessibility Guidelines
To support users with visual accessibility issues, each swatch must have both a
titleattribute (for color-blind users) and anaria-labelattribute (for assistive technologies), whose values are a localized description of the color choice, e.g.title="light blue" aria-label="light blue"If used as a Selection Set, see also the Accessibility Guidelines for that component.