Switch
Switches allow users to turn an individual option on or off. They are usually used to activate or deactivate a specific setting.
| Property | Values | Default value | Required |
|---|---|---|---|
| label | text | - | |
| is selected | yes / no | no | |
| size | s / m / l / xl | m | |
| is emphasized | yes / no | no | |
| is disabled | yes / no | no | |
| is read only | yes / no | no | |
| state | default / hover / down / keyboard focus | default |
{
"slug": "switch",
"$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/component.json",
"$id": "https://opensource.adobe.com/spectrum-design-data/schemas/components/switch.json",
"title": "Switch",
"description": "Switches allow users to turn an individual option on or off. They are usually used to activate or deactivate a specific setting.",
"meta": {
"category": "inputs",
"documentationUrl": "https://spectrum.adobe.com/page/switch/"
},
"type": "object",
"properties": {
"label": {
"type": "string"
},
"isSelected": {
"type": "boolean",
"default": false
},
"size": {
"type": "string",
"enum": [
"s",
"m",
"l",
"xl"
],
"default": "m"
},
"isEmphasized": {
"type": "boolean",
"default": false
},
"isDisabled": {
"type": "boolean",
"default": false
},
"isReadOnly": {
"type": "boolean",
"default": false
},
"state": {
"type": "string",
"enum": [
"default",
"hover",
"down",
"keyboard focus"
],
"default": "default"
}
}
}