Swatch group

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

Property	Values	Default value
size	xs / s / m / l	m
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
corner radius	none / full / partial Determines the corner radius of each swatch in the group. Partial refers to corner-radius-75.	none

{
  "slug": "swatch-group",
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/component.json",
  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/components/swatch-group.json",
  "title": "Swatch group",
  "description": "A swatch group is a grouping of swatches that are related to each other.",
  "meta": {
    "category": "inputs",
    "documentationUrl": "https://spectrum.adobe.com/page/swatch-group/"
  },
  "type": "object",
  "properties": {
    "size": {
      "type": "string",
      "enum": [
        "xs",
        "s",
        "m",
        "l"
      ],
      "default": "m"
    },
    "density": {
      "type": "string",
      "enum": [
        "compact",
        "regular",
        "spacious"
      ],
      "default": "regular"
    },
    "enableSelection": {
      "type": "boolean",
      "default": false
    },
    "selectionMode": {
      "type": "string",
      "description": "Only applicable if selection is enabled.",
      "enum": [
        "single",
        "multiple"
      ],
      "default": "single"
    },
    "allowsEmptySelection": {
      "type": "boolean",
      "default": false,
      "description": "Only applicable if selection is enabled."
    },
    "cornerRadius": {
      "type": "string",
      "enum": [
        "none",
        "full",
        "partial"
      ],
      "default": "none",
      "description": "Determines the corner radius of each swatch in the group. Partial refers to corner-radius-75."
    }
  }
}