Checkboxes

Adapted

Default

A default checkboxes group lets users select one or more options from a list.

What is your nationality?

British

Irish

Citizen of another country

Show code

HTML
Astro
React
Svelte
Solid

<div class="govuk-form-group">
  <fieldset class="govuk-fieldset">
    <legend class="govuk-fieldset__legend">What is your nationality?</legend>
    <div class="govuk-checkboxes" data-module="govuk-checkboxes">
      <div class="govuk-checkboxes__item">
        <input class="govuk-checkboxes__input" type="checkbox" id="nationality" name="nationality" value="british">
        <label class="govuk-label govuk-checkboxes__label" for="nationality">
          British
        </label>
      </div>
      <div class="govuk-checkboxes__item">
        <input class="govuk-checkboxes__input" type="checkbox" id="nationality-2" name="nationality" value="irish">
        <label class="govuk-label govuk-checkboxes__label" for="nationality-2">
          Irish
        </label>
      </div>
      <div class="govuk-checkboxes__item">
        <input class="govuk-checkboxes__input" type="checkbox" id="nationality-3" name="nationality" value="other">
        <label class="govuk-label govuk-checkboxes__label" for="nationality-3">
          Citizen of another country
        </label>
      </div>
    </div>
  </fieldset>
</div>

---
import { FormGroup, Fieldset, FieldsetLegend, Checkboxes, CheckboxItem, CheckboxInput, CheckboxLabel } from "@i-dot-ai-npm/component-library-astro";
---

<FormGroup>
  <Fieldset>
    <FieldsetLegend>What is your nationality?</FieldsetLegend>
    <Checkboxes>
      <CheckboxItem>
        <CheckboxInput id="nationality" name="nationality" value="british" />
        <CheckboxLabel for="nationality"> British </CheckboxLabel>
      </CheckboxItem>
      <CheckboxItem>
        <CheckboxInput id="nationality-2" name="nationality" value="irish" />
        <CheckboxLabel for="nationality-2"> Irish </CheckboxLabel>
      </CheckboxItem>
      <CheckboxItem>
        <CheckboxInput id="nationality-3" name="nationality" value="other" />
        <CheckboxLabel for="nationality-3">
          Citizen of another country
        </CheckboxLabel>
      </CheckboxItem>
    </Checkboxes>
  </Fieldset>
</FormGroup>

import { FormGroup, Fieldset, FieldsetLegend, Checkboxes, CheckboxItem, CheckboxInput, CheckboxLabel } from "@i-dot-ai-npm/component-library-react";

export default function Example() {
  return (
    <FormGroup>
      <Fieldset>
        <FieldsetLegend>What is your nationality?</FieldsetLegend>
        <Checkboxes>
          <CheckboxItem>
            <CheckboxInput id="nationality" name="nationality" value="british" />
            <CheckboxLabel htmlFor="nationality"> British </CheckboxLabel>
          </CheckboxItem>
          <CheckboxItem>
            <CheckboxInput id="nationality-2" name="nationality" value="irish" />
            <CheckboxLabel htmlFor="nationality-2"> Irish </CheckboxLabel>
          </CheckboxItem>
          <CheckboxItem>
            <CheckboxInput id="nationality-3" name="nationality" value="other" />
            <CheckboxLabel htmlFor="nationality-3">
              Citizen of another country
            </CheckboxLabel>
          </CheckboxItem>
        </Checkboxes>
      </Fieldset>
    </FormGroup>
  );
}

<script>
  import { FormGroup, Fieldset, FieldsetLegend, Checkboxes, CheckboxItem, CheckboxInput, CheckboxLabel } from "@i-dot-ai-npm/component-library-svelte";
</script>

<FormGroup>
  <Fieldset>
    <FieldsetLegend>What is your nationality?</FieldsetLegend>
    <Checkboxes>
      <CheckboxItem>
        <CheckboxInput id="nationality" name="nationality" value="british" />
        <CheckboxLabel for="nationality"> British </CheckboxLabel>
      </CheckboxItem>
      <CheckboxItem>
        <CheckboxInput id="nationality-2" name="nationality" value="irish" />
        <CheckboxLabel for="nationality-2"> Irish </CheckboxLabel>
      </CheckboxItem>
      <CheckboxItem>
        <CheckboxInput id="nationality-3" name="nationality" value="other" />
        <CheckboxLabel for="nationality-3">
          Citizen of another country
        </CheckboxLabel>
      </CheckboxItem>
    </Checkboxes>
  </Fieldset>
</FormGroup>

