Spectrum
Swatch group
A swatch group is a grouping of swatches that are related to each other.
Table of contents#
Anatomy#
Options#
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.
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.
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.
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.
| Property | Values | Default 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#
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.
Keyboard interactions#
| Key | Interaction |
|---|---|
| Tab | Moves focus to the next swatch in the group. |
Changelog#
| Date | Number | Notes |
|---|---|---|
| Apr 06, 2022 | 2.0.0 |
|
| Jan 12, 2021 | 1.0.0 |
|
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).
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.
Writing guidelines
Includes content standards or usage guidelines for how to write or format in-product content for the component.
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.
Swatch