{
  "tag": "ed-checkbox-group",
  "kind": "component",
  "summary": "Checkbox groups wrap a set of related checkboxes or switches so they share a label, hint, and grouping\nsemantics.",
  "status": "experimental",
  "level": "molecule",
  "since": "1.0",
  "docs": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/checkbox-group/",
  "usage": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/checkbox-group/usage/",
  "playwright": "getByTestId('…')",
  "dependencies": [
    "ed-checkbox"
  ],
  "use": [
    "Checkboxes that answer one shared question — wrap them in a group whenever they do, so they get one label and one hint",
    "Ticking any number of options under one question, such as which notification channels or tax types apply",
    "Requiring at least one option from a set before a form can be submitted"
  ],
  "notFor": [
    {
      "when": "Exactly one option must be chosen",
      "instead": "[Radio Group](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/radio-group)"
    },
    {
      "when": "Independent settings that take effect immediately",
      "instead": "a [Switch](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/switch), one per setting"
    },
    {
      "when": "Unrelated settings that only share a form section",
      "instead": "separate [Checkbox](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/checkbox) elements"
    }
  ],
  "rules": [
    {
      "id": "checkbox-group/label-the-set",
      "rule": "Give every group of related checkboxes a visible label naming what the set is about — the subject the options belong to (\"Notifications\", \"Export options\") — and keep the option labels free of that repeated subject. Outside a form, where the surroundings already name the set, an `aria-label` may take its place.",
      "why": "The option labels alone don't tell users, or assistive tech, what the collection decides.",
      "check": "error"
    },
    {
      "id": "checkbox-group/no-hand-rolled-group",
      "rule": "Don't hand-roll a group out of a heading and loose checkboxes — the component wires the label and group semantics for assistive tech.",
      "why": "A plain heading above checkboxes announces nothing as a group, and you would have to rebuild that yourself.",
      "check": "warning"
    },
    {
      "id": "checkbox-group/one-decision",
      "rule": "Never group unrelated settings just to share a label.",
      "why": "A group promises the options belong to one decision."
    },
    {
      "id": "checkbox-group/no-mixed-controls",
      "rule": "Never mix checkboxes and switches within the same group.",
      "why": "Staged form choices and immediate toggles are different promises to the user.",
      "check": "error",
      "covered": true
    },
    {
      "id": "checkbox-group/required-on-checkboxes",
      "rule": "Enforce a \"select at least one\" requirement on the individual checkboxes — the group's `required` only adds the visual indicator to the label.",
      "check": "warning"
    },
    {
      "id": "checkbox-group/stack-vertically",
      "rule": "Keep the default vertical stacking, and never lay checkboxes out horizontally.",
      "why": "Stacked, the options scan as a single list.",
      "check": "error"
    }
  ],
  "api": {
    "attributes": [
      {
        "name": "aria-label",
        "property": "ariaLabel",
        "type": "null | string",
        "default": "null",
        "description": "Accessible name for when no visible label is given. Mirrored onto the internal fieldset, which\nis the group — the host is deliberately role-less, so a consumer's aria-label would otherwise\nsit on an element assistive technology ignores.\n\nA visible label wins: the node references it with `aria-labelledby` while there is one, and\nonly then — accessible-name computation consults aria-labelledby first."
      },
      {
        "name": "label",
        "property": "label",
        "type": "string",
        "default": "''"
      },
      {
        "name": "hint",
        "property": "hint",
        "type": "string",
        "default": "''",
        "description": "The checkbox group's hint. If you need to display HTML, use the `hint` slot instead."
      },
      {
        "name": "orientation",
        "property": "orientation",
        "type": "'horizontal' | 'vertical'",
        "default": "'vertical'",
        "description": "The orientation in which to show grouped checkboxes."
      },
      {
        "name": "required",
        "property": "required",
        "type": "boolean",
        "default": "false",
        "description": "Adds a required indicator to the group's label. This is a visual cue only — unlike radios, checkboxes are\nindependent form controls, so enforce the requirement with the `required` attribute and/or `setCustomValidity()`\non the individual checkboxes."
      },
      {
        "name": "with-label",
        "property": "withLabel",
        "type": "boolean",
        "default": "false",
        "description": "Only required for SSR. Set to `true` if you're slotting in a `label` element so the server-rendered markup includes\nthe label before the component hydrates on the client."
      },
      {
        "name": "with-hint",
        "property": "withHint",
        "type": "boolean",
        "default": "false",
        "description": "Only required for SSR. Set to `true` if you're slotting in a `hint` element so the server-rendered markup includes\nthe hint before the component hydrates on the client."
      },
      {
        "name": "dir",
        "property": "dir",
        "type": "string"
      },
      {
        "name": "lang",
        "property": "lang",
        "type": "string"
      }
    ],
    "properties": [],
    "methods": [],
    "events": [],
    "slots": [
      {
        "name": "",
        "description": "The default slot where `<ed-checkbox>` or `<ed-switch>` elements are placed."
      },
      {
        "name": "label",
        "description": "The checkbox group's label. Required for proper accessibility. Alternatively, you can use the `label` attribute."
      },
      {
        "name": "hint",
        "description": "Text that describes how to use the checkbox group. Alternatively, you can use the `hint` attribute."
      }
    ],
    "cssProperties": [],
    "parts": [
      {
        "name": "form-control",
        "description": "The fieldset that wraps the label, the checkboxes, and the hint — the group assistive technology and `getByRole('group')` find."
      },
      {
        "name": "form-control-label",
        "description": "The label's wrapper."
      },
      {
        "name": "base",
        "description": "The element that wraps the grouped checkboxes."
      },
      {
        "name": "hint",
        "description": "The hint's wrapper."
      }
    ],
    "states": []
  },
  "import": "import '@eurodata/eurodata-ui/dist/components/checkbox-group/checkbox-group.js';",
  "react": {
    "component": "EdCheckboxGroup",
    "import": "import EdCheckboxGroup from '@eurodata/eurodata-ui/dist/react/checkbox-group/index.js';"
  }
}