@adobe/spectrum-design-data 3.3.0-beta.1 → 3.3.0

package/components/cards.json

@@ -16,62 +16,55 @@
     },
     {
       "type": "guideline",
-      "content": "Card component Purpose / use case Interaction type Common visual elements FlexGeneral-purpose, flexible content containerVaries (Static or Clickable)Title, preview, checkboxAssetDisplay assets like images, text documents, files, videos, materials, etc.Clickable (navigates to 1-up view), selectablePreview, filename, metadata, checkboxGalleryShow multiple images or videos in a river grid.Clickable (navigates to 1-up view), selectablePreview, badge, checkboxCollectionGroup related items such as assets or products in a library of items.Clickable (drill-in), selectablemulti or hero multi previews, collection title, checkboxProductDisplay product details for interactionClickable (drill-in), selectableCover image, thumbnail (logo), product title, checkboxHorizontalDisplaying mostly text, possibly with a cropped cover image or icon.Clickable (drill-in)Optional cropped preview, icon, or thumbnail, title, metadata"
+      "content": "Cards group related content and actions into flexible containers for browsing. They preview key information and reveal more detail on interaction."
     },
     {
       "type": "guideline",
-      "content": "Preview minimum and maximum.\n\nCard preview areas have a maximum image height aspect ratio of 3:4, and a minimum height aspect ratio of of 4:1."
+      "content": "Card preview areas have a maximum image height aspect ratio of 3:4, and a minimum height aspect ratio of of 4:1."
     },
     {
       "type": "guideline",
-      "content": "Text overflow.\n\nIf the card has a fixed height, such as in a tile grid, long titles will be truncated. Use short titles to avoid this. In layouts with variable height, like a waterfall grid, titles will wrap to fit."
+      "content": "If the card has a fixed height, such as in a tile grid, long titles will be truncated. Use short titles to avoid this. In layouts with variable height, like a waterfall grid, titles will wrap to fit."
     },
     {
       "type": "guideline",
-      "content": "Clickable cards.\n\nCards, by definition, should have some form of interaction such as viewing, editing, purchasing, etc. Some actions are exposed in buttons, and others simply occur by clicking the card. If a card only has an ability to be opened or viewed in more detail, do not include a button. Clicking anywhere on the card should perform that action. If a card has other interactive elements such as a hidden actions menu or an avatar, but no buttons, the whole card (outside of those elements) should be clickable."
+      "content": "Cards, by definition, should have some form of interaction such as viewing, editing, purchasing, etc. Some actions are exposed in buttons, and others simply occur by clicking the card."
     },
     {
       "type": "guideline",
-      "content": "Buttons in cards.\n\nIf there's only one action (that's not opening or viewing the card), use a button to communicate that action. If there are two or more available actions, and one of those actions is to open or view the card, use a button to communicate \"View\" or \"Open,\" instead of relying on clicking on the card. If a standard card has a footer with a button, only the button is clickable. If a card has a preview, clicking the preview will open that card. When a preview is purely decorative, it is not clickable."
+      "content": "If a card only has an ability to be opened or viewed in more detail, do not include a button. Clicking anywhere on the card should perform that action."
     },
     {
       "type": "guideline",
-      "content": "Ghost loading.\n\nWhen a group of cards are loading, they follow the ghost loading convention. There are 5 phases for ghost loading: Card group (including metadata) ghost loads. If metadata for all cards is loaded before all preview images are loaded, the metadata is displayed for all cards as soon as the last piece of metadata loads. Previews continue to ghost load. If all preview images load within the x period (a period of time, usually measured in seconds, that you need to specify depending on the use case), they are shown as soon as the last preview loads. If all previews have not finished loading at the end of the x period, the loaded previews are shown, and the pending previews receive individual circle loaders. The group is no longer in a ghost loading state. If the preview load times out, an error is shown along with a mechanism to retry loading."
+      "content": "If a card has other interactive elements such as a hidden actions menu or an avatar, but no buttons, the whole card (outside of those elements) should be clickable."
     },
     {
       "type": "guideline",
-      "content": "Keep cards simple.\n\nCards are meant to just show a taste of the available information. Don't overload cards with more information than necessary."
+      "content": "If there’s only one action (that’s not opening or viewing the card), use a button to communicate that action. If there are two or more available actions, and one of those actions is to open or view the card, use a button to communicate “View” or “Open,” instead of relying on clicking on the card."
     },
     {
-      "type": "do-dont",
-      "content": "Don't add buttons to quiet cards",
-      "dont": "Only standard cards can have a footer, and buttons can only appear inside a footer."
-    },
-    {
-      "type": "do-dont",
-      "content": "Don't align individual cards to the column grid",
-      "dont": "Individual cards are not aligned to individual columns in the page's responsive column grid. Instead, groups of cards are aligned to the column grid in a layout region."
+      "type": "guideline",
+      "content": "If a standard card has a footer with a button, only the button is clickable. If a card has a preview, clicking the preview will open that card. When a preview is purely decorative, it is not clickable."
     },
     {
-      "type": "do-dont",
-      "content": "Don't auto-play videos",
-      "dont": "If the preview is a video clip or other moving item, do not automatically play the clip or motion. Save the movement for either when a user hovers on the card or when they click on a play button."
+      "type": "guideline",
+      "content": "When a group of cards are loading, they follow the ghost loading convention. There are 5 phases for ghost loading:"
     },
     {
       "type": "guideline",
-      "content": "RTL.\n\nCards in RTL languages mirror their horizontal layout and directional cues, while their interaction behavior stays the same. Any element with a left‑right relationship flips. Thumbnails or avatars that appear on the left in LTR move to the right in RTL. Metadata stacks reverse order, such as an icon followed by text becoming text followed by an icon. Action areas, including overflow menus, shift from the top right of the card to the top left. Vertical layout and center‑aligned elements do not change. Most icons remain the same, but directional icons, such as arrows and chevrons, flip to match reading direction."
+      "content": "Cards are meant to just show a taste of the available information. Don’t overload cards with more information than necessary."
     },
     {
       "type": "guideline",
-      "content": "Keyboard interactions.\n\nKey Interaction TabMoves focus forward to the next card.Arrow keysMoves focus within the card to focusable items within the card. If a button is included on the cards, the button should receive focus first. If there are multiple buttons, the primary or CTA button should receive focus first.Shift + TabMoves focus backward to the previous card.Return or EnterIf the card itself is clickable, Return or Enter will open the card. If the card is not clickable but has buttons, and the buttons or another item within the card is focused, that action is performed.SpaceIf the card is selectable, the space bar will toggle selection.Ctrl / Command + Arrow keysNon-contiguous selection of cards."
+      "content": "Only standard cards can have a footer, and buttons can only appear inside a footer."
     },
     {
       "type": "guideline",
-      "content": "Cursor guidelines.\n\nNon-interactive cards Cursor Description Default (Arrow)Use the default cursor for non-interactive cards. Cards with interactive elements Cursor Description Default (Arrow)Use the default cursor for the non-interactive portions of the card.PointerUse the pointer cursor for the interactive elements.Grab handUse the grab hand cursor when hovering over cards that are draggable. Cards that have other interactive elements that are also draggable should first enter a drag mode before showing the grab cursors and allowing a drag action.Grab fistUse the grab fist cursor when actively dragging a card. Fully interactive cards Cursor Description PointerUse the pointer cursor for the entire card surface when the card is interactive, for example, if clicking the card will navigate to a one-up view.Grab handUse the grab hand cursor when hovering over cards that are draggable.Grab fistUse the grab fist cursor when actively dragging a card."
+      "content": "Individual cards are not aligned to individual columns in the page's responsive column grid. Instead, groups of cards are aligned to the column grid in a layout region."
     },
     {
       "type": "guideline",
-      "content": "WCAG 2.2 compliance.\n\nAny criterion not mention in the below table are not applicable to this component or are resolved with underlying requirements, engineering, and styles of the entire system. 1. Perceivable Requirement Criterion Level Compliance Non-text content 1.1.1 ANon‑text elements—such as icons or illustrations used in cards—must provide a text alternative that communicates the control’s purpose. All controls, especially icon‑only controls, need an accessible name (for example, via a title, aria‑label, or associated text) so screen readers can announce their function.Info and relationships, Identify purpose 1.3.1, 1.3.6 AACards should be understandable by assistive technologies like screen readers. This means the proper semantic HTML or ARIA role should be utilized.Orientation 1.3.4 AACards are available in both vertical and horizontal orientations.Use of color 1.4.1 AColor is not used as a means to convey information or distinguish elements, indicate an action, or prompt a response. Color is always paired with text or icons, and is only used to enhance the meaning of the text.Text contrast 1.4.3 AALarge text has a contrast ratio of at least 3:1, and small text has a contrast ratio of at least 4.5:1. Incidental text such as disabled, hidden, or decorative text has no contrast requirement.Visual presentation 1.4.8 AAAThe width of text blocks is no more than 80 characters (40 for CJK languages), and text is never justified.Non-text contrast 1.4.11 AAThe visual presentation of illustrations, icons, and component states have a contrast ratio of at least 3:1.Text spacing 1.4.12 AALine height of text is at least 1.5x the font size. 2. Operable Requirement Criterion Level Compliance Keyboard 2.1.1, 2.1.3 A, AAAAll functionality of the component is operable through a keyboard without specific timing for keystrokes.Keyboard traps 2.1.2 AFocus can be moved away from the component using only a keyboard.Seizures and physical reactions 2.3.1, 2.3.2, 2.3.3 A, AAA, AAAThere is no flashing content or unnecessary motion or animation in this component.Focus order 2.4.3 ANavigation sequences receive focus in an order that preserves meaning and operability.Focus visible 2.4.7 AAKeyboard states use an indicator that is visible with at least 3:1 contrast."
+      "content": "If the preview is a video clip or other moving item, do not automatically play the clip or motion. Save the movement for either when a user hovers on the card or when they click on a play button."
     }
   ],
   "options": {
@@ -80,23 +73,45 @@
       "default": "asset",
       "description": "Determines which card layout variant is used.",
       "values": [
-        { "value": "asset" },
-        { "value": "collection" },
-        { "value": "flex" },
-        { "value": "gallery" },
-        { "value": "horizontal" },
-        { "value": "product" }
+        {
+          "value": "asset"
+        },
+        {
+          "value": "collection"
+        },
+        {
+          "value": "flex"
+        },
+        {
+          "value": "gallery"
+        },
+        {
+          "value": "horizontal"
+        },
+        {
+          "value": "product"
+        }
       ]
     }
   },