import { FormGroup, Fieldset, FieldsetLegend, Checkboxes, CheckboxItem, CheckboxInput, CheckboxLabel } from "@i-dot-ai-npm/component-library-solid";

export default function Example() {
  return (
    <FormGroup>
      <Fieldset>
        <FieldsetLegend>What is your nationality?</FieldsetLegend>
        <Checkboxes>
          <CheckboxItem>
            <CheckboxInput id="nationality" name="nationality" value="british" />
            <CheckboxLabel for="nationality"> British </CheckboxLabel>
          </CheckboxItem>
          <CheckboxItem>
            <CheckboxInput id="nationality-2" name="nationality" value="irish" />
            <CheckboxLabel for="nationality-2"> Irish </CheckboxLabel>
          </CheckboxItem>
          <CheckboxItem>
            <CheckboxInput id="nationality-3" name="nationality" value="other" />
            <CheckboxLabel for="nationality-3">
              Citizen of another country
            </CheckboxLabel>
          </CheckboxItem>
        </Checkboxes>
      </Fieldset>
    </FormGroup>
  );
}

Subtle

Use subtle checkboxes to reduce the prominence of the checkboxes when they are not the main focus of the page.

What is your nationality?

British

Irish

Citizen of another country

Show code

HTML
Astro
React
Svelte
Solid

<div class="govuk-form-group">
  <fieldset class="govuk-fieldset">
    <legend class="govuk-fieldset__legend">What is your nationality?</legend>
    <div class="govuk-checkboxes govuk-checkboxes--subtle" data-module="govuk-checkboxes">
      <div class="govuk-checkboxes__item">
        <input class="govuk-checkboxes__input" type="checkbox" id="nationality-subtle" name="nationality-subtle" value="british">
        <label class="govuk-label govuk-checkboxes__label" for="nationality-subtle">
          British
        </label>
      </div>
      <div class="govuk-checkboxes__item">
        <input class="govuk-checkboxes__input" type="checkbox" id="nationality-subtle-2" name="nationality-subtle" value="irish">
        <label class="govuk-label govuk-checkboxes__label" for="nationality-subtle-2">
          Irish
        </label>
      </div>
      <div class="govuk-checkboxes__item">
        <input class="govuk-checkboxes__input" type="checkbox" id="nationality-subtle-3" name="nationality-subtle" value="other">
        <label class="govuk-label govuk-checkboxes__label" for="nationality-subtle-3">
          Citizen of another country
        </label>
      </div>
    </div>
  </fieldset>
</div>

---
import { FormGroup, Fieldset, FieldsetLegend, Checkboxes, CheckboxItem, CheckboxInput, CheckboxLabel } from "@i-dot-ai-npm/component-library-astro";
---

<FormGroup>
  <Fieldset>
    <FieldsetLegend>What is your nationality?</FieldsetLegend>
    <Checkboxes subtle>
      <CheckboxItem>
        <CheckboxInput
          id="nationality-subtle"
          name="nationality-subtle"
          value="british"
        />
        <CheckboxLabel for="nationality-subtle"> British </CheckboxLabel>
      </CheckboxItem>
      <CheckboxItem>
        <CheckboxInput
          id="nationality-subtle-2"
          name="nationality-subtle"
          value="irish"
        />
        <CheckboxLabel for="nationality-subtle-2"> Irish </CheckboxLabel>
      </CheckboxItem>
      <CheckboxItem>
        <CheckboxInput
          id="nationality-subtle-3"
          name="nationality-subtle"
          value="other"
        />
        <CheckboxLabel for="nationality-subtle-3">
          Citizen of another country
        </CheckboxLabel>
      </CheckboxItem>
    </Checkboxes>
  </Fieldset>
</FormGroup>

import { FormGroup, Fieldset, FieldsetLegend, Checkboxes, CheckboxItem, CheckboxInput, CheckboxLabel } from "@i-dot-ai-npm/component-library-react";

export default function Example() {
  return (
    <FormGroup>
      <Fieldset>
        <FieldsetLegend>What is your nationality?</FieldsetLegend>
        <Checkboxes subtle>
          <CheckboxItem>
            <CheckboxInput
              id="nationality-subtle"
              name="nationality-subtle"
              value="british"
            />
            <CheckboxLabel htmlFor="nationality-subtle"> British </CheckboxLabel>
          </CheckboxItem>
          <CheckboxItem>
            <CheckboxInput
              id="nationality-subtle-2"
              name="nationality-subtle"
              value="irish"
            />
            <CheckboxLabel htmlFor="nationality-subtle-2"> Irish </CheckboxLabel>
          </CheckboxItem>
          <CheckboxItem>
            <CheckboxInput
              id="nationality-subtle-3"
              name="nationality-subtle"
              value="other"
            />
            <CheckboxLabel htmlFor="nationality-subtle-3">
              Citizen of another country
            </CheckboxLabel>
          </CheckboxItem>
        </Checkboxes>
      </Fieldset>
    </FormGroup>
  );
}

