Color wheel
A color wheel lets users visually change an individual channel of a color on a circular track.
| Property | Values | Default value | Required |
|---|---|---|---|
| background | text This will vary depending on implementation. | - | |
| value | yes / no | no | no |
| min value | yes / no | no | no |
| max value | yes / no | no | no |
| step | yes / no | no | no |
| size | yes / no | no | no |
| is disabled | yes / no | no | |
| state | default / hover / down / keyboard focus | default |
{
"slug": "color-wheel",
"$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/component.json",
"$id": "https://opensource.adobe.com/spectrum-design-data/schemas/components/color-wheel.json",
"title": "Color wheel",
"description": "A color wheel lets users visually change an individual channel of a color on a circular track.",
"meta": {
"category": "inputs",
"documentationUrl": "https://spectrum.adobe.com/page/color-wheel/"
},
"type": "object",
"properties": {
"background": {
"type": "string",
"description": "This will vary depending on implementation."
},
"value": {
"type": "number",
"description": "Number (from minValue to maxValue)"
},
"minValue": {
"type": "number",
"default": 0
},
"maxValue": {
"type": "number",
"default": 360
},
"step": {
"type": "number",
"default": 1
},
"size": {
"type": "number",
"default": 192,
"description": "units: px"
},
"isDisabled": {
"type": "boolean",
"default": false
},
"state": {
"type": "string",
"enum": [
"default",
"hover",
"down",
"keyboard focus"
],
"default": "default"
}
}
}