@salesforce/afv-skills 1.14.0 → 1.16.0

package/skills/applying-slds/metadata/blueprints/components/checkbox-button-group.yaml

@@ -0,0 +1,192 @@
+name: "Checkbox Button Group"
+
+description: "A styled checkable input group that communicates if an option(s) are true, false or indeterminate. A set of checkbox buttons wrapped in a fieldset that is also a form element."
+
+category: "Input"
+
+slds_classes:
+  root: "slds-checkbox_button-group"
+  elements:
+    - class: "slds-checkbox_button"
+      description: "Individual checkbox button within the group"
+      purpose: "Container for each checkbox option in the button group"
+    - class: "slds-checkbox_faux"
+      description: "Visual checkbox replacement styled as a button"
+      purpose: "Custom-styled checkbox appearance that looks like a button"
+    - class: "slds-checkbox_button__label"
+      description: "Label element for the checkbox button"
+      purpose: "Provides clickable area and contains the checkbox faux element"
+  modifiers: []
+  states:
+    - class: "slds-has-error"
+      description: "Error state styling for the form element"
+      trigger: "When checkbox group validation fails"
+    - class: "slds-is-disabled"
+      description: "Disabled state styling"
+      trigger: "When checkbox group is not interactive"
+
+variants:
+  - name: "Base"
+    description: "Standard checkbox button group"
+    classes: ["slds-checkbox_button-group"]
+    usage_context: "Default checkbox button group implementation"
+    differences: "Group of checkbox buttons with shared border and styling"
+
+lightning_component:
+  name: ""
+  url: "https://developer.salesforce.com/docs/component-library/overview/components"
+  mapping_notes: "No direct Lightning Base Component - use checkbox-button components in a group"
+
+accessibility:
+  keyboard_support:
+    - "Tab to navigate between checkbox buttons"
+    - "Space to toggle checkbox state"
+    - "Arrow keys may navigate between options in some implementations"
+  screen_reader:
+    - "Fieldset legend announced as group label"
+    - "Checkbox state announced (checked/unchecked)"
+    - "Label text read with each checkbox"
+    - "Error messages associated and announced"
+  aria_attributes:
+    - "aria-describedby for error messages"
+    - "aria-invalid when validation fails"
+    - "aria-required for required checkbox groups"
+    - "fieldset and legend for group semantics"
+
+usage_guidelines:
+  when_to_use:
+    - "When users need to select multiple options from a related set"
+    - "For compact selection interfaces where button styling is preferred"
+    - "When options are closely related and benefit from visual grouping"
+    - "For scheduling, filtering, or multi-select scenarios"
+  when_not_to_use:
+    - "For mutually exclusive options (use radio button group instead)"
+    - "When only one option can be selected"
+    - "For simple binary choices (use single checkbox)"
+    - "When space is very limited (consider dropdown instead)"
+  best_practices:
+    - "Use clear, descriptive legend text for the group"
+    - "Keep option labels short and concise"
+    - "Group related options logically"
+    - "Provide immediate visual feedback for selections"
+    - "Ensure adequate touch target size for mobile"
+    - "Use error states to indicate validation issues"
+  common_mistakes:
+    - "Using checkbox button group for mutually exclusive options"
+    - "Making labels too long or unclear"
+    - "Not providing proper fieldset/legend structure"
+    - "Missing error state handling"
+    - "Inadequate spacing between buttons"
+
+code_examples:
+  - title: "Basic Checkbox Button Group"
+    code: |
+      <fieldset class="slds-form-element">
+        <legend class="slds-form-element__legend slds-form-element__label">
+          Scheduled Day(s)
+        </legend>
+        <div class="slds-form-element__control">
+          <div class="slds-checkbox_button-group">
+            <span class="slds-button slds-checkbox_button">
+              <input type="checkbox" name="checkbox" id="checkbox-monday" value="monday" />
+              <label class="slds-checkbox_button__label" for="checkbox-monday">
+                <span class="slds-checkbox_faux">Monday</span>
+              </label>
+            </span>
+            <span class="slds-button slds-checkbox_button">
+              <input type="checkbox" name="checkbox" id="checkbox-tuesday" value="tuesday" />
+              <label class="slds-checkbox_button__label" for="checkbox-tuesday">
+                <span class="slds-checkbox_faux">Tuesday</span>
+              </label>
+            </span>
+            <span class="slds-button slds-checkbox_button">
+              <input type="checkbox" name="checkbox" id="checkbox-wednesday" value="wednesday" />
+              <label class="slds-checkbox_button__label" for="checkbox-wednesday">
+                <span class="slds-checkbox_faux">Wednesday</span>
+              </label>
+            </span>
+          </div>
+        </div>
+      </fieldset>
+    description: "Basic checkbox button group with three day options"
+  - title: "Checkbox Button Group with Error State"
+    code: |
+      <fieldset class="slds-form-element slds-has-error">
+        <legend class="slds-form-element__legend slds-form-element__label">
+          Select at least one option
+        </legend>
+        <div class="slds-form-element__control">
+          <div class="slds-checkbox_button-group">
+            <span class="slds-button slds-checkbox_button">
+              <input type="checkbox" name="checkbox" id="checkbox-error-1" value="option1" aria-describedby="checkbox-error-message" />
+              <label class="slds-checkbox_button__label" for="checkbox-error-1">
+                <span class="slds-checkbox_faux">Option 1</span>
+              </label>
+            </span>
+            <span class="slds-button slds-checkbox_button">
+              <input type="checkbox" name="checkbox" id="checkbox-error-2" value="option2" />
+              <label class="slds-checkbox_button__label" for="checkbox-error-2">
+                <span class="slds-checkbox_faux">Option 2</span>
+              </label>
+            </span>
+          </div>
+        </div>
+        <div id="checkbox-error-message" class="slds-form-element__help">This field is required</div>
+      </fieldset>
+    description: "Checkbox button group with error state and validation message"
+  - title: "Disabled Checkbox Button Group"
+    code: |
+      <fieldset class="slds-form-element">
+        <legend class="slds-form-element__legend slds-form-element__label">
+          Disabled Options
+        </legend>
+        <div class="slds-form-element__control">
+          <div class="slds-checkbox_button-group">
+            <span class="slds-button slds-checkbox_button">
+              <input type="checkbox" name="checkbox" id="checkbox-disabled-1" value="option1" disabled />
+              <label class="slds-checkbox_button__label" for="checkbox-disabled-1">
+                <span class="slds-checkbox_faux">Disabled Option 1</span>
+              </label>
+            </span>
+            <span class="slds-button slds-checkbox_button">
+              <input type="checkbox" name="checkbox" id="checkbox-disabled-2" value="option2" disabled checked />
+              <label class="slds-checkbox_button__label" for="checkbox-disabled-2">
+                <span class="slds-checkbox_faux">Disabled Option 2 (Checked)</span>
+              </label>
+            </span>
+          </div>
+        </div>
+      </fieldset>
+    description: "Checkbox button group with disabled state options"
+
+styling_hooks: []
+
+dependencies:
+  css_files: ["checkbox-button-group.css", "form-element.css", "checkbox-button.css"]
+  javascript: []
+  icons: []
+  other_components: ["form-element", "checkbox-button"]
+
+related_components:
+  - name: "Checkbox Button"
+    relationship: "similar"
+    description: "Individual checkbox buttons that make up the group"
+  - name: "Radio Button Group"
+    relationship: "alternative"
+    description: "For mutually exclusive options"
+  - name: "Checkbox"
+    relationship: "similar"
+    description: "Standard checkbox input for single selections"
+
+references:
+  official_docs: "https://v1.lightningdesignsystem.com/components/checkbox-button-group/"
+  design_guidelines: "https://v1.lightningdesignsystem.com/components/checkbox-button-group/"
+metadata:
+  version: "1.0.0"
+  last_updated: "2025-01-15"
+  author: "SLDS Documentation Team"
+  slds_version: "2.27.2"
+  review_status: "complete"
+  source: "official-slds"
+  notes: "Created from official SLDS documentation and design-system-internal source code with CSS selector annotations"
+

