Swatch

A 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.

Property	Values	Default value
preview	text This will vary depending on implementation.	-
size	xs / s / m / l	m
shape	square / rectangle	square
corner rounding	none / partial / full Determines the corner radius of the swatch. Partial refers to corner-radius-75.	none
is selected	yes / no	no
is disabled	yes / no	no
state	default / hover / down / keyboard focus	default

{
  "slug": "swatch",
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/component.json",
  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/components/swatch.json",
  "title": "Swatch",
  "description": "A 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.",
  "meta": {
    "category": "inputs",
    "documentationUrl": "https://spectrum.adobe.com/page/swatch/"
  },
  "type": "object",
  "properties": {
    "preview": {
      "type": "string",
      "description": "This will vary depending on implementation."
    },
    "size": {
      "type": "string",
      "enum": [
        "xs",
        "s",
        "m",
        "l"
      ],
      "default": "m"
    },
    "shape": {
      "type": "string",
      "enum": [
        "square",
        "rectangle"
      ],
      "default": "square"
    },
    "cornerRounding": {
      "type": "string",
      "enum": [
        "none",
        "partial",
        "full"
      ],
      "default": "none",
      "description": "Determines the corner radius of the swatch. Partial refers to corner-radius-75."
    },
    "isSelected": {
      "type": "boolean",
      "default": false
    },
    "isDisabled": {
      "type": "boolean",
      "default": false
    },
    "state": {
      "type": "string",
      "enum": [
        "default",
        "hover",
        "down",
        "keyboard focus"
      ],
      "default": "default"
    }
  }
}