-  "lifecycle": { "introduced": "1.0.0-draft" },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  },
   "accessibility": {
     "intents": ["select"],
     "focusable": true,
     "keyboardIntents": ["activate"],
     "wcag": [
-      { "criterion": "2.1.1", "level": "A", "title": "Keyboard" },
-      { "criterion": "4.1.2", "level": "A", "title": "Name, Role, Value" }
+      {
+        "criterion": "2.1.1",
+        "level": "A",
+        "title": "Keyboard"
+      },
+      {
+        "criterion": "4.1.2",
+        "level": "A",
+        "title": "Name, Role, Value"
+      }
     ]
   }
 }

package/components/checkbox-group.json

@@ -9,6 +9,13 @@
     "category": "inputs",
     "documentationUrl": "https://spectrum.adobe.com/page/checkbox-group/"
   },
+  "implementations": [
+    {
+      "platform": "web",
+      "componentName": "CheckboxGroup",
+      "package": "@react-spectrum/s2"
+    }
+  ],
   "documentBlocks": [
     {
       "type": "purpose",
@@ -16,51 +23,113 @@
     },
     {
       "type": "guideline",
-      "content": "RTL.\n\nFor RTL (right-to-left) languages, the layout of the checkbox group (and its component parts) is mirrored. The checkmarks and icons are placed on the right side of the text, and text is aligned to the right."
+      "content": "When a description is present and an error is triggered, it is replaced with an error message. Once the error is resolved, the help text description reappears."
+    },
+    {
+      "type": "guideline",
+      "content": "A checkbox group in a disabled state shows that a selection exists, but is not available in that circumstance. This can be used to maintain layout continuity and communicate that an action may become available later. The field label, checkboxes, and help text are all displayed in a disabled state when the checkbox group is disabled."
+    },
+    {
+      "type": "guideline",
+      "content": "Checkbox groups can be either horizontal or vertical. By default, checkbox groups are stacked vertically. Use a horizontal checkbox group when vertical space is limited."
+    },
+    {
+      "type": "guideline",
+      "content": "Checkbox groups can be marked as optional or required, depending on the situation. Optional checkbox groups are either denoted with text added to the end of the label — “(optional)” — or have no indication at all."
+    },
+    {
+      "type": "guideline",
+      "content": "For required checkbox groups, there are two necessity indicator options: a “(required)” label or an asterisk. If you use an asterisk, be sure to include help text to explain what the asterisk means."
     },
     {
       "type": "guideline",
-      "content": "Keyboard interactions.\n\nKey Interaction TabTabbing into a group of checkboxes places the focus on the first checkbox (only one checkbox receives the keyboard focus at a time).Shift + TabMoves focus to the previous item or group of items.Arrow keysMoves focus through the group of checkboxes.Page Up or Page DownMoves focus to the previous or next checkbox in the group (last becomes first, and first becomes last).Home or EndMoves focus to the first or last checkbox in the group.Space or EnterToggles the checkbox between selected and not selected. If the checkbox is partially selected initially, the checkbox becomes selected first (subsequent toggles alternate normally between selected and not selected)."
+      "content": "The asterisk used in this component is an icon that has specific spacing from the label text — not part of the label text itself."
     },
     {
       "type": "guideline",
-      "content": "Cursor guidelines.\n\nCursor Description PointerUse the pointer cursor for interactive elements like checkboxes."
+      "content": "Labels can be placed either on top or on the side. Top labels are the default and are recommended because they work better with long copy, localization, and responsive layouts. Side labels are most useful when vertical space is limited."
     },
     {
       "type": "guideline",
-      "content": "WCAG 2.2 compliance.\n\nAny criterion not mention in the below table are not applicable to this component or are resolved with underlying requirements, engineering, and styles of the entire system. 1. Perceivable Requirement Criterion Level Compliance Non-text content 1.1.1 ANon‑text elements—such as the checkbox control—must provide a text alternative that communicates the control’s purpose. All controls, especially icon‑only controls, need an accessible name (for example, via a title, aria‑label, or associated text) so screen readers can announce their function.Info and relationships, Identify purpose 1.3.1, 1.3.6 A, AAACheckboxes should be understandable by assistive technologies like screen readers. This means using the proper semantic HTML or ARIA role should be utilized.Orientation 1.3.4 AACheckbox groups are available in both vertical and horizontal orientations.Use of color 1.4.1 AColor is not used as a means to convey information or distinguish elements, indicate an action, or prompt a response. Color is always paired with text or icons, and is only used to enhance the meaning of the text.Text contrast minimums 1.4.3 AALarge text has a contrast ratio of at least 3:1, and small text has a contrast ratio of at least 4.5:1. Incidental text such as disabled, hidden, or decorative text has no contrast requirement.Resize text 1.4.4 AACheckboxes should be built in such a way that they can be resized without assistive technology up to 200%.Visual presentation 1.4.8 AAAThe width of text blocks is no more than 80 characters (40 for CJK languages), and text is never justified.Non-text contrast 1.4.11 AAThe checkbox control and its various states have a contrast ratio of at least 3:1.Text spacing 1.4.12 AALine height of text is at least 1.5x the font size when the label is wrapped. 2. Operable RequirementCriterionLevel Compliance Keyboard 2.1.1, 2.1.3 A, AAAAll functionality of the component is operable through a keyboard without specific timing for keystrokes.Keyboard traps 2.1.2 AFocus can be moved away from the component using only a keyboard.Seizures and physical feactions 2.3.1, 2.3.2, 2.3.3 A, AAA, AAAThere is no flashing content or unnecessary motion or animation in this component.Focus order 2.4.3 ANavigation sequences receive focus in an order that preserves meaning and operability.Focus visible 2.4.7 AAKeyboard states use an indicator that is visible with at least 3:1 contrast."
+      "content": "Checkbox groups should always have a label. In rare cases where context is sufficient and an accessibility expert has reviewed the design, the label could be undefined. These checkbox groups without a visible label should still include an aria-label in HTML (depending on the context, “aria-label” or “aria-labelledby”)."
     }
   ],
   "options": {
-    "label": { "type": "string" },
+    "label": {
+      "type": "string"
+    },
     "labelPosition": {
       "type": "string",
       "default": "top",
-      "values": [{ "value": "top" }, { "value": "side" }]
+      "values": [
+        {
+          "value": "top"
+        },
+        {
+          "value": "side"
+        }
+      ]
     },
     "necessityIndicator": {
       "type": "string",
       "default": "icon",
-      "values": [{ "value": "text" }, { "value": "icon" }]
+      "values": [
+        {
+          "value": "text"
+        },
+        {
+          "value": "icon"
+        }
+      ]
+    },
+    "isRequired": {
+      "type": "boolean",
+      "default": false
     },
-    "isRequired": { "type": "boolean", "default": false },
     "orientation": {
       "type": "string",
       "default": "vertical",
-      "values": [{ "value": "horizontal" }, { "value": "vertical" }]
+      "values": [
+        {
+          "value": "horizontal"
+        },
+        {
+          "value": "vertical"
+        }
+      ]
     },
-    "isError": { "type": "boolean", "default": false },
-    "isDisabled": { "type": "boolean", "default": false },
-    "description": { "type": "string" },
-    "errorMessage": { "type": "string" }
+    "isError": {
+      "type": "boolean",
+      "default": false
+    },
+    "isDisabled": {
+      "type": "boolean",
+      "default": false
+    },
+    "description": {
+      "type": "string"
+    },
+    "errorMessage": {
+      "type": "string"
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
   },
-  "lifecycle": { "introduced": "1.0.0-draft" },
   "accessibility": {
     "intents": ["choose"],
     "focusable": false,
     "wcag": [
-      { "criterion": "1.3.1", "level": "A", "title": "Info and Relationships" },
-      { "criterion": "4.1.2", "level": "A", "title": "Name, Role, Value" }
+      {
+        "criterion": "1.3.1",
+        "level": "A",
+        "title": "Info and Relationships"
+      },
+      {
+        "criterion": "4.1.2",
+        "level": "A",
+        "title": "Name, Role, Value"
+      }
     ]
   }
 }