package/skills/applying-slds/metadata/blueprints/components/checkbox-button.yaml

@@ -0,0 +1,204 @@
+name: Checkbox Button
+description: A checkbox input styled as a button that allows users to toggle selection states, providing an alternative visual
+  presentation to traditional checkboxes with enhanced interaction design.
+category: Input
+slds_classes:
+  root: slds-checkbox_button
+  elements:
+  - class: slds-checkbox_button-group
+    description: Container for checkbox button groups
+    purpose: Groups related checkbox buttons
+  - class: slds-checkbox_button
+    description: Checkbox button wrapper
+    purpose: Contains checkbox input and label styling
+  - class: slds-checkbox_button__label
+    description: Checkbox button label
+    purpose: Provides the button appearance and text
+  - class: slds-checkbox_faux
+    description: Visual checkbox indicator
+    purpose: Button-styled visual representation
+  modifiers: []
+  states:
+  - class: slds-is-selected
+    description: Selected checkbox button state
+    trigger: Applied when checkbox is checked
+  - class: slds-has-focus
+    description: Focused checkbox button state
+    trigger: Applied when checkbox button has focus
+  - class: slds-is-disabled
+    description: Disabled checkbox button state
+    trigger: Applied when checkbox is disabled
+variants:
+- name: Base
+  description: Standard checkbox button
+  classes:
+  - slds-checkbox_button
+  usage_context: Default implementation for button-style checkboxes
+  differences: Basic button-styled checkbox with standard sizing
+- name: Group
+  description: Multiple checkbox buttons in a group
+  classes:
+  - slds-checkbox_button-group
+  usage_context: When multiple related checkbox buttons are used together
+  differences: Grouped layout with consistent spacing and alignment
+- name: Stretch
+  description: Full-width checkbox button
+  classes:
+  - slds-checkbox_button
+  usage_context: When button should fill container width
+  differences: Button stretches to full container width
+lightning_component:
+  name: lightning-checkbox-button
+  url: https://developer.salesforce.com/docs/component-library/overview/components
+  mapping_notes: Checkbox button functionality often implemented through lightning-checkbox-group or custom implementations
+accessibility:
+  keyboard_support:
+  - Tab navigation to checkbox buttons
+  - Space to toggle checkbox selection
+  - Arrow keys for group navigation
+  - Enter to activate checkbox button
+  screen_reader:
+  - Checkbox button state clearly announced
+  - Selection changes communicated
+  - Group relationships described
+  aria_attributes:
+  - aria-checked for checkbox state
+  - aria-describedby for additional information
+  - aria-labelledby for group labeling
+  - role='checkbox' for button checkboxes
+usage_guidelines:
+  when_to_use:
+  - When checkbox needs button-like appearance
+  - For toggle selections that benefit from button styling
+  - In interfaces where buttons provide better UX than checkboxes
+  - For multi-select options with prominent visual treatment
+  when_not_to_use:
+  - For single yes/no decisions (use radio buttons)
+  - When traditional checkbox styling is more appropriate
+  - For simple form inputs without special styling needs
+  best_practices:
+  - Provide clear visual feedback for selection states
+  - Use consistent sizing within groups
+  - Ensure adequate touch targets for mobile
+  - Group related checkbox buttons logically
+  - Maintain keyboard accessibility
+  common_mistakes:
+  - Using checkbox buttons for mutually exclusive options
+  - Poor visual distinction between selected/unselected states
+  - Inconsistent button sizing within groups
+  - Missing keyboard accessibility
+code_examples:
+- title: Basic Checkbox Button
+  description: Single checkbox styled as a button
+  code: "<div class=\"slds-form-element\">\n      <label class=\"slds-form-element__label\">Select Options</label>\n     \
+    \ <div class=\"slds-form-element__control\">\n        <span class=\"slds-checkbox_button\">\n          <input type=\"\
+    checkbox\" id=\"checkbox-button-01\" value=\"option1\" />\n          <label class=\"slds-checkbox_button__label\" for=\"\
+    checkbox-button-01\">\n            <span class=\"slds-checkbox_faux\">Option 1</span>\n          </label>\n        </span>\n\
+    \      </div>\n      </div>\n"
+- title: Checkbox Button Group
+  description: Multiple checkbox buttons grouped together
+  code: "<fieldset class=\"slds-form-element\">\n      <legend class=\"slds-form-element__legend slds-form-element__label\"\
+    >\n        Choose Your Interests\n      </legend>\n      <div class=\"slds-form-element__control\">\n        <div class=\"\
+    slds-checkbox_button-group\" role=\"group\" aria-labelledby=\"checkbox-group-label\">\n          <span class=\"slds-checkbox_button\"\
+    >\n            <input type=\"checkbox\" id=\"checkbox-button-02\" name=\"interests\" value=\"technology\" />\n       \
+    \     <label class=\"slds-checkbox_button__label\" for=\"checkbox-button-02\">\n              <span class=\"slds-checkbox_faux\"\
+    >Technology</span>\n            </label>\n          </span>\n          <span class=\"slds-checkbox_button\">\n       \
+    \     <input type=\"checkbox\" id=\"checkbox-button-03\" name=\"interests\" value=\"sports\" />\n            <label class=\"\
+    slds-checkbox_button__label\" for=\"checkbox-button-03\">\n              <span class=\"slds-checkbox_faux\">Sports</span>\n\
+    \            </label>\n          </span>\n          <span class=\"slds-checkbox_button\">\n            <input type=\"\
+    checkbox\" id=\"checkbox-button-04\" name=\"interests\" value=\"music\" />\n            <label class=\"slds-checkbox_button__label\"\
+    \ for=\"checkbox-button-04\">\n              <span class=\"slds-checkbox_faux\">Music</span>\n            </label>\n \
+    \         </span>\n          <span class=\"slds-checkbox_button\">\n            <input type=\"checkbox\" id=\"checkbox-button-05\"\
+    \ name=\"interests\" value=\"travel\" />\n            <label class=\"slds-checkbox_button__label\" for=\"checkbox-button-05\"\
+    >\n              <span class=\"slds-checkbox_faux\">Travel</span>\n            </label>\n          </span>\n        </div>\n\
+    \      </div>\n      </fieldset>\n"
+- title: Stretch Checkbox Buttons
+  description: Full-width checkbox buttons for mobile or constrained layouts
+  code: "<div class=\"slds-form-element\">\n      <label class=\"slds-form-element__label\">Notification Preferences</label>\n\
+    \      <div class=\"slds-form-element__control\">\n        <div class=\"slds-checkbox_button-group\">\n          <span\
+    \ class=\"slds-checkbox_button\">\n            <input type=\"checkbox\" id=\"checkbox-button-06\" name=\"notifications\"\
+    \ value=\"email\" checked />\n            <label class=\"slds-checkbox_button__label\" for=\"checkbox-button-06\">\n \
+    \             <span class=\"slds-checkbox_faux\">\n                <svg class=\"slds-icon slds-icon_x-small slds-m-right_small\"\
+    \ aria-hidden=\"true\">\n                  <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#email\"></use>\n\
+    \                </svg>\n                Email Notifications\n              </span>\n            </label>\n          </span>\n\
+    \          <span class=\"slds-checkbox_button\">\n            <input type=\"checkbox\" id=\"checkbox-button-07\" name=\"\
+    notifications\" value=\"sms\" />\n            <label class=\"slds-checkbox_button__label\" for=\"checkbox-button-07\"\
+    >\n              <span class=\"slds-checkbox_faux\">\n                <svg class=\"slds-icon slds-icon_x-small slds-m-right_small\"\
+    \ aria-hidden=\"true\">\n                  <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#sms\"></use>\n\
+    \                </svg>\n                SMS Notifications\n              </span>\n            </label>\n          </span>\n\
+    \          <span class=\"slds-checkbox_button\">\n            <input type=\"checkbox\" id=\"checkbox-button-08\" name=\"\
+    notifications\" value=\"push\" checked />\n            <label class=\"slds-checkbox_button__label\" for=\"checkbox-button-08\"\
+    >\n              <span class=\"slds-checkbox_faux\">\n                <svg class=\"slds-icon slds-icon_x-small slds-m-right_small\"\
+    \ aria-hidden=\"true\">\n                  <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#notification\"\
+    ></use>\n                </svg>\n                Push Notifications\n              </span>\n            </label>\n   \
+    \       </span>\n        </div>\n      </div>\n      </div>\n"
+- title: Compact Checkbox Buttons
+  description: Compact checkbox buttons for limited space
+  code: "<div class=\"slds-form-element\">\n      <label class=\"slds-form-element__label\">Quick Filters</label>\n      <div\
+    \ class=\"slds-form-element__control\">\n        <div class=\"slds-checkbox_button-group\">\n          <span class=\"\
+    slds-checkbox_button\">\n            <input type=\"checkbox\" id=\"checkbox-button-09\" name=\"filters\" value=\"active\"\
+    \ checked />\n            <label class=\"slds-checkbox_button__label\" for=\"checkbox-button-09\">\n              <span\
+    \ class=\"slds-checkbox_faux\">Active</span>\n            </label>\n          </span>\n          <span class=\"slds-checkbox_button\"\
+    >\n            <input type=\"checkbox\" id=\"checkbox-button-10\" name=\"filters\" value=\"pending\" />\n            <label\
+    \ class=\"slds-checkbox_button__label\" for=\"checkbox-button-10\">\n              <span class=\"slds-checkbox_faux\"\
+    >Pending</span>\n            </label>\n          </span>\n          <span class=\"slds-checkbox_button\">\n          \
+    \  <input type=\"checkbox\" id=\"checkbox-button-11\" name=\"filters\" value=\"closed\" />\n            <label class=\"\
+    slds-checkbox_button__label\" for=\"checkbox-button-11\">\n              <span class=\"slds-checkbox_faux\">Closed</span>\n\
+    \            </label>\n          </span>\n        </div>\n      </div>\n      </div>\n"
+- title: Disabled Checkbox Button
+  description: Checkbox button in disabled state
+  code: "<div class=\"slds-form-element\">\n      <label class=\"slds-form-element__label\">Available Options</label>\n  \
+    \    <div class=\"slds-form-element__control\">\n        <div class=\"slds-checkbox_button-group\">\n          <span class=\"\
+    slds-checkbox_button\">\n            <input type=\"checkbox\" id=\"checkbox-button-12\" name=\"options\" value=\"basic\"\
+    \ checked />\n            <label class=\"slds-checkbox_button__label\" for=\"checkbox-button-12\">\n              <span\
+    \ class=\"slds-checkbox_faux\">Basic Plan</span>\n            </label>\n          </span>\n          <span class=\"slds-checkbox_button\"\
+    >\n            <input type=\"checkbox\" id=\"checkbox-button-13\" name=\"options\" value=\"premium\" />\n            <label\
+    \ class=\"slds-checkbox_button__label\" for=\"checkbox-button-13\">\n              <span class=\"slds-checkbox_faux\"\
+    >Premium Plan</span>\n            </label>\n          </span>\n          <span class=\"slds-checkbox_button slds-is-disabled\"\
+    >\n            <input type=\"checkbox\" id=\"checkbox-button-14\" name=\"options\" value=\"enterprise\" disabled />\n\
+    \            <label class=\"slds-checkbox_button__label\" for=\"checkbox-button-14\">\n              <span class=\"slds-checkbox_faux\"\
+    >Enterprise Plan (Coming Soon)</span>\n            </label>\n          </span>\n        </div>\n      </div>\n      </div>\n"
+- title: Checkbox Buttons with Description
+  description: Checkbox buttons with additional descriptive text
+  code: "<fieldset class=\"slds-form-element\">\n      <legend class=\"slds-form-element__legend slds-form-element__label\"\
+    >\n        Select Features\n      </legend>\n      <div class=\"slds-form-element__control\">\n        <div class=\"slds-checkbox_button-group\"\
+    >\n          <span class=\"slds-checkbox_button\">\n            <input type=\"checkbox\" id=\"checkbox-button-15\" name=\"\
+    features\" value=\"analytics\" />\n            <label class=\"slds-checkbox_button__label\" for=\"checkbox-button-15\"\
+    >\n              <span class=\"slds-checkbox_faux\">\n                <div class=\"slds-text-align_left\">\n         \
+    \         <div class=\"slds-text-body_regular\">Advanced Analytics</div>\n                  <div class=\"slds-text-body_small\
+    \ slds-text-color_weak\">\n                    Detailed reporting and insights\n                  </div>\n           \
+    \     </div>\n              </span>\n            </label>\n          </span>\n          <span class=\"slds-checkbox_button\"\
+    >\n            <input type=\"checkbox\" id=\"checkbox-button-16\" name=\"features\" value=\"api\" checked />\n       \
+    \     <label class=\"slds-checkbox_button__label\" for=\"checkbox-button-16\">\n              <span class=\"slds-checkbox_faux\"\
+    >\n                <div class=\"slds-text-align_left\">\n                  <div class=\"slds-text-body_regular\">API Access</div>\n\
+    \                  <div class=\"slds-text-body_small slds-text-color_weak\">\n                    Integrate with external\
+    \ systems\n                  </div>\n                </div>\n              </span>\n            </label>\n          </span>\n\
+    \        </div>\n      </div>\n      </fieldset>\n"
+dependencies:
+  css_files:
+  - checkbox-button.css
+  - form-element.css
+  javascript:
+  - checkbox-button.js
+  icons:
+  - utility-sprite.svg
+  other_components:
+  - form-element
+  - checkbox
+related_components:
+- name: Checkbox
+  relationship: alternative
+  description: Traditional checkbox alternative
+- name: Radio Button Group
+  relationship: similar
+  description: Similar grouped selection concept
+- name: Button Group
+  relationship: similar
+  description: Similar button grouping layout
+references:
+  official_docs: https://v1.lightningdesignsystem.com/components/checkbox-button/
+metadata:
+  version: 1.0.0
+  last_updated: '2025-11-12'
+  review_status: complete
+  notes: ' Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth.'