<script>
  import { FormGroup, Fieldset, FieldsetLegend, Checkboxes, CheckboxItem, CheckboxInput, CheckboxLabel } from "@i-dot-ai-npm/component-library-svelte";
</script>

<FormGroup>
  <Fieldset>
    <FieldsetLegend>What is your nationality?</FieldsetLegend>
    <Checkboxes subtle>
      <CheckboxItem>
        <CheckboxInput
          id="nationality-subtle"
          name="nationality-subtle"
          value="british"
        />
        <CheckboxLabel for="nationality-subtle"> British </CheckboxLabel>
      </CheckboxItem>
      <CheckboxItem>
        <CheckboxInput
          id="nationality-subtle-2"
          name="nationality-subtle"
          value="irish"
        />
        <CheckboxLabel for="nationality-subtle-2"> Irish </CheckboxLabel>
      </CheckboxItem>
      <CheckboxItem>
        <CheckboxInput
          id="nationality-subtle-3"
          name="nationality-subtle"
          value="other"
        />
        <CheckboxLabel for="nationality-subtle-3">
          Citizen of another country
        </CheckboxLabel>
      </CheckboxItem>
    </Checkboxes>
  </Fieldset>
</FormGroup>

import { FormGroup, Fieldset, FieldsetLegend, Checkboxes, CheckboxItem, CheckboxInput, CheckboxLabel } from "@i-dot-ai-npm/component-library-solid";

export default function Example() {
  return (
    <FormGroup>
      <Fieldset>
        <FieldsetLegend>What is your nationality?</FieldsetLegend>
        <Checkboxes subtle>
          <CheckboxItem>
            <CheckboxInput
              id="nationality-subtle"
              name="nationality-subtle"
              value="british"
            />
            <CheckboxLabel for="nationality-subtle"> British </CheckboxLabel>
          </CheckboxItem>
          <CheckboxItem>
            <CheckboxInput
              id="nationality-subtle-2"
              name="nationality-subtle"
              value="irish"
            />
            <CheckboxLabel for="nationality-subtle-2"> Irish </CheckboxLabel>
          </CheckboxItem>
          <CheckboxItem>
            <CheckboxInput
              id="nationality-subtle-3"
              name="nationality-subtle"
              value="other"
            />
            <CheckboxLabel for="nationality-subtle-3">
              Citizen of another country
            </CheckboxLabel>
          </CheckboxItem>
        </Checkboxes>
      </Fieldset>
    </FormGroup>
  );
}

Small

Use small checkboxes when the user is unlikely to want to change their answer, or in a densely populated interface.

What is your nationality?

British

Irish

Citizen of another country

Show code

HTML
Astro
React
Svelte
Solid

<div class="govuk-form-group">
  <fieldset class="govuk-fieldset">
    <legend class="govuk-fieldset__legend">What is your nationality?</legend>
    <div class="govuk-checkboxes govuk-checkboxes--small" data-module="govuk-checkboxes">
      <div class="govuk-checkboxes__item">
        <input class="govuk-checkboxes__input" type="checkbox" id="nationality-small" name="nationality-small" value="british">
        <label class="govuk-label govuk-checkboxes__label" for="nationality-small">
          British
        </label>
      </div>
      <div class="govuk-checkboxes__item">
        <input class="govuk-checkboxes__input" type="checkbox" id="nationality-small-2" name="nationality-small" value="irish">
        <label class="govuk-label govuk-checkboxes__label" for="nationality-small-2">
          Irish
        </label>
      </div>
      <div class="govuk-checkboxes__item">
        <input class="govuk-checkboxes__input" type="checkbox" id="nationality-small-3" name="nationality-small" value="other">
        <label class="govuk-label govuk-checkboxes__label" for="nationality-small-3">
          Citizen of another country
        </label>
      </div>
    </div>
  </fieldset>
</div>

---
import { FormGroup, Fieldset, FieldsetLegend, Checkboxes, CheckboxItem, CheckboxInput, CheckboxLabel } from "@i-dot-ai-npm/component-library-astro";
---