package/components/checkbox.json

@@ -9,6 +9,13 @@
     "category": "inputs",
     "documentationUrl": "https://spectrum.adobe.com/page/checkbox/"
   },
+  "implementations": [
+    {
+      "platform": "web",
+      "componentName": "Checkbox",
+      "package": "@react-spectrum/s2"
+    }
+  ],
   "documentBlocks": [
     {
       "type": "purpose",
@@ -16,51 +23,71 @@
     },
     {
       "type": "guideline",
-      "content": "Keyboard focus.\n\nA checkbox can be navigated using a keyboard. The keyboard focus state takes the checkbox's visual hover state and adds a blue ring to the checkbox in focus."
+      "content": "Checkboxes support selecting one or more items from a list. Each item can be selected independently or in combination with others."
+    },
+    {
+      "type": "guideline",
+      "content": "Checkboxes can be marked as having an error to show that a selection needs to be made in order to move forward, or that a selection that was made is invalid. For example, in a form that requires a user to acknowledge legal terms before proceeding, the checkbox would show an unchecked error to communicate that it needs to be selected."
+    },
+    {
+      "type": "guideline",
+      "content": "A checkbox in a disabled state shows that a selection exists, but is not available in that circumstance. This can be used to maintain layout continuity and communicate that an action may become available later."
     },
     {
       "type": "guideline",
-      "content": "Text overflow.\n\nWhen the label is too long for the horizontal space available, it wraps to form another line."
+      "content": "By default, checkboxes are not emphasized (gray). This version is optimal for when the checkbox is not the core part of an interface, such as in application panels, where all visual components are monochrome in order to direct focus to the content."
     },
     {
       "type": "guideline",
-      "content": "Emphasized or not?\n\nEmphasized checkboxes are optimal for forms, settings, etc. where the checkboxes need to be noticed, or to bring attention to selected items such as cards or table rows. Not emphasized checkboxes are optimal for application panels where all the visual components are monochrome in order to direct focus to the canvas."
+      "content": "The emphasized (blue) version provides a visual prominence that is optimal for forms, settings, lists or grids of assets, and other situations where a checkbox need to be noticed."
     },
     {
       "type": "guideline",
-      "content": "When to use a standalone checkbox.\n\nStandalone checkboxes should be used in situations where the context is clear without an associated text label. An example of this would be when a checkbox is connected to other controls inside of a panel."
+      "content": "Checkboxes come in four different sizes: small, medium, large, and extra-large. The medium size is the default and most frequently used option. Use the other sizes sparingly; they should be used to create a hierarchy of importance within the page."
     },
     {
       "type": "guideline",
-      "content": "Checkbox vs. radio button.\n\nCheckboxes and radio buttons are not interchangeable. A set of checkboxes should be used to select as many options as desired (or none). A set of radio buttons should be used to select only a single option from a list of mutually exclusive options."
+      "content": "Checkboxes can be in an indeterminate state when they represent both selected and not selected values."
     },
     {
       "type": "guideline",
-      "content": "Checkbox vs. switch.\n\nUse checkboxes to show selection, such as choosing multiple table rows. Use switches to show activation, like turning a setting on or off. Unlike switches, checkboxes can display an error state."
+      "content": "Checkboxes can be selected or not selected."
     },
     {
       "type": "guideline",
-      "content": "Label groups of related checkboxes.\n\nSets of checkboxes should always have a clear label that describes what the list of options represents and guides users what to do. This is important for accessibility, since a screen reader will read the label before each option."
+      "content": "Checkboxes should always have a label. When the label is not defined, a checkbox becomes standalone. Standalone checkboxes are only used when their connection to other components is clear and they give sufficient context — for example, in application panels."
     },
     {
       "type": "guideline",
-      "content": "Representing mixed values.\n\nWhen a checkbox represents multiple values that are not identical, the checkbox should appear in the indeterminate state. Any subsequent click or tap should select the checkbox, and update all values to be selected. Another click or tap after that should deselect the checkbox, and update all values to be not selected."
+      "content": "A checkbox can be navigated using a keyboard. The keyboard focus state takes the checkbox’s visual hover state and adds a blue ring to the checkbox in focus."
     },
     {
       "type": "guideline",
-      "content": "RTL.\n\nFor RTL (right-to-left) languages, the layout of the checkbox is mirrored. The checkmark is placed on the right side of the text."
+      "content": "When the label is too long for the horizontal space available, it wraps to form another line."
     },
     {
       "type": "guideline",
-      "content": "Keyboard interactions.\n\nKey Interaction TabTabbing into a group of checkboxes places the focus on the first checkbox (only one checkbox receives the keyboard focus at a time).Shift + TabMoves focus to the previous item or group of items.Space or EnterToggles the checkbox between selected and not selected. If the checkbox is partially selected initially, the checkbox becomes selected first (subsequent toggles alternate normally between selected and not selected)."
+      "content": "Emphasized checkboxes are optimal for forms, settings, etc. where the checkboxes need to be noticed, or to bring attention to selected items such as cards or table rows. Not emphasized checkboxes are optimal for application panels where all the visual components are monochrome in order to direct focus to the canvas."
     },
     {
       "type": "guideline",
-      "content": "Cursor guidelines.\n\nCursor Description PointerUse the pointer cursor for all interactive components in every state."
+      "content": "Standalone checkboxes should be used in situations where the context is clear without an associated text label. An example of this would be when a checkbox is connected to other controls inside of a panel."
     },
     {
       "type": "guideline",
-      "content": "WCAG 2.2 compliance.\n\nAny criterion not mention in the below table are not applicable to this component or are resolved with underlying requirements, engineering, and styles of the entire system. 1. Perceivable Requirement Criterion Level Compliance Non-text content 1.1.1 ANon‑text elements—such as the checkbox control—must provide a text alternative that communicates the control’s purpose. All controls, especially icon‑only controls, need an accessible name (for example, via a title, aria‑label, or associated text) so screen readers can announce their function.Info and relationships, Identify purpose 1.3.1, 1.3.6 A, AAACheckboxes should be understandable by assistive technologies like screen readers. This means using the proper semantic HTML or ARIA role should be utilized.Orientation 1.3.4 AACheckbox groups are available in both vertical and horizontal orientations.Use of color 1.4.1 AColor is not used as a means to convey information or distinguish elements, indicate an action, or prompt a response. Color is always paired with text or icons, and is only used to enhance the meaning of the text.Text contrast minimums 1.4.3 AALarge text has a contrast ratio of at least 3:1, and small text has a contrast ratio of at least 4.5:1. Incidental text such as disabled, hidden, or decorative text has no contrast requirement.Resize text 1.4.4 AACheckboxes should be built in such a way that they can be resized without assistive technology up to 200%.Visual presentation 1.4.8 AAACheckbox labels can wrap to multiple lines, so the 80-character (40 CJK) and no-justified-text guidance applies the same way it does for the group.Non-text contrast 1.4.11 AAThe checkbox control and its various states have a contrast ratio of at least 3:1.Text spacing 1.4.12 AALine height of text is at least 1.5x the font size when the label is wrapped. 2. Operable Requirement Criterion Level Compliance Keyboard 2.1.1, 2.1.3 A, AAAAll functionality of the component is operable through a keyboard without specific timing for keystrokes.Keyboard traps 2.1.2 AFocus can be moved away from the component using only a keyboard.Seizures and physical feactions 2.3.1, 2.3.2, 2.3.3 A, AAA, AAAThere is no flashing content or unnecessary motion or animation in this component.Focus order 2.4.3 ANavigation sequences receive focus in an order that preserves meaning and operability.Focus visible 2.4.7 AAKeyboard states use an indicator that is visible with at least 3:1 contrast."
+      "content": "Checkboxes and radio buttons are not interchangeable. A set of checkboxes should be used to select as many options as desired (or none). A set of radio buttons should be used to select only a single option from a list of mutually exclusive options."
+    },
+    {
+      "type": "guideline",
+      "content": "Use checkboxes to show selection, such as choosing multiple table rows. Use switches to show activation, like turning a setting on or off. Unlike switches, checkboxes can display an error state."
+    },
+    {
+      "type": "guideline",
+      "content": "Sets of checkboxes should always have a clear label that describes what the list of options represents and guides users what to do. This is important for accessibility, since a screen reader will read the label before each option."
+    },
+    {
+      "type": "guideline",
+      "content": "When a checkbox represents multiple values that are not identical, the checkbox should appear in the indeterminate state. Any subsequent click or tap should select the checkbox, and update all values to be selected. Another click or tap after that should deselect the checkbox, and update all values to be not selected."
     }
   ],
   "options": {
@@ -68,7 +95,10 @@
       "type": "string",
       "description": "When the label is not defined, the checkbox appears as a standalone checkbox."
     },