package/skills/applying-slds/metadata/blueprints/components/checkbox-toggle.yaml

@@ -0,0 +1,177 @@
+name: "Checkbox Toggle"
+description: "A checkable input that communicates if an option is true, false or indeterminate. A toggle-style checkbox that provides a visual switch interface for binary choices."
+category: "Input"
+slds_classes:
+  root: "slds-checkbox_toggle"
+  elements:
+    - class: "slds-checkbox_faux"
+      description: "Visual toggle switch element"
+      purpose: "Custom-styled toggle switch appearance that replaces the native checkbox"
+    - class: "slds-checkbox_faux_container"
+      description: "Container for the faux checkbox element and text labels"
+      purpose: "Wraps the toggle switch and provides structure for on/off text"
+    - class: "slds-checkbox_off"
+      description: "Container for text shown when toggle is off"
+      purpose: "Displays text when checkbox is unchecked"
+    - class: "slds-checkbox_on"
+      description: "Container for text shown when toggle is on"
+      purpose: "Displays text when checkbox is checked"
+  modifiers: []
+  states:
+    - class: "slds-is-disabled"
+      description: "Disabled state styling"
+      trigger: "When checkbox toggle is not interactive"
+variants:
+  - name: "Base"
+    description: "Standard checkbox toggle"
+    classes:
+      - "slds-checkbox_toggle"
+    usage_context: "Default checkbox toggle implementation"
+    differences: "Toggle switch with optional on/off text labels"
+lightning_component:
+  name: ""
+  url: "https://developer.salesforce.com/docs/component-library/overview/components"
+  mapping_notes: "No direct Lightning Base Component - use custom implementation with SLDS classes"
+accessibility:
+  keyboard_support:
+    - "Tab to focus the checkbox toggle"
+    - "Space to toggle checkbox state"
+    - "Enter may toggle in some contexts"
+  screen_reader:
+    - "Checkbox state announced (checked/unchecked)"
+    - "Label text read with the checkbox"
+    - "Required state announced when applicable"
+    - "Error messages associated and announced"
+  aria_attributes:
+    - "aria-describedby for error messages"
+    - "aria-invalid when validation fails"
+    - "aria-required for required checkboxes"
+    - "aria-checked for state indication"
+    - "fieldset and legend for grouped toggles"
+usage_guidelines:
+  when_to_use:
+    - "For binary choices where toggle switch UI is preferred"
+    - "When you want a more visual, switch-like interface"
+    - "For settings, preferences, or feature toggles"
+    - "When space allows for the toggle switch design"
+  when_not_to_use:
+    - "For mutually exclusive options (use radio buttons)"
+    - "When multiple options can be selected (use checkboxes)"
+    - "In very constrained spaces (use standard checkbox)"
+    - "For actions (use buttons instead)"
+  best_practices:
+    - "Use clear, descriptive labels"
+    - "Provide on/off text labels when helpful"
+    - "Use fieldset and legend for grouped toggles"
+    - "Ensure adequate touch target size for mobile"
+    - "Provide immediate visual feedback for state changes"
+    - "Use consistent toggle styling throughout the interface"
+  common_mistakes:
+    - "Using toggles for mutually exclusive options"
+    - "Making labels too long or unclear"
+    - "Not providing proper fieldset/legend structure for groups"
+    - "Missing required state indicators"
+    - "Inadequate spacing or touch targets"
+code_examples:
+  - title: "Basic Checkbox Toggle"
+    code: |
+      <div class="slds-form-element">
+            <div class="slds-form-element__control">
+              <label class="slds-checkbox_toggle slds-grid">
+                <input type="checkbox" name="checkbox-toggle" id="toggle-1" />
+                <span class="slds-checkbox_faux_container" aria-live="polite">
+                  <span class="slds-checkbox_faux"></span>
+                  <span class="slds-checkbox_off">Off</span>
+                  <span class="slds-checkbox_on">On</span>
+                </span>
+                <span class="slds-form-element__label">Toggle this setting</span>
+              </label>
+            </div>
+            </div>
+  - title: "Checkbox Toggle Checked State"
+    code: |
+      <div class="slds-form-element">
+            <div class="slds-form-element__control">
+              <label class="slds-checkbox_toggle slds-grid">
+                <input type="checkbox" name="checkbox-toggle" id="toggle-2" checked />
+                <span class="slds-checkbox_faux_container" aria-live="polite">
+                  <span class="slds-checkbox_faux"></span>
+                  <span class="slds-checkbox_off">Off</span>
+                  <span class="slds-checkbox_on">On</span>
+                </span>
+                <span class="slds-form-element__label">Toggle enabled</span>
+              </label>
+            </div>
+            </div>
+  - title: "Disabled Checkbox Toggle"
+    code: |
+      <div class="slds-form-element">
+            <div class="slds-form-element__control">
+              <label class="slds-checkbox_toggle slds-grid">
+                <input type="checkbox" name="checkbox-toggle" id="toggle-3" disabled />
+                <span class="slds-checkbox_faux_container" aria-live="polite">
+                  <span class="slds-checkbox_faux"></span>
+                  <span class="slds-checkbox_off">Off</span>
+                  <span class="slds-checkbox_on">On</span>
+                </span>
+                <span class="slds-form-element__label">Disabled toggle</span>
+              </label>
+            </div>
+            </div>
+styling_hooks:
+  - name: "--slds-c-checkbox-toggle-color-border"
+    description: "Border color for the toggle switch"
+    category: "color"
+  - name: "--slds-c-checkbox-toggle-color-border-hover"
+    description: "Border color for the toggle switch on hover"
+    category: "color"
+  - name: "--slds-c-checkbox-toggle-color-background"
+    description: "Background color for the toggle switch"
+    category: "color"
+  - name: "--slds-c-checkbox-toggle-color-background-hover"
+    description: "Hover background color for the toggle switch"
+    category: "color"
+  - name: "--slds-c-checkbox-toggle-color-background-checked-focus"
+    description: "Background color when toggle is checked and focused"
+    category: "color"
+  - name: "--slds-c-checkbox-toggle-switch-color-background"
+    description: "Background color for the toggle switch slider/knob"
+    category: "color"
+  - name: "--slds-c-checkbox-toggle-switch-color-background-checked"
+    description: "Background color for the toggle switch slider/knob when checked"
+    category: "color"
+  - name: "--slds-c-checkbox-toggle-mark-color-foreground"
+    description: "Foreground color for the checkmark when toggle is checked"
+    category: "color"
+  - name: "--slds-c-checkbox-toggle-radius-border"
+    description: "Border radius for the toggle switch (pill shape)"
+    category: "border"
+  - name: "--slds-c-checkbox-toggle-shadow"
+    description: "Box shadow for the toggle switch"
+    category: "shadow"
+dependencies:
+  css_files:
+    - "checkbox-toggle.css"
+    - "form-element.css"
+  javascript: []
+  icons: []
+  other_components:
+    - "form-element"
+related_components:
+  - name: "Checkbox"
+    relationship: "alternative"
+    description: "Standard checkbox for binary choices"
+  - name: "Toggle"
+    relationship: "similar"
+    description: "Alternative toggle-style input control"
+references:
+  official_docs: "https://v1.lightningdesignsystem.com/components/checkbox-toggle/"
+  design_guidelines: "https://v1.lightningdesignsystem.com/components/checkbox-toggle/"
+metadata:
+  version: "1.0.0"
+  last_updated: "2025-11-12"
+  author: "SLDS Documentation Team"
+  slds_version: "2.27.2"
+  review_status: "complete"
+  source: "official-slds"
+  notes: "Created from official SLDS documentation and design-system-internal source code with CSS selector annotations. Includes comprehensive styling hooks from SCSS annotations. Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."