<FormGroup>
  <Fieldset>
    <FieldsetLegend>What is your nationality?</FieldsetLegend>
    <Checkboxes small>
      <CheckboxItem>
        <CheckboxInput
          id="nationality-small"
          name="nationality-small"
          value="british"
        />
        <CheckboxLabel for="nationality-small"> British </CheckboxLabel>
      </CheckboxItem>
      <CheckboxItem>
        <CheckboxInput
          id="nationality-small-2"
          name="nationality-small"
          value="irish"
        />
        <CheckboxLabel for="nationality-small-2"> Irish </CheckboxLabel>
      </CheckboxItem>
      <CheckboxItem>
        <CheckboxInput
          id="nationality-small-3"
          name="nationality-small"
          value="other"
        />
        <CheckboxLabel for="nationality-small-3">
          Citizen of another country
        </CheckboxLabel>
      </CheckboxItem>
    </Checkboxes>
  </Fieldset>
</FormGroup>

import { FormGroup, Fieldset, FieldsetLegend, Checkboxes, CheckboxItem, CheckboxInput, CheckboxLabel } from "@i-dot-ai-npm/component-library-react";

export default function Example() {
  return (
    <FormGroup>
      <Fieldset>
        <FieldsetLegend>What is your nationality?</FieldsetLegend>
        <Checkboxes small>
          <CheckboxItem>
            <CheckboxInput
              id="nationality-small"
              name="nationality-small"
              value="british"
            />
            <CheckboxLabel htmlFor="nationality-small"> British </CheckboxLabel>
          </CheckboxItem>
          <CheckboxItem>
            <CheckboxInput
              id="nationality-small-2"
              name="nationality-small"
              value="irish"
            />
            <CheckboxLabel htmlFor="nationality-small-2"> Irish </CheckboxLabel>
          </CheckboxItem>
          <CheckboxItem>
            <CheckboxInput
              id="nationality-small-3"
              name="nationality-small"
              value="other"
            />
            <CheckboxLabel htmlFor="nationality-small-3">
              Citizen of another country
            </CheckboxLabel>
          </CheckboxItem>
        </Checkboxes>
      </Fieldset>
    </FormGroup>
  );
}

<script>
  import { FormGroup, Fieldset, FieldsetLegend, Checkboxes, CheckboxItem, CheckboxInput, CheckboxLabel } from "@i-dot-ai-npm/component-library-svelte";
</script>

<FormGroup>
  <Fieldset>
    <FieldsetLegend>What is your nationality?</FieldsetLegend>
    <Checkboxes small>
      <CheckboxItem>
        <CheckboxInput
          id="nationality-small"
          name="nationality-small"
          value="british"
        />
        <CheckboxLabel for="nationality-small"> British </CheckboxLabel>
      </CheckboxItem>
      <CheckboxItem>
        <CheckboxInput
          id="nationality-small-2"
          name="nationality-small"
          value="irish"
        />
        <CheckboxLabel for="nationality-small-2"> Irish </CheckboxLabel>
      </CheckboxItem>
      <CheckboxItem>
        <CheckboxInput
          id="nationality-small-3"
          name="nationality-small"
          value="other"
        />
        <CheckboxLabel for="nationality-small-3">
          Citizen of another country
        </CheckboxLabel>
      </CheckboxItem>
    </Checkboxes>
  </Fieldset>
</FormGroup>

import { FormGroup, Fieldset, FieldsetLegend, Checkboxes, CheckboxItem, CheckboxInput, CheckboxLabel } from "@i-dot-ai-npm/component-library-solid";

export default function Example() {
  return (
    <FormGroup>
      <Fieldset>
        <FieldsetLegend>What is your nationality?</FieldsetLegend>
        <Checkboxes small>
          <CheckboxItem>
            <CheckboxInput
              id="nationality-small"
              name="nationality-small"
              value="british"
            />
            <CheckboxLabel for="nationality-small"> British </CheckboxLabel>
          </CheckboxItem>
          <CheckboxItem>
            <CheckboxInput
              id="nationality-small-2"
              name="nationality-small"
              value="irish"
            />
            <CheckboxLabel for="nationality-small-2"> Irish </CheckboxLabel>
          </CheckboxItem>
          <CheckboxItem>
            <CheckboxInput
              id="nationality-small-3"
              name="nationality-small"
              value="other"
            />
            <CheckboxLabel for="nationality-small-3">
              Citizen of another country
            </CheckboxLabel>
          </CheckboxItem>
        </Checkboxes>
      </Fieldset>
    </FormGroup>
  );
}

When to use this component

Use the checkboxes component when you need to help users:

select multiple options from a list
toggle a single option on or off

When not to use this component

Do not use the checkboxes component if users can only choose one option from a selection. In this case, use the Radios component.