Checkboxes examples

Show params

Params

params:
- name: describedBy
  type: string
  required: false
  description: One or more element IDs to add to the input `aria-describedby` attribute without a fieldset, used to provide additional descriptive information for screenreader users.
- name: fieldset
  type: object
  required: false
  description: Options for the fieldset component (e.g. legend).
  isComponent: true
- name: hint
  type: object
  required: false
  description: Options for the hint component (e.g. text).
  isComponent: true
- name: errorMessage
  type: object
  required: false
  description: Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`.
  isComponent: true
- name: formGroup
  type: object
  required: false
  description: Options for the form-group wrapper
  params:
  - name: classes
    type: string
    required: false
    description: Classes to add to the form group (e.g. to show error state for the whole group)
- name: idPrefix
  type: string
  required: false
  description: String to prefix id for each checkbox item if no id is specified on each item. If not passed, fall back to using the name option instead.
- name: name
  type: string
  required: true
  description: Name attribute for all checkbox items.
- name: items
  type: array
  required: true
  description: Array of checkbox items objects.
  params:
  - name: text
    type: string
    required: true
    description: If `html` is set, this is not required. Text to use within each checkbox item label. If `html` is provided, the `text` argument will be ignored.
  - name: html
    type: string
    required: true
    description: If `text` is set, this is not required. HTML to use within each checkbox item label. If `html` is provided, the `text` argument will be ignored.
  - name: id
    type: string
    required: false
    description: Specific id attribute for the checkbox item. If omitted, then idPrefix option will be applied.
  - name: name
    type: string
    required: true
    description: Specific name for the checkbox item. If omitted, then component global `name` string will be applied.
  - name: value
    type: string
    required: true
    description: Value for the checkbox input.
  - name: label
    type: object
    required: false
    description: Provide attributes and classes to each checkbox item label.
    isComponent: true
  - name: hint
    type: object
    required: false
    description: Provide hint to each checkbox item.
    isComponent: true
  - name: checked
    type: boolean
    required: false
    description: If true, checkbox will be checked.
  - name: isIndeterminate
    type: boolean
    required: false
    description: If true, the checkbox will have an additional indeterminate state to show a partial true.
  - name: indeterminateChecked
    type: boolean
    required: false
    description: If true, the checkbox will have an indeterminate checked initial state. This will override isChecked value.
  - name: conditional
    type: boolean
    required: false
    description: If true, content provided will be revealed when the item is checked.
  - name: conditional.html
    type: string
    required: false
    description: Provide content for the conditional reveal.
  - name: disabled
    type: boolean
    required: false
    description: If true, checkbox will be disabled.
  - name: classes
    type: string
    required: false
    description: Classes to add to the item.
  - name: attributes
    type: object
    required: false
    description: HTML attributes (for example data attributes) to add to the checkbox input tag.
- name: hasDividers
  type: boolean
  required: false
  description: With hasDividers equal to true, the items have an horizontal border to visually separate items.
- name: classes
  type: string
  required: false
  description: Classes to add to the checkboxes container.
- name: attributes
  type: object
  required: false
  description: HTML attributes (for example data attributes) to add to the anchor tag.

accessibilityCriteria: |
  ## Conditional reveals
  Must:
  - be visible as static content if JavaScript is unavailable or fails
  - be hidden if JavaScript is available and is collapsed
  - indicate if content is expanded or collapsed
  - indicate that there is collapsed content to interact with

  Note that alphagov have known issues against this criteria: https://github.com/alphagov/govuk_elements/issues/575

default

What is your nationality?

If you have dual nationality, select all options that are relevant to you.

Show code

Macro

{% from "components/checkboxes/_macro.checkboxes.njk" import componentCheckboxes %}
{{ componentCheckboxes({
  "idPrefix": "default",
  "name": "default",
  "fieldset": {
    "legend": {
      "text": "What is your nationality?"
    }
  },
  "hint": {
    "text": "If you have dual nationality, select all options that are relevant to you."
  },
  "items": [
    {
      "value": "british",
      "text": "British"
    },
    {
      "value": "irish",
      "text": "Irish"
    },
    {
      "value": "other",
      "text": "Citizen of another country"
    }
  ]
})  }}

Markup


<!-- checkboxes -->
<div class="c-form-group">
<!-- fieldset -->
<fieldset aria-describedby="default-hint">
  <legend class="  font-bold">
    What is your nationality?
  </legend>
      <!-- hint -->
  <p id="default-hint" class="block text-neutral-dark">
    If you have dual nationality, select all options that are relevant to you.
  </p>
  <!-- /hint -->
  <div class="c-checkboxes">
    <div x-data="{ isChecked: false }" class="">
      <div class="relative flex items-start py-base">
        <div class="flex items-center mx-sm">
          <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="default" name="default" type="checkbox" value="british">
        </div>
        <div class="pt-0.5 leading-5">
          <!-- label -->
      <label class="block" for="default">British</label>
      
      <!-- /label -->
        </div>
      </div>
    </div>
    <div x-data="{ isChecked: false }" class="">
      <div class="relative flex items-start py-base">
        <div class="flex items-center mx-sm">
          <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="default-2" name="default" type="checkbox" value="irish">
        </div>
        <div class="pt-0.5 leading-5">
          <!-- label -->
      <label class="block" for="default-2">Irish</label>
      
      <!-- /label -->
        </div>
      </div>
    </div>
    <div x-data="{ isChecked: false }" class="">
      <div class="relative flex items-start py-base">
        <div class="flex items-center mx-sm">
          <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="default-3" name="default" type="checkbox" value="other">
        </div>
        <div class="pt-0.5 leading-5">
          <!-- label -->
      <label class="block" for="default-3">Citizen of another country</label>
      
      <!-- /label -->
        </div>
      </div>
    </div>
  </div>
</fieldset>
<!-- /fieldset --></div>
<!-- /checkboxes -->

with id and name

What is your nationality?

If you have dual nationality, select all options that are relevant to you.

Show code

Macro

{% from "components/checkboxes/_macro.checkboxes.njk" import componentCheckboxes %}
{{ componentCheckboxes({
  "idPrefix": "with-id-and-name",
  "name": "with-id-and-name",
  "fieldset": {
    "legend": {
      "text": "What is your nationality?"
    }
  },
  "hint": {
    "text": "If you have dual nationality, select all options that are relevant to you."
  },
  "items": [
    {
      "name": "british",
      "id": "item_british",
      "value": "yes",
      "text": "British"
    },
    {
      "name": "irish",
      "id": "item_irish",
      "value": "irish",
      "text": "Irish"
    }
  ]
})  }}

Markup


<!-- checkboxes -->
<div class="c-form-group">
<!-- fieldset -->
<fieldset aria-describedby="with-id-and-name-hint">
  <legend class="  font-bold">
    What is your nationality?
  </legend>
      <!-- hint -->
  <p id="with-id-and-name-hint" class="block text-neutral-dark">
    If you have dual nationality, select all options that are relevant to you.
  </p>
  <!-- /hint -->
  <div class="c-checkboxes">
    <div x-data="{ isChecked: false }" class="">
      <div class="relative flex items-start py-base">
        <div class="flex items-center mx-sm">
          <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="item_british" name="british" type="checkbox" value="yes">
        </div>
        <div class="pt-0.5 leading-5">
          <!-- label -->
      <label class="block" for="item_british">British</label>
      
      <!-- /label -->
        </div>
      </div>
    </div>
    <div x-data="{ isChecked: false }" class="">
      <div class="relative flex items-start py-base">
        <div class="flex items-center mx-sm">
          <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="item_irish" name="irish" type="checkbox" value="irish">
        </div>
        <div class="pt-0.5 leading-5">
          <!-- label -->
      <label class="block" for="item_irish">Irish</label>
      
      <!-- /label -->
        </div>
      </div>
    </div>
  </div>
</fieldset>
<!-- /fieldset --></div>
<!-- /checkboxes -->

with hints on items

How do you want to sign in?

You’ll have a user ID if you’ve registered for Self Assessment or filed a tax return online before.

You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity.

Show code

Macro

{% from "components/checkboxes/_macro.checkboxes.njk" import componentCheckboxes %}
{{ componentCheckboxes({
  "idPrefix": "hints-on-items",
  "fieldset": {
    "legend": {
      "text": "How do you want to sign in?",
      "isPageHeading": true
    }
  },
  "items": [
    {
      "name": "gateway",
      "id": "government-gateway-a",
      "value": "desy-gateway",
      "text": "Sign in with Government Gateway",
      "hint": {
        "text": "You’ll have a user ID if you’ve registered for Self Assessment or filed a tax return online before."
      }
    },
    {
      "name": "verify",
      "id": "desy-verify-a",
      "value": "desy-verify-a",
      "text": "Sign in with DESY Verify",
      "hint": {
        "text": "You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity."
      }
    }
  ]
})  }}

Markup


<!-- checkboxes -->
<div class="c-form-group">
<!-- fieldset -->
<fieldset>
  <legend class="  font-bold">
    
      <h1>How do you want to sign in?</h1>
  </legend>
      <div class="c-checkboxes">
    <div x-data="{ isChecked: false }" class="">
      <div class="relative flex items-start py-base">
        <div class="flex items-center mx-sm">
          <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="government-gateway-a" name="gateway" type="checkbox" value="desy-gateway" aria-describedby="government-gateway-a-item-hint">
        </div>
        <div class="pt-0.5 leading-5">
          <!-- label -->
      <label class="block" for="government-gateway-a">Sign in with Government Gateway</label>
      
      <!-- /label -->
          <!-- hint -->
      <p id="government-gateway-a-item-hint" class="block text-neutral-dark">
        You’ll have a user ID if you’ve registered for Self Assessment or filed a tax return online before.
      </p>
      <!-- /hint -->
        </div>
      </div>
    </div>
    <div x-data="{ isChecked: false }" class="">
      <div class="relative flex items-start py-base">
        <div class="flex items-center mx-sm">
          <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="desy-verify-a" name="verify" type="checkbox" value="desy-verify-a" aria-describedby="desy-verify-a-item-hint">
        </div>
        <div class="pt-0.5 leading-5">
          <!-- label -->
      <label class="block" for="desy-verify-a">Sign in with DESY Verify</label>
      
      <!-- /label -->
          <!-- hint -->
      <p id="desy-verify-a-item-hint" class="block text-neutral-dark">
        You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity.
      </p>
      <!-- /hint -->
        </div>
      </div>
    </div>
  </div>
</fieldset>
<!-- /fieldset --></div>
<!-- /checkboxes -->

with hasDividers

How do you want to sign in?

Please, choose the right answer.

You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity.

You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity.

Show code

Macro

{% from "components/checkboxes/_macro.checkboxes.njk" import componentCheckboxes %}
{{ componentCheckboxes({
  "idPrefix": "has-dividers",
  "fieldset": {
    "legend": {
      "text": "How do you want to sign in?"
    }
  },
  "hint": {
    "text": "Please, choose the right answer."
  },
  "hasDividers": true,
  "items": [
    {
      "name": "gateway",
      "id": "government-gateway-b",
      "value": "desy-gateway",
      "text": "Sign in with Government Gateway"
    },
    {
      "name": "verify",
      "id": "desy-verify-b",
      "value": "desy-verify-b",
      "text": "Sign in with DESY Verify",
      "hint": {
        "text": "You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity."
      }
    },
    {
      "name": "phone",
      "id": "phone-b",
      "value": "phone",
      "text": "Verify with Phone",
      "checked": true,
      "conditional": {
        "html": "<label class=\" block font-semibold \" for=\"contact-phone\">Phone number</label>\n<input class=\" mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base \" name=\"contact-phone\" type=\"text\" id=\"contact-phone\">\n"
      }
    },
    {
      "name": "verify",
      "id": "desy-verify-c",
      "value": "desy-verify-c",
      "text": "Sign in with DESY Verify",
      "hint": {
        "text": "You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity."
      }
    }
  ]
})  }}

Markup


<!-- checkboxes -->
<div class="c-form-group">
<!-- fieldset -->
<fieldset aria-describedby="has-dividers-hint">
  <legend class="  font-bold">
    How do you want to sign in?
  </legend>
      <!-- hint -->
  <p id="has-dividers-hint" class="block text-neutral-dark">
    Please, choose the right answer.
  </p>
  <!-- /hint -->
  <div class="c-checkboxes">
    <div x-data="{ isChecked: false }" class=" border-t border-b border-neutral-base -mb-px">
      <div class="relative flex items-start py-base">
        <div class="flex items-center mx-sm">
          <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="government-gateway-b" name="gateway" type="checkbox" value="desy-gateway">
        </div>
        <div class="pt-0.5 leading-5">
          <!-- label -->
      <label class="block" for="government-gateway-b">Sign in with Government Gateway</label>
      
      <!-- /label -->
        </div>
      </div>
    </div>
    <div x-data="{ isChecked: false }" class=" border-t border-b border-neutral-base -mb-px">
      <div class="relative flex items-start py-base">
        <div class="flex items-center mx-sm">
          <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="desy-verify-b" name="verify" type="checkbox" value="desy-verify-b" aria-describedby="desy-verify-b-item-hint">
        </div>
        <div class="pt-0.5 leading-5">
          <!-- label -->
      <label class="block" for="desy-verify-b">Sign in with DESY Verify</label>
      
      <!-- /label -->
          <!-- hint -->
      <p id="desy-verify-b-item-hint" class="block text-neutral-dark">
        You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity.
      </p>
      <!-- /hint -->
        </div>
      </div>
    </div>
    <div x-data="{ isChecked: true }" class=" border-t border-b border-neutral-base -mb-px">
      <div class="relative flex items-start py-base">
        <div class="flex items-center mx-sm">
          <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="phone-b" name="phone" type="checkbox" value="phone" checked aria-controls="conditional-phone-b">
        </div>
        <div class="pt-0.5 leading-5">
          <!-- label -->
      <label class="block" for="phone-b">Verify with Phone</label>
      
      <!-- /label -->
        </div>
      </div>
        <div  x-show="isChecked"
              x-transition:enter="transition ease-out duration-100 transform"
              x-transition:enter-start="opacity-0 scale-95"
              x-transition:enter-end="opacity-100 scale-100"
              class="mb-base ml-5 py-sm pl-6 origin-top-left border-l-2 border-primary-base" id="conditional-phone-b">
          <label class=" block font-semibold " for="contact-phone">Phone number</label>
<input class=" mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base " name="contact-phone" type="text" id="contact-phone">

        </div>
    </div>
    <div x-data="{ isChecked: false }" class=" border-t border-b border-neutral-base -mb-px">
      <div class="relative flex items-start py-base">
        <div class="flex items-center mx-sm">
          <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="desy-verify-c" name="verify" type="checkbox" value="desy-verify-c" aria-describedby="desy-verify-c-item-hint">
        </div>
        <div class="pt-0.5 leading-5">
          <!-- label -->
      <label class="block" for="desy-verify-c">Sign in with DESY Verify</label>
      
      <!-- /label -->
          <!-- hint -->
      <p id="desy-verify-c-item-hint" class="block text-neutral-dark">
        You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity.
      </p>
      <!-- /hint -->
        </div>
      </div>
    </div>
  </div>
</fieldset>
<!-- /fieldset --></div>
<!-- /checkboxes -->

with classes applied on items

How do you want to sign in?

You’ll have a user ID if you’ve registered for Self Assessment or filed a tax return online before.

You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity.

Show code

Macro

{% from "components/checkboxes/_macro.checkboxes.njk" import componentCheckboxes %}
{{ componentCheckboxes({
  "idPrefix": "classes",
  "fieldset": {
    "legend": {
      "text": "How do you want to sign in?"
    }
  },
  "items": [
    {
      "name": "gateway",
      "id": "government-gateway-c",
      "value": "desy-gateway",
      "text": "Sign in with Government Gateway",
      "hint": {
        "text": "You’ll have a user ID if you’ve registered for Self Assessment or filed a tax return online before."
      },
      "classes": "bg-warning-light"
    },
    {
      "name": "verify",
      "id": "desy-verify-d",
      "value": "desy-verify-d",
      "text": "Sign in with DESY Verify",
      "hint": {
        "text": "You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity."
      },
      "classes": "bg-neutral-light"
    }
  ]
})  }}

Markup


<!-- checkboxes -->
<div class="c-form-group">
<!-- fieldset -->
<fieldset>
  <legend class="  font-bold">
    How do you want to sign in?
  </legend>
      <div class="c-checkboxes">
    <div x-data="{ isChecked: false }" class=" bg-warning-light">
      <div class="relative flex items-start py-base">
        <div class="flex items-center mx-sm">
          <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="government-gateway-c" name="gateway" type="checkbox" value="desy-gateway" aria-describedby="government-gateway-c-item-hint">
        </div>
        <div class="pt-0.5 leading-5">
          <!-- label -->
      <label class="block" for="government-gateway-c">Sign in with Government Gateway</label>
      
      <!-- /label -->
          <!-- hint -->
      <p id="government-gateway-c-item-hint" class="block text-neutral-dark">
        You’ll have a user ID if you’ve registered for Self Assessment or filed a tax return online before.
      </p>
      <!-- /hint -->
        </div>
      </div>
    </div>
    <div x-data="{ isChecked: false }" class=" bg-neutral-light">
      <div class="relative flex items-start py-base">
        <div class="flex items-center mx-sm">
          <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="desy-verify-d" name="verify" type="checkbox" value="desy-verify-d" aria-describedby="desy-verify-d-item-hint">
        </div>
        <div class="pt-0.5 leading-5">
          <!-- label -->
      <label class="block" for="desy-verify-d">Sign in with DESY Verify</label>
      
      <!-- /label -->
          <!-- hint -->
      <p id="desy-verify-d-item-hint" class="block text-neutral-dark">
        You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity.
      </p>
      <!-- /hint -->
        </div>
      </div>
    </div>
  </div>
</fieldset>
<!-- /fieldset --></div>
<!-- /checkboxes -->

with disabled item

Show code

Macro

{% from "components/checkboxes/_macro.checkboxes.njk" import componentCheckboxes %}
{{ componentCheckboxes({
  "idPrefix": "disabled-item",
  "name": "colours",
  "items": [
    {
      "value": "red",
      "text": "Red"
    },
    {
      "value": "green",
      "text": "Green",
      "disabled": true,
      "checked": true
    },
    {
      "value": "blue",
      "text": "Blue",
      "disabled": true
    }
  ]
})  }}

Markup


<!-- checkboxes -->
<div class="c-form-group">
    <div class="c-checkboxes">
    <div x-data="{ isChecked: false }" class="">
      <div class="relative flex items-start py-base">
        <div class="flex items-center mx-sm">
          <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="disabled-item" name="colours" type="checkbox" value="red">
        </div>
        <div class="pt-0.5 leading-5">
          <!-- label -->
      <label class="block" for="disabled-item">Red</label>
      
      <!-- /label -->
        </div>
      </div>
    </div>
    <div x-data="{ isChecked: true }" class="">
      <div class="relative flex items-start py-base">
        <div class="flex items-center mx-sm">
          <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="disabled-item-2" name="colours" type="checkbox" value="green" checked disabled>
        </div>
        <div class="pt-0.5 leading-5">
          <!-- label -->
      <label class="block" for="disabled-item-2">Green</label>
      
      <!-- /label -->
        </div>
      </div>
    </div>
    <div x-data="{ isChecked: false }" class="">
      <div class="relative flex items-start py-base">
        <div class="flex items-center mx-sm">
          <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="disabled-item-3" name="colours" type="checkbox" value="blue" disabled>
        </div>
        <div class="pt-0.5 leading-5">
          <!-- label -->
      <label class="block" for="disabled-item-3">Blue</label>
      
      <!-- /label -->
        </div>
      </div>
    </div>
  </div>
</div>
<!-- /checkboxes -->

with legend as a page heading

use optional headingLevel param to set if h1, h2 h3...

Which types of waste do you transport regularly?

Select all that apply

Show code

Macro

{% from "components/checkboxes/_macro.checkboxes.njk" import componentCheckboxes %}
{{ componentCheckboxes({
  "idPrefix": "legend-as-page-heading",
  "name": "legend-as-page-heading",
  "fieldset": {
    "legend": {
      "text": "Which types of waste do you transport regularly?",
      "classes": "c-h2",
      "isPageHeading": true
    },
    "headingLevel": 2
  },
  "hint": {
    "text": "Select all that apply"
  },
  "items": [
    {
      "value": "animal",
      "text": "Waste from animal carcasses"
    },
    {
      "value": "mines",
      "text": "Waste from mines or quarries"
    },
    {
      "value": "farm",
      "text": "Farm or agricultural waste"
    }
  ]
})  }}

Markup


<!-- checkboxes -->
<div class="c-form-group">
<!-- fieldset -->
<fieldset aria-describedby="legend-as-page-heading-hint">
  <legend class="c-h2">
      <h2>Which types of waste do you transport regularly?</h2>
  </legend>
      <!-- hint -->
  <p id="legend-as-page-heading-hint" class="block text-neutral-dark">
    Select all that apply
  </p>
  <!-- /hint -->
  <div class="c-checkboxes">
    <div x-data="{ isChecked: false }" class="">
      <div class="relative flex items-start py-base">
        <div class="flex items-center mx-sm">
          <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="legend-as-page-heading" name="legend-as-page-heading" type="checkbox" value="animal">
        </div>
        <div class="pt-0.5 leading-5">
          <!-- label -->
      <label class="block" for="legend-as-page-heading">Waste from animal carcasses</label>
      
      <!-- /label -->
        </div>
      </div>
    </div>
    <div x-data="{ isChecked: false }" class="">
      <div class="relative flex items-start py-base">
        <div class="flex items-center mx-sm">
          <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="legend-as-page-heading-2" name="legend-as-page-heading" type="checkbox" value="mines">
        </div>
        <div class="pt-0.5 leading-5">
          <!-- label -->
      <label class="block" for="legend-as-page-heading-2">Waste from mines or quarries</label>
      
      <!-- /label -->
        </div>
      </div>
    </div>
    <div x-data="{ isChecked: false }" class="">
      <div class="relative flex items-start py-base">
        <div class="flex items-center mx-sm">
          <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="legend-as-page-heading-3" name="legend-as-page-heading" type="checkbox" value="farm">
        </div>
        <div class="pt-0.5 leading-5">
          <!-- label -->
      <label class="block" for="legend-as-page-heading-3">Farm or agricultural waste</label>
      
      <!-- /label -->
        </div>
      </div>
    </div>
  </div>
</fieldset>
<!-- /fieldset --></div>
<!-- /checkboxes -->

with a medium legend

Which types of waste do you transport regularly?

Select all that apply

Error: Error: Select which types of waste you transport regularly

Show code

Macro

{% from "components/checkboxes/_macro.checkboxes.njk" import componentCheckboxes %}
{{ componentCheckboxes({
  "idPrefix": "medium-legend",
  "name": "medium-legend",
  "fieldset": {
    "legend": {
      "text": "Which types of waste do you transport regularly?",
      "classes": "c-h2"
    }
  },
  "hint": {
    "text": "Select all that apply"
  },
  "errorMessage": {
    "text": "Error: Select which types of waste you transport regularly"
  },
  "items": [
    {
      "value": "animal",
      "text": "Waste from animal carcasses"
    },
    {
      "value": "mines",
      "text": "Waste from mines or quarries"
    },
    {
      "value": "farm",
      "text": "Farm or agricultural waste"
    }
  ]
})  }}

Markup


<!-- checkboxes -->
<div class="c-form-group c-form-group--error">
<!-- fieldset -->
<fieldset aria-describedby="medium-legend-hint medium-legend-error" aria-errormessage="medium-legend-error">
  <legend class="c-h2">
    Which types of waste do you transport regularly?
  </legend>
      <!-- hint -->
  <p id="medium-legend-hint" class="block text-neutral-dark">
    Select all that apply
  </p>
  <!-- /hint -->
  <!-- error-message -->
  <p id="medium-legend-error" class="block font-semibold text-alert-base">
  <span class="sr-only">Error:</span> Error: Select which types of waste you transport regularly
  </p>
  <!-- /error-message -->
  <div class="c-checkboxes">
    <div x-data="{ isChecked: false }" class="">
      <div class="relative flex items-start py-base">
        <div class="flex items-center mx-sm">
          <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="medium-legend" name="medium-legend" type="checkbox" value="animal" aria-invalid="true">
        </div>
        <div class="pt-0.5 leading-5">
          <!-- label -->
      <label class="block" for="medium-legend">Waste from animal carcasses</label>
      
      <!-- /label -->
        </div>
      </div>
    </div>
    <div x-data="{ isChecked: false }" class="">
      <div class="relative flex items-start py-base">
        <div class="flex items-center mx-sm">
          <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="medium-legend-2" name="medium-legend" type="checkbox" value="mines" aria-invalid="true">
        </div>
        <div class="pt-0.5 leading-5">
          <!-- label -->
      <label class="block" for="medium-legend-2">Waste from mines or quarries</label>
      
      <!-- /label -->
        </div>
      </div>
    </div>
    <div x-data="{ isChecked: false }" class="">
      <div class="relative flex items-start py-base">
        <div class="flex items-center mx-sm">
          <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="medium-legend-3" name="medium-legend" type="checkbox" value="farm" aria-invalid="true">
        </div>
        <div class="pt-0.5 leading-5">
          <!-- label -->
      <label class="block" for="medium-legend-3">Farm or agricultural waste</label>
      
      <!-- /label -->
        </div>
      </div>
    </div>
  </div>
</fieldset>
<!-- /fieldset --></div>
<!-- /checkboxes -->

without fieldset

Show code

Macro

{% from "components/checkboxes/_macro.checkboxes.njk" import componentCheckboxes %}
{{ componentCheckboxes({
  "idPrefix": "without-fieldset",
  "name": "without-fieldset",
  "items": [
    {
      "value": "red",
      "text": "Red"
    },
    {
      "value": "green",
      "text": "Green"
    },
    {
      "value": "blue",
      "text": "Blue"
    }
  ]
})  }}

Markup


<!-- checkboxes -->
<div class="c-form-group">
    <div class="c-checkboxes">
    <div x-data="{ isChecked: false }" class="">
      <div class="relative flex items-start py-base">
        <div class="flex items-center mx-sm">
          <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="without-fieldset" name="without-fieldset" type="checkbox" value="red">
        </div>
        <div class="pt-0.5 leading-5">
          <!-- label -->
      <label class="block" for="without-fieldset">Red</label>
      
      <!-- /label -->
        </div>
      </div>
    </div>
    <div x-data="{ isChecked: false }" class="">
      <div class="relative flex items-start py-base">
        <div class="flex items-center mx-sm">
          <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="without-fieldset-2" name="without-fieldset" type="checkbox" value="green">
        </div>
        <div class="pt-0.5 leading-5">
          <!-- label -->
      <label class="block" for="without-fieldset-2">Green</label>
      
      <!-- /label -->
        </div>
      </div>
    </div>
    <div x-data="{ isChecked: false }" class="">
      <div class="relative flex items-start py-base">
        <div class="flex items-center mx-sm">
          <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="without-fieldset-3" name="without-fieldset" type="checkbox" value="blue">
        </div>
        <div class="pt-0.5 leading-5">
          <!-- label -->
      <label class="block" for="without-fieldset-3">Blue</label>
      
      <!-- /label -->
        </div>
      </div>
    </div>
  </div>
</div>
<!-- /checkboxes -->

with single option set 'aria-describedby' on input

Error: Error: Please accept the terms and conditions

Show code

Macro

{% from "components/checkboxes/_macro.checkboxes.njk" import componentCheckboxes %}
{{ componentCheckboxes({
  "idPrefix": "describedby",
  "name": "describedby",
  "errorMessage": {
    "text": "Error: Please accept the terms and conditions"
  },
  "items": [
    {
      "value": "yes",
      "text": "I agree to the terms and conditions"
    }
  ]
})  }}

Markup


<!-- checkboxes -->
<div class="c-form-group c-form-group--error">
    <!-- error-message -->
  <p id="describedby-error" class="block font-semibold text-alert-base">
  <span class="sr-only">Error:</span> Error: Please accept the terms and conditions
  </p>
  <!-- /error-message -->
  <div class="c-checkboxes">
    <div x-data="{ isChecked: false }" class="">
      <div class="relative flex items-start py-base">
        <div class="flex items-center mx-sm">
          <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="describedby" name="describedby" type="checkbox" value="yes" aria-describedby="describedby-error" aria-invalid="true">
        </div>
        <div class="pt-0.5 leading-5">
          <!-- label -->
      <label class="block" for="describedby">I agree to the terms and conditions</label>
      
      <!-- /label -->
        </div>
      </div>
    </div>
  </div>
</div>
<!-- /checkboxes -->

with single option (and hint) set 'aria-describedby' on input

Error: Error: Please accept the terms and conditions

Go on, you know you want to!

Show code

Macro

{% from "components/checkboxes/_macro.checkboxes.njk" import componentCheckboxes %}
{{ componentCheckboxes({
  "name": "t-and-c-with-hint",
  "errorMessage": {
    "text": "Error: Please accept the terms and conditions"
  },
  "items": [
    {
      "value": "yes",
      "text": "I agree to the terms and conditions",
      "hint": {
        "text": "Go on, you know you want to!"
      }
    }
  ]
})  }}

Markup


<!-- checkboxes -->
<div class="c-form-group c-form-group--error">
    <!-- error-message -->
  <p id="t-and-c-with-hint-error" class="block font-semibold text-alert-base">
  <span class="sr-only">Error:</span> Error: Please accept the terms and conditions
  </p>
  <!-- /error-message -->
  <div class="c-checkboxes">
    <div x-data="{ isChecked: false }" class="">
      <div class="relative flex items-start py-base">
        <div class="flex items-center mx-sm">
          <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="t-and-c-with-hint" name="t-and-c-with-hint" type="checkbox" value="yes" aria-describedby="t-and-c-with-hint-error t-and-c-with-hint-item-hint" aria-invalid="true">
        </div>
        <div class="pt-0.5 leading-5">
          <!-- label -->
      <label class="block" for="t-and-c-with-hint">I agree to the terms and conditions</label>
      
      <!-- /label -->
          <!-- hint -->
      <p id="t-and-c-with-hint-item-hint" class="block text-neutral-dark">
        Go on, you know you want to!
      </p>
      <!-- /hint -->
        </div>
      </div>
    </div>
  </div>
</div>
<!-- /checkboxes -->

with fieldset and error message

What is your nationality?

Error: Error: Please accept the terms and conditions

Show code

Macro

{% from "components/checkboxes/_macro.checkboxes.njk" import componentCheckboxes %}
{{ componentCheckboxes({
  "name": "colours",
  "errorMessage": {
    "text": "Error: Please accept the terms and conditions"
  },
  "fieldset": {
    "legend": {
      "text": "What is your nationality?"
    }
  },
  "items": [
    {
      "value": "british",
      "text": "British"
    },
    {
      "value": "irish",
      "text": "Irish"
    },
    {
      "value": "other",
      "text": "Citizen of another country"
    }
  ]
})  }}

Markup


<!-- checkboxes -->
<div class="c-form-group c-form-group--error">
<!-- fieldset -->
<fieldset aria-describedby="colours-error" aria-errormessage="colours-error">
  <legend class="  font-bold">
    What is your nationality?
  </legend>
      <!-- error-message -->
  <p id="colours-error" class="block font-semibold text-alert-base">
  <span class="sr-only">Error:</span> Error: Please accept the terms and conditions
  </p>
  <!-- /error-message -->
  <div class="c-checkboxes">
    <div x-data="{ isChecked: false }" class="">
      <div class="relative flex items-start py-base">
        <div class="flex items-center mx-sm">
          <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="colours" name="colours" type="checkbox" value="british" aria-invalid="true">
        </div>
        <div class="pt-0.5 leading-5">
          <!-- label -->
      <label class="block" for="colours">British</label>
      
      <!-- /label -->
        </div>
      </div>
    </div>
    <div x-data="{ isChecked: false }" class="">
      <div class="relative flex items-start py-base">
        <div class="flex items-center mx-sm">
          <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="colours-2" name="colours" type="checkbox" value="irish" aria-invalid="true">
        </div>
        <div class="pt-0.5 leading-5">
          <!-- label -->
      <label class="block" for="colours-2">Irish</label>
      
      <!-- /label -->
        </div>
      </div>
    </div>
    <div x-data="{ isChecked: false }" class="">
      <div class="relative flex items-start py-base">
        <div class="flex items-center mx-sm">
          <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="colours-3" name="colours" type="checkbox" value="other" aria-invalid="true">
        </div>
        <div class="pt-0.5 leading-5">
          <!-- label -->
      <label class="block" for="colours-3">Citizen of another country</label>
      
      <!-- /label -->
        </div>
      </div>
    </div>
  </div>
</fieldset>
<!-- /fieldset --></div>
<!-- /checkboxes -->

with error message

Which types of waste do you transport regularly?

Error: Error: Please select an option

Show code

Macro

{% from "components/checkboxes/_macro.checkboxes.njk" import componentCheckboxes %}
{{ componentCheckboxes({
  "idPrefix": "error-message",
  "name": "error-message",
  "errorMessage": {
    "text": "Error: Please select an option"
  },
  "fieldset": {
    "legend": {
      "text": "Which types of waste do you transport regularly?"
    }
  },
  "items": [
    {
      "value": "animal",
      "text": "Waste from animal carcasses"
    },
    {
      "value": "mines",
      "text": "Waste from mines or quarries"
    },
    {
      "value": "farm",
      "text": "Farm or agricultural waste"
    }
  ]
})  }}

Markup


<!-- checkboxes -->
<div class="c-form-group c-form-group--error">
<!-- fieldset -->
<fieldset aria-describedby="error-message-error" aria-errormessage="error-message-error">
  <legend class="  font-bold">
    Which types of waste do you transport regularly?
  </legend>
      <!-- error-message -->
  <p id="error-message-error" class="block font-semibold text-alert-base">
  <span class="sr-only">Error:</span> Error: Please select an option
  </p>
  <!-- /error-message -->
  <div class="c-checkboxes">
    <div x-data="{ isChecked: false }" class="">
      <div class="relative flex items-start py-base">
        <div class="flex items-center mx-sm">
          <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="error-message" name="error-message" type="checkbox" value="animal" aria-invalid="true">
        </div>
        <div class="pt-0.5 leading-5">
          <!-- label -->
      <label class="block" for="error-message">Waste from animal carcasses</label>
      
      <!-- /label -->
        </div>
      </div>
    </div>
    <div x-data="{ isChecked: false }" class="">
      <div class="relative flex items-start py-base">
        <div class="flex items-center mx-sm">
          <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="error-message-2" name="error-message" type="checkbox" value="mines" aria-invalid="true">
        </div>
        <div class="pt-0.5 leading-5">
          <!-- label -->
      <label class="block" for="error-message-2">Waste from mines or quarries</label>
      
      <!-- /label -->
        </div>
      </div>
    </div>
    <div x-data="{ isChecked: false }" class="">
      <div class="relative flex items-start py-base">
        <div class="flex items-center mx-sm">
          <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="error-message-3" name="error-message" type="checkbox" value="farm" aria-invalid="true">
        </div>
        <div class="pt-0.5 leading-5">
          <!-- label -->
      <label class="block" for="error-message-3">Farm or agricultural waste</label>
      
      <!-- /label -->
        </div>
      </div>
    </div>
  </div>
</fieldset>
<!-- /fieldset --></div>
<!-- /checkboxes -->

with error message and hints on items

Which types of waste do you transport regularly?

Error: Error: Please select an option

Nullam id dolor id nibh ultricies vehicula ut id elit.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Show code

Macro

{% from "components/checkboxes/_macro.checkboxes.njk" import componentCheckboxes %}
{{ componentCheckboxes({
  "idPrefix": "error-and-hints",
  "name": "error-and-hints",
  "errorMessage": {
    "text": "Error: Please select an option"
  },
  "fieldset": {
    "legend": {
      "text": "Which types of waste do you transport regularly?"
    }
  },
  "items": [
    {
      "value": "animal",
      "text": "Waste from animal carcasses",
      "hint": {
        "text": "Nullam id dolor id nibh ultricies vehicula ut id elit."
      }
    },
    {
      "value": "mines",
      "text": "Waste from mines or quarries",
      "hint": {
        "text": "Nullam id dolor id nibh ultricies vehicula ut id elit."
      }
    },
    {
      "value": "farm",
      "text": "Farm or agricultural waste",
      "hint": {
        "text": "Nullam id dolor id nibh ultricies vehicula ut id elit."
      }
    }
  ]
})  }}

Markup


<!-- checkboxes -->
<div class="c-form-group c-form-group--error">
<!-- fieldset -->
<fieldset aria-describedby="error-and-hints-error" aria-errormessage="error-and-hints-error">
  <legend class="  font-bold">
    Which types of waste do you transport regularly?
  </legend>
      <!-- error-message -->
  <p id="error-and-hints-error" class="block font-semibold text-alert-base">
  <span class="sr-only">Error:</span> Error: Please select an option
  </p>
  <!-- /error-message -->
  <div class="c-checkboxes">
    <div x-data="{ isChecked: false }" class="">
      <div class="relative flex items-start py-base">
        <div class="flex items-center mx-sm">
          <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="error-and-hints" name="error-and-hints" type="checkbox" value="animal" aria-describedby="error-and-hints-item-hint" aria-invalid="true">
        </div>
        <div class="pt-0.5 leading-5">
          <!-- label -->
      <label class="block" for="error-and-hints">Waste from animal carcasses</label>
      
      <!-- /label -->
          <!-- hint -->
      <p id="error-and-hints-item-hint" class="block text-neutral-dark">
        Nullam id dolor id nibh ultricies vehicula ut id elit.
      </p>
      <!-- /hint -->
        </div>
      </div>
    </div>
    <div x-data="{ isChecked: false }" class="">
      <div class="relative flex items-start py-base">
        <div class="flex items-center mx-sm">
          <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="error-and-hints-2" name="error-and-hints" type="checkbox" value="mines" aria-describedby="error-and-hints-2-item-hint" aria-invalid="true">
        </div>
        <div class="pt-0.5 leading-5">
          <!-- label -->
      <label class="block" for="error-and-hints-2">Waste from mines or quarries</label>
      
      <!-- /label -->
          <!-- hint -->
      <p id="error-and-hints-2-item-hint" class="block text-neutral-dark">
        Nullam id dolor id nibh ultricies vehicula ut id elit.
      </p>
      <!-- /hint -->
        </div>
      </div>
    </div>
    <div x-data="{ isChecked: false }" class="">
      <div class="relative flex items-start py-base">
        <div class="flex items-center mx-sm">
          <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="error-and-hints-3" name="error-and-hints" type="checkbox" value="farm" aria-describedby="error-and-hints-3-item-hint" aria-invalid="true">
        </div>
        <div class="pt-0.5 leading-5">
          <!-- label -->
      <label class="block" for="error-and-hints-3">Farm or agricultural waste</label>
      
      <!-- /label -->
          <!-- hint -->
      <p id="error-and-hints-3-item-hint" class="block text-neutral-dark">
        Nullam id dolor id nibh ultricies vehicula ut id elit.
      </p>
      <!-- /hint -->
        </div>
      </div>
    </div>
  </div>
</fieldset>
<!-- /fieldset --></div>
<!-- /checkboxes -->

with very long option text

Maecenas faucibus mollis interdum?

Nullam id dolor id nibh ultricies vehicula ut id elit.

Error: Error: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Show code

Macro

{% from "components/checkboxes/_macro.checkboxes.njk" import componentCheckboxes %}
{{ componentCheckboxes({
  "idPrefix": "long-option",
  "name": "long-option",
  "hint": {
    "text": "Nullam id dolor id nibh ultricies vehicula ut id elit."
  },
  "errorMessage": {
    "text": "Error: Lorem ipsum dolor sit amet, consectetur adipiscing elit."
  },
  "fieldset": {
    "legend": {
      "text": "Maecenas faucibus mollis interdum?"
    }
  },
  "items": [
    {
      "value": "nullam",
      "text": "Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus."
    },
    {
      "value": "aenean",
      "text": "Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum."
    },
    {
      "value": "fusce",
      "text": "Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Sed posuere consectetur est at lobortis."
    }
  ]
})  }}

Markup


<!-- checkboxes -->
<div class="c-form-group c-form-group--error">
<!-- fieldset -->
<fieldset aria-describedby="long-option-hint long-option-error" aria-errormessage="long-option-error">
  <legend class="  font-bold">
    Maecenas faucibus mollis interdum?
  </legend>
      <!-- hint -->
  <p id="long-option-hint" class="block text-neutral-dark">
    Nullam id dolor id nibh ultricies vehicula ut id elit.
  </p>
  <!-- /hint -->
  <!-- error-message -->
  <p id="long-option-error" class="block font-semibold text-alert-base">
  <span class="sr-only">Error:</span> Error: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </p>
  <!-- /error-message -->
  <div class="c-checkboxes">
    <div x-data="{ isChecked: false }" class="">
      <div class="relative flex items-start py-base">
        <div class="flex items-center mx-sm">
          <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="long-option" name="long-option" type="checkbox" value="nullam" aria-invalid="true">
        </div>
        <div class="pt-0.5 leading-5">
          <!-- label -->
      <label class="block" for="long-option">Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus.</label>
      
      <!-- /label -->
        </div>
      </div>
    </div>
    <div x-data="{ isChecked: false }" class="">
      <div class="relative flex items-start py-base">
        <div class="flex items-center mx-sm">
          <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="long-option-2" name="long-option" type="checkbox" value="aenean" aria-invalid="true">
        </div>
        <div class="pt-0.5 leading-5">
          <!-- label -->
      <label class="block" for="long-option-2">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.</label>
      
      <!-- /label -->
        </div>
      </div>
    </div>
    <div x-data="{ isChecked: false }" class="">
      <div class="relative flex items-start py-base">
        <div class="flex items-center mx-sm">
          <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="long-option-3" name="long-option" type="checkbox" value="fusce" aria-invalid="true">
        </div>
        <div class="pt-0.5 leading-5">
          <!-- label -->
      <label class="block" for="long-option-3">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Sed posuere consectetur est at lobortis.</label>
      
      <!-- /label -->
        </div>
      </div>
    </div>
  </div>
</fieldset>
<!-- /fieldset --></div>
<!-- /checkboxes -->

with conditional items

How do you want to be contacted?
Show code

Macro

{% from "components/checkboxes/_macro.checkboxes.njk" import componentCheckboxes %}
{{ componentCheckboxes({
  "idPrefix": "how-contacted",
  "name": "with-conditional-items",
  "fieldset": {
    "legend": {
      "text": "How do you want to be contacted?"
    }
  },
  "items": [
    {
      "value": "email",
      "text": "Email",
      "conditional": {
        "html": "<label class=\" block font-semibold \" for=\"context-email\">Mobile phone number</label>\n<input class=\" mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base \" name=\"context-email\" type=\"text\" id=\"context-email\">\n"
      }
    },
    {
      "value": "phone",
      "text": "Phone",
      "conditional": {
        "html": "<label class=\" block font-semibold \" for=\"contact-phone\">Phone number</label>\n<input class=\" mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base \" name=\"contact-phone\" type=\"text\" id=\"contact-phone\">\n"
      }
    },
    {
      "value": "text",
      "text": "Text message",
      "conditional": {
        "html": "<label class=\" block font-semibold \" for=\"contact-text-message\">Mobile phone number</label>\n<input class=\" mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base \" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n"
      }
    }
  ]
})  }}

Markup


<!-- checkboxes -->
<div class="c-form-group">
<!-- fieldset -->
<fieldset>
  <legend class="  font-bold">
    How do you want to be contacted?
  </legend>
      <div class="c-checkboxes">
    <div x-data="{ isChecked: false }" class="">
      <div class="relative flex items-start py-base">
        <div class="flex items-center mx-sm">
          <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="how-contacted" name="with-conditional-items" type="checkbox" value="email" aria-controls="conditional-how-contacted">
        </div>
        <div class="pt-0.5 leading-5">
          <!-- label -->
      <label class="block" for="how-contacted">Email</label>
      
      <!-- /label -->
        </div>
      </div>
        <div  x-show="isChecked"
              x-transition:enter="transition ease-out duration-100 transform"
              x-transition:enter-start="opacity-0 scale-95"
              x-transition:enter-end="opacity-100 scale-100"
              class="mb-base ml-5 py-sm pl-6 origin-top-left border-l-2 border-primary-base" id="conditional-how-contacted">
          <label class=" block font-semibold " for="context-email">Mobile phone number</label>
<input class=" mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base " name="context-email" type="text" id="context-email">

        </div>
    </div>
    <div x-data="{ isChecked: false }" class="">
      <div class="relative flex items-start py-base">
        <div class="flex items-center mx-sm">
          <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="how-contacted-2" name="with-conditional-items" type="checkbox" value="phone" aria-controls="conditional-how-contacted-2">
        </div>
        <div class="pt-0.5 leading-5">
          <!-- label -->
      <label class="block" for="how-contacted-2">Phone</label>
      
      <!-- /label -->
        </div>
      </div>
        <div  x-show="isChecked"
              x-transition:enter="transition ease-out duration-100 transform"
              x-transition:enter-start="opacity-0 scale-95"
              x-transition:enter-end="opacity-100 scale-100"
              class="mb-base ml-5 py-sm pl-6 origin-top-left border-l-2 border-primary-base" id="conditional-how-contacted-2">
          <label class=" block font-semibold " for="contact-phone">Phone number</label>
<input class=" mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base " name="contact-phone" type="text" id="contact-phone">

        </div>
    </div>
    <div x-data="{ isChecked: false }" class="">
      <div class="relative flex items-start py-base">
        <div class="flex items-center mx-sm">
          <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="how-contacted-3" name="with-conditional-items" type="checkbox" value="text" aria-controls="conditional-how-contacted-3">
        </div>
        <div class="pt-0.5 leading-5">
          <!-- label -->
      <label class="block" for="how-contacted-3">Text message</label>
      
      <!-- /label -->
        </div>
      </div>
        <div  x-show="isChecked"
              x-transition:enter="transition ease-out duration-100 transform"
              x-transition:enter-start="opacity-0 scale-95"
              x-transition:enter-end="opacity-100 scale-100"
              class="mb-base ml-5 py-sm pl-6 origin-top-left border-l-2 border-primary-base" id="conditional-how-contacted-3">
          <label class=" block font-semibold " for="contact-text-message">Mobile phone number</label>
<input class=" mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base " name="contact-text-message" type="text" id="contact-text-message">

        </div>
    </div>
  </div>
</fieldset>
<!-- /fieldset --></div>
<!-- /checkboxes -->

with conditional item checked

How do you want to be contacted?
Show code

Macro

{% from "components/checkboxes/_macro.checkboxes.njk" import componentCheckboxes %}
{{ componentCheckboxes({
  "idPrefix": "with-conditional-items-checked",
  "name": "with-conditional-items-checked",
  "fieldset": {
    "legend": {
      "text": "How do you want to be contacted?"
    }
  },
  "items": [
    {
      "value": "email",
      "text": "Email",
      "conditional": {
        "html": "<label class=\" block font-semibold \" for=\"context-email\">Mobile phone number</label>\n<input class=\" mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base \" name=\"context-email\" type=\"text\" id=\"context-email\">\n"
      }
    },
    {
      "value": "phone",
      "text": "Phone",
      "checked": true,
      "conditional": {
        "html": "<label class=\" block font-semibold \" for=\"contact-phone\">Phone number</label>\n<input class=\" mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base \" name=\"contact-phone\" type=\"text\" id=\"contact-phone\">\n"
      }
    },
    {
      "value": "text",
      "text": "Text message",
      "conditional": {
        "html": "<label class=\" block font-semibold \" for=\"contact-text-message\">Mobile phone number</label>\n<input class=\" mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base \" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n"
      }
    }
  ]
})  }}

Markup


<!-- checkboxes -->
<div class="c-form-group">
<!-- fieldset -->
<fieldset>
  <legend class="  font-bold">
    How do you want to be contacted?
  </legend>
      <div class="c-checkboxes">
    <div x-data="{ isChecked: false }" class="">
      <div class="relative flex items-start py-base">
        <div class="flex items-center mx-sm">
          <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-conditional-items-checked" name="with-conditional-items-checked" type="checkbox" value="email" aria-controls="conditional-with-conditional-items-checked">
        </div>
        <div class="pt-0.5 leading-5">
          <!-- label -->
      <label class="block" for="with-conditional-items-checked">Email</label>
      
      <!-- /label -->
        </div>
      </div>
        <div  x-show="isChecked"
              x-transition:enter="transition ease-out duration-100 transform"
              x-transition:enter-start="opacity-0 scale-95"
              x-transition:enter-end="opacity-100 scale-100"
              class="mb-base ml-5 py-sm pl-6 origin-top-left border-l-2 border-primary-base" id="conditional-with-conditional-items-checked">
          <label class=" block font-semibold " for="context-email">Mobile phone number</label>
<input class=" mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base " name="context-email" type="text" id="context-email">

        </div>
    </div>
    <div x-data="{ isChecked: true }" class="">
      <div class="relative flex items-start py-base">
        <div class="flex items-center mx-sm">
          <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-conditional-items-checked-2" name="with-conditional-items-checked" type="checkbox" value="phone" checked aria-controls="conditional-with-conditional-items-checked-2">
        </div>
        <div class="pt-0.5 leading-5">
          <!-- label -->
      <label class="block" for="with-conditional-items-checked-2">Phone</label>
      
      <!-- /label -->
        </div>
      </div>
        <div  x-show="isChecked"
              x-transition:enter="transition ease-out duration-100 transform"
              x-transition:enter-start="opacity-0 scale-95"
              x-transition:enter-end="opacity-100 scale-100"
              class="mb-base ml-5 py-sm pl-6 origin-top-left border-l-2 border-primary-base" id="conditional-with-conditional-items-checked-2">
          <label class=" block font-semibold " for="contact-phone">Phone number</label>
<input class=" mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base " name="contact-phone" type="text" id="contact-phone">

        </div>
    </div>
    <div x-data="{ isChecked: false }" class="">
      <div class="relative flex items-start py-base">
        <div class="flex items-center mx-sm">
          <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-conditional-items-checked-3" name="with-conditional-items-checked" type="checkbox" value="text" aria-controls="conditional-with-conditional-items-checked-3">
        </div>
        <div class="pt-0.5 leading-5">
          <!-- label -->
      <label class="block" for="with-conditional-items-checked-3">Text message</label>
      
      <!-- /label -->
        </div>
      </div>
        <div  x-show="isChecked"
              x-transition:enter="transition ease-out duration-100 transform"
              x-transition:enter-start="opacity-0 scale-95"
              x-transition:enter-end="opacity-100 scale-100"
              class="mb-base ml-5 py-sm pl-6 origin-top-left border-l-2 border-primary-base" id="conditional-with-conditional-items-checked-3">
          <label class=" block font-semibold " for="contact-text-message">Mobile phone number</label>
<input class=" mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base " name="contact-text-message" type="text" id="contact-text-message">

        </div>
    </div>
  </div>
</fieldset>
<!-- /fieldset --></div>
<!-- /checkboxes -->

with optional form-group classes showing group error

How do you want to be contacted?
Error: Problem with input
Show code

Macro

{% from "components/checkboxes/_macro.checkboxes.njk" import componentCheckboxes %}
{{ componentCheckboxes({
  "idPrefix": "optional-classes-showing-error",
  "name": "optional-classes-showing-error",
  "formGroup": {
    "classes": "c-form-group--error"
  },
  "fieldset": {
    "legend": {
      "text": "How do you want to be contacted?"
    }
  },
  "items": [
    {
      "value": "email",
      "text": "Email",
      "conditional": {
        "html": "<label class=\" block font-semibold \" for=\"context-email\">Mobile phone number</label>\n<input class=\" mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base \" name=\"context-email\" type=\"text\" id=\"context-email\">\n"
      }
    },
    {
      "value": "phone",
      "text": "Phone",
      "checked": true,
      "conditional": {
        "html": "<label class=\" block font-semibold \" for=\"contact-phone\">Phone number</label>\n<span id=\"contact-phone-error\" class=\" block font-semibold  text-alert-base \">Error: Problem with input</span>\n<input class=\" mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base  border-alert-base ring-2 ring-alert-base \" name=\"contact-phone\" type=\"text\" id=\"contact-phone\" aria-describedby=\"contact-phone-error\">\n"
      }
    },
    {
      "value": "text",
      "text": "Text message",
      "conditional": {
        "html": "<label class=\" block font-semibold \" for=\"contact-text-message\">Mobile phone number</label>\n<input class=\" mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base \" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n"
      }
    }
  ]
})  }}

Markup


<!-- checkboxes -->
<div class="c-form-group c-form-group--error">
<!-- fieldset -->
<fieldset>
  <legend class="  font-bold">
    How do you want to be contacted?
  </legend>
      <div class="c-checkboxes">
    <div x-data="{ isChecked: false }" class="">
      <div class="relative flex items-start py-base">
        <div class="flex items-center mx-sm">
          <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="optional-classes-showing-error" name="optional-classes-showing-error" type="checkbox" value="email" aria-controls="conditional-optional-classes-showing-error">
        </div>
        <div class="pt-0.5 leading-5">
          <!-- label -->
      <label class="block" for="optional-classes-showing-error">Email</label>
      
      <!-- /label -->
        </div>
      </div>
        <div  x-show="isChecked"
              x-transition:enter="transition ease-out duration-100 transform"
              x-transition:enter-start="opacity-0 scale-95"
              x-transition:enter-end="opacity-100 scale-100"
              class="mb-base ml-5 py-sm pl-6 origin-top-left border-l-2 border-primary-base" id="conditional-optional-classes-showing-error">
          <label class=" block font-semibold " for="context-email">Mobile phone number</label>
<input class=" mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base " name="context-email" type="text" id="context-email">

        </div>
    </div>
    <div x-data="{ isChecked: true }" class="">
      <div class="relative flex items-start py-base">
        <div class="flex items-center mx-sm">
          <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="optional-classes-showing-error-2" name="optional-classes-showing-error" type="checkbox" value="phone" checked aria-controls="conditional-optional-classes-showing-error-2">
        </div>
        <div class="pt-0.5 leading-5">
          <!-- label -->
      <label class="block" for="optional-classes-showing-error-2">Phone</label>
      
      <!-- /label -->
        </div>
      </div>
        <div  x-show="isChecked"
              x-transition:enter="transition ease-out duration-100 transform"
              x-transition:enter-start="opacity-0 scale-95"
              x-transition:enter-end="opacity-100 scale-100"
              class="mb-base ml-5 py-sm pl-6 origin-top-left border-l-2 border-primary-base" id="conditional-optional-classes-showing-error-2">
          <label class=" block font-semibold " for="contact-phone">Phone number</label>
<span id="contact-phone-error" class=" block font-semibold  text-alert-base ">Error: Problem with input</span>
<input class=" mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base  border-alert-base ring-2 ring-alert-base " name="contact-phone" type="text" id="contact-phone" aria-describedby="contact-phone-error">

        </div>
    </div>
    <div x-data="{ isChecked: false }" class="">
      <div class="relative flex items-start py-base">
        <div class="flex items-center mx-sm">
          <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="optional-classes-showing-error-3" name="optional-classes-showing-error" type="checkbox" value="text" aria-controls="conditional-optional-classes-showing-error-3">
        </div>
        <div class="pt-0.5 leading-5">
          <!-- label -->
      <label class="block" for="optional-classes-showing-error-3">Text message</label>
      
      <!-- /label -->
        </div>
      </div>
        <div  x-show="isChecked"
              x-transition:enter="transition ease-out duration-100 transform"
              x-transition:enter-start="opacity-0 scale-95"
              x-transition:enter-end="opacity-100 scale-100"
              class="mb-base ml-5 py-sm pl-6 origin-top-left border-l-2 border-primary-base" id="conditional-optional-classes-showing-error-3">
          <label class=" block font-semibold " for="contact-text-message">Mobile phone number</label>
<input class=" mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base " name="contact-text-message" type="text" id="contact-text-message">

        </div>
    </div>
  </div>
</fieldset>
<!-- /fieldset --></div>
<!-- /checkboxes -->

small

Show code

Macro

{% from "components/checkboxes/_macro.checkboxes.njk" import componentCheckboxes %}
{{ componentCheckboxes({
  "idPrefix": "small",
  "name": "small",
  "classes": "c-checkboxes--sm",
  "items": [
    {
      "value": "british",
      "text": "British",
      "classes": "-mt-base",
      "label": {
        "classes": "text-sm -mt-1"
      }
    },
    {
      "value": "irish",
      "text": "Irish",
      "classes": "-mt-base",
      "label": {
        "classes": "text-sm -mt-1"
      }
    },
    {
      "value": "other",
      "text": "Citizen of another country",
      "classes": "-mt-base",
      "label": {
        "classes": "text-sm -mt-1"
      }
    }
  ]
})  }}

Markup


<!-- checkboxes -->
<div class="c-form-group">
    <div class="c-checkboxes c-checkboxes--sm">
    <div x-data="{ isChecked: false }" class=" -mt-base">
      <div class="relative flex items-start py-base">
        <div class="flex items-center mx-sm">
          <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="small" name="small" type="checkbox" value="british">
        </div>
        <div class="pt-0.5 leading-5">
          <!-- label -->
      <label class="block text-sm -mt-1" for="small">British</label>
      
      <!-- /label -->
        </div>
      </div>
    </div>
    <div x-data="{ isChecked: false }" class=" -mt-base">
      <div class="relative flex items-start py-base">
        <div class="flex items-center mx-sm">
          <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="small-2" name="small" type="checkbox" value="irish">
        </div>
        <div class="pt-0.5 leading-5">
          <!-- label -->
      <label class="block text-sm -mt-1" for="small-2">Irish</label>
      
      <!-- /label -->
        </div>
      </div>
    </div>
    <div x-data="{ isChecked: false }" class=" -mt-base">
      <div class="relative flex items-start py-base">
        <div class="flex items-center mx-sm">
          <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="small-3" name="small" type="checkbox" value="other">
        </div>
        <div class="pt-0.5 leading-5">
          <!-- label -->
      <label class="block text-sm -mt-1" for="small-3">Citizen of another country</label>
      
      <!-- /label -->
        </div>
      </div>
    </div>
  </div>
</div>
<!-- /checkboxes -->

indeterminate

isIndeterminate: true

Show code

Macro

{% from "components/checkboxes/_macro.checkboxes.njk" import componentCheckboxes %}
{{ componentCheckboxes({
  "idPrefix": "indeterminate",
  "name": "indeterminate",
  "classes": "c-checkboxes--sm",
  "items": [
    {
      "value": "indeterminate",
      "text": "1 elemento seleccionado",
      "isIndeterminate": true,
      "classes": "-mt-base",
      "label": {
        "classes": "text-sm -mt-1"
      }
    }
  ]
})  }}

Markup


<!-- checkboxes -->
<div class="c-form-group">
    <div class="c-checkboxes c-checkboxes--sm">
    <div x-data="{ isChecked: false }" class=" -mt-base">
      <div class="relative flex items-start py-base">
        <div class="flex items-center mx-sm">
          <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="indeterminate" name="indeterminate" type="checkbox" value="indeterminate" onclick="if (this.readOnly) this.checked=this.readOnly=false; else if (!this.checked) this.readOnly=this.indeterminate=true;">
        </div>
        <div class="pt-0.5 leading-5">
          <!-- label -->
      <label class="block text-sm -mt-1" for="indeterminate">1 elemento seleccionado</label>
      
      <!-- /label -->
        </div>
      </div>
    </div>
  </div>
</div>
<!-- /checkboxes -->

indeterminate cheched

isIndeterminate: true, indeterminateChecked: true

Show code

Macro

{% from "components/checkboxes/_macro.checkboxes.njk" import componentCheckboxes %}
{{ componentCheckboxes({
  "idPrefix": "indeterminate-checked",
  "name": "indeterminate-checked",
  "classes": "c-checkboxes--sm",
  "items": [
    {
      "value": "indeterminate-checked-item",
      "text": "1 elemento seleccionado",
      "isIndeterminate": true,
      "indeterminateChecked": true,
      "checked": false,
      "classes": "-mt-base",
      "label": {
        "classes": "text-sm -mt-1"
      }
    }
  ]
})  }}

Markup


<!-- checkboxes -->
<div class="c-form-group">
    <div class="c-checkboxes c-checkboxes--sm">
    <div x-data="{ isChecked: false }" x-init="$refs.inputCheck.indeterminate=$refs.inputCheck.readOnly=true" class=" -mt-base">
      <div class="relative flex items-start py-base">
        <div class="flex items-center mx-sm">
          <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="indeterminate-checked" name="indeterminate-checked" type="checkbox" value="indeterminate-checked-item" onclick="if (this.readOnly) this.checked=this.readOnly=false; else if (!this.checked) this.readOnly=this.indeterminate=true;">
        </div>
        <div class="pt-0.5 leading-5">
          <!-- label -->
      <label class="block text-sm -mt-1" for="indeterminate-checked">1 elemento seleccionado</label>
      
      <!-- /label -->
        </div>
      </div>
    </div>
  </div>
</div>
<!-- /checkboxes -->