Version 2.0.0

Swatch group

A swatch group is a grouping of swatches that are related to each other.

Key example of a swatch group inside a panel, label Swatches, containing 24 swatches, all with different colors, with the first swatch selected.

Anatomy#


Image illustrating through labels the component parts of a swatch group, including 13 individual swatches of different colors, grouped together to create a swatch group.

Options#


Key example of swatch groups containing 18 swatches, all different colors, showing two of the four size options available: extra-small and large.

Size#

Just like swatches, swatch groups come in four different sizes: extra-small, small, medium, and large. The medium size is the default option. This only affects the size of each individual swatch, not the spacing between them.

Key example of swatch groups containing 18 swatches, all different colors, showing three density options available: compact, regular, and spacious.

Density#

Swatch groups come in 3 densities: regular (default), compact, and spacious. Compact and spacious densities retain the same swatch size as regular density but have less or more padding between each swatch, respectively.

Key example of two swatch groups containing 11 swatches, all different colors, with selection enabled and not enabled. Swatch group with selection enabled has first swatch selected.

Enable selection#

By default, selection is not enabled in a swatch group. Selection can be enabled for a swatch group to allow for toggling. This is often used inside of swatch panels.

Key example of two swatch groups containing 11 swatches, all different colors, with selection enabled showing two selection modes available: single and multiple selection. Single selection swatch group has only the first swatch selected. Multiple selection swatch group has the first three swatches selected.

Selection mode#

When selection is enabled, a swatch group can allow for either single or multiple selection of swatches. This is often used inside of swatch panels to allow for bulk operations, such as deleting multiple swatches at once.

Key example of two swatch groups containing 11 swatches, all different colors, with empty selection allowed and not allowed. Swatch group with empty selection not allowed has first swatch selected.

Empty selection#

When selection is enabled, a swatch group's selection behavior can be set to allow for an empty selection, or not.

Table of options#

From the design point of view, each component has a number of options. These options and their names are platform agnostic, and each implementation should adapt these to fit into their framework.

PropertyValuesDefault Value
size
extra-small / small / medium / large
medium
density
compact / regular / spacious
regular
enable selection
yes / no
no
selection mode
single / multiple
Only applicable if selection is enabled.
single
allows empty selection
yes / no
Only applicable if selection is enabled.
no

Behaviors#


Key example of a swatch group containing 11 swatches, all different colors, where swatches with lower contrast have a border.

Border only for low-contrast swatches#

It’s important for users to compare colors when they’re displayed in a swatch group. Because of this, swatches within a swatch group with low contrast (below 3:1 contrast with the background) have a less prominent border compared to the swatch component when used by itself.

Low contrast color swatches have a border of gray-900 at 20%. This reduces the likelihood of the UI interfering with color perception and comparisons.

Usage guidelines#


Corner rounding in swatch groups#

A corner rounding of “none” should be used in a swatch group in order to help minimize the Hermann grid illusion that happens at the intersections of the white space within the group.

The only exception is when a swatch group only takes up a single row. In that case, use any of the rounding options.

Key examples showing correct usage of rounding in swatch groups. Swatch group containing 24 swatches, all different colors, in a grid with no rounding. Swatch group containing 4 swatches, 4 different colors, in a single row with full rounding.
Key examples showing incorrect usage of rounding in swatch groups. Swatch group containing 24 swatches, all different colors, in a grid with default rounding. The Hermann grid illusion appears at the intersections of the white space within the group.

Keyboard interactions#


KeyInteraction
TabMoves focus to the next swatch in the group.

Changelog#


DateNumberNotes
Apr 06, 20222.0.0
  • Updated all colors to 6.0.0
Jan 12, 20211.0.0
  • This component has been added to the website

Design checklist#


All interactive states

Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).

All color themes

Works properly across all four color themes (lightest, light, dark, darkest).

All platform scales

Includes a desktop scale (UWP, macOS, web desktop) and a mobile scale (iOS, Android, web mobile).

Accessible use of color

Color is not used as the only visual means of conveying information (WCAG 2.0 1.4.1).

N/A

Accessible contrast for text

Text has a contrast ratio of at least 4.5:1 for small text and at least 3:1 for large text (WCAG 2.0 1.4.3).

Accessible contrast for UI components

Visual information required to identify components and states (except inactive components) has a contrast ratio of at least 3:1 (WCAG 2.1 1.4.11).

Content design

UI language and information design considerations have been incorporated into component design.

Defined options

Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc.)

Defined behaviors

Includes guidelines for keyboard focus, layout (wrapping, truncation, overflow), animation, interactions, etc.

Usage guidelines

Includes a list of dos and don'ts that highlight best practices and common mistakes.

N/A

Writing guidelines

Includes content standards or usage guidelines for how to write or format in-product content for the component.

N/A

Internationalization guidelines

Works properly across various locales and includes guidelines for bi-directionality (RTL).

Keyboard interactions

Follows WCAG 2.0 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions.

Design tokens

All design attributes (color, typography, layout, animation, etc.) are available as design tokens.

UI kit

Includes a downloadable XD file that shows multiple options, states, color themes, and platform scales.

Generated UI kit

Includes a downloadable XD file, generated by code using design tokens defined in Spectrum DNA, and shows multiple options, states, color themes, and platform scales.

In Spectrum for Adobe XD plugin

Component is included in the Spectrum for Adobe XD plugin.