<div
  data-testid="govie-checkboxes"
  data-module="gieds-checkboxes"
  class="gi-flex"
>
<fieldset>
  <legend class="sm:gi-text-sm md:gi-text-md lg:gi-text-lg">
    <h1 class="!gi-mt-0 !gi-mb-[var(--gieds-space-2)] gi-heading-lg">
      Organisation
    </h1>
  </legend>
  <div
    data-element="checkbox-container"
    class="gi-flex gi-flex-col gi-gap-2.5"
  >
    <div class="gi-flex gi-items-start">
      <input
        data-element="checkbox0"
        id="UniqueID-0"
        value="employment-tribunal"
        class="gi-w-8 gi-h-8 checked:before:gi-w-5 checked:before:gi-h-2.5 checked:before:gi-left-1
      checked:before:gi-top-1.5 gi-cursor-pointer gi-appearance-none gi-border-[3px] gi-border-solid gi-border-black checked:before:gi-block checked:before:gi--rotate-45 checked:before:gi-relative checked:before:gi-border-l-[4px] checked:before:gi-border-b-[4px] checked:before:gi-border-black"
        type="checkbox"
      />
      <label
        for="UniqueID-0"
        class="gi-cursor-pointer xs:gi-text-sm md:gi-text-md lg:gi-text-lg gi-pl-4"
      >
        Employment Tribunal
      </label>
    </div>
    <div class="gi-flex gi-items-start">
      <input
        data-element="checkbox1"
        id="UniqueID-1"
        value="ministry-of-defence"
        class="gi-w-8 gi-h-8 checked:before:gi-w-5 checked:before:gi-h-2.5 checked:before:gi-left-1
      checked:before:gi-top-1.5 gi-cursor-pointer gi-appearance-none gi-border-[3px] gi-border-solid gi-border-black checked:before:gi-block checked:before:gi--rotate-45 checked:before:gi-relative checked:before:gi-border-l-[4px] checked:before:gi-border-b-[4px] checked:before:gi-border-black"
        type="checkbox"
      />
      <label
        for="UniqueID-1"
        class="gi-cursor-pointer xs:gi-text-sm md:gi-text-md lg:gi-text-lg gi-pl-4"
      >
        Ministry of Defence
      </label>
    </div>
    <div class="gi-flex gi-items-start">
      <input
        data-element="checkbox2"
        id="UniqueID-2"
        value="department-for-transport"
        class="gi-w-8 gi-h-8 checked:before:gi-w-5 checked:before:gi-h-2.5 checked:before:gi-left-1
      checked:before:gi-top-1.5 gi-cursor-pointer gi-appearance-none gi-border-[3px] gi-border-solid gi-border-black checked:before:gi-block checked:before:gi--rotate-45 checked:before:gi-relative checked:before:gi-border-l-[4px] checked:before:gi-border-b-[4px] checked:before:gi-border-black"
        type="checkbox"
      />
      <label
        for="UniqueID-2"
        class="gi-cursor-pointer xs:gi-text-sm md:gi-text-md lg:gi-text-lg gi-pl-4">
        Department for Transport
      </label>
    </div>
  </div>
</fieldset>
</div>

{{ govieCheckboxesGroup({
  "fieldId": "UniqueID",
  "items": [
    {
      "label": "Employment Tribunal",
      "value": "employment-tribunal"
    },
    {
      "label": "Ministry of Defence",
      "value": "ministry-of-defence"
    },
    {
      "label": "Department for Transport",
      "value": "department-for-transport"
    }
  ],
  "title": {
    "value": "Organisation",
    "asHeading": {
      "size": "lg",
      "as": "h1"
    }
  }
}) }}

import { CheckboxesGroup } from "@govie-ds/react";
  
<CheckboxesGroup
  fieldId="UniqueID"
  items={[
    {
      label: 'Employment Tribunal',
      value: 'employment-tribunal'
    },
    {
      label: 'Ministry of Defence',
      value: 'ministry-of-defence'
    },
    {
      label: 'Department for Transport',
      value: 'department-for-transport'
    }
  ]}
  title={{
    asHeading: {
      size: 'md',
      as: 'h1'
    },
    value: 'Organisation'
  }}
/>