-    "isSelected": { "type": "boolean", "default": false },
+    "isSelected": {
+      "type": "boolean",
+      "default": false
+    },
     "isIndeterminate": {
       "type": "boolean",
       "default": false,
@@ -78,31 +108,71 @@
       "type": "string",
       "default": "m",
       "values": [
-        { "value": "s" },
-        { "value": "m" },
-        { "value": "l" },
-        { "value": "xl" }
+        {
+          "value": "s"
+        },
+        {
+          "value": "m"
+        },
+        {
+          "value": "l"
+        },
+        {
+          "value": "xl"
+        }
       ]
     },
-    "isEmphasized": { "type": "boolean", "default": false },
-    "isDisabled": { "type": "boolean", "default": false },
-    "isError": { "type": "boolean", "default": false }
+    "isEmphasized": {
+      "type": "boolean",
+      "default": false
+    },
+    "isDisabled": {
+      "type": "boolean",
+      "default": false
+    },
+    "isError": {
+      "type": "boolean",
+      "default": false
+    }
   },
   "states": [
-    { "name": "hover", "trigger": "interaction" },
-    { "name": "down", "trigger": "interaction" },
-    { "name": "keyboard-focus", "trigger": "interaction" }
+    {
+      "name": "hover",
+      "trigger": "interaction"
+    },
+    {
+      "name": "down",
+      "trigger": "interaction"
+    },
+    {
+      "name": "keyboard-focus",
+      "trigger": "interaction"
+    }
   ],
-  "lifecycle": { "introduced": "1.0.0-draft" },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  },
   "accessibility": {
     "role": "checkbox",
     "intents": ["choose"],
     "focusable": true,
     "keyboardIntents": ["activate"],
     "wcag": [
-      { "criterion": "1.3.1", "level": "A", "title": "Info and Relationships" },
-      { "criterion": "2.1.1", "level": "A", "title": "Keyboard" },
-      { "criterion": "4.1.2", "level": "A", "title": "Name, Role, Value" }
+      {
+        "criterion": "1.3.1",
+        "level": "A",
+        "title": "Info and Relationships"
+      },
+      {
+        "criterion": "2.1.1",
+        "level": "A",
+        "title": "Keyboard"
+      },
+      {
+        "criterion": "4.1.2",
+        "level": "A",
+        "title": "Name, Role, Value"
+      }
     ]
   }
 }