Back to Checkbox-guidelines

CSS ComponentThe latest version of this package is: 14.2.4, Opens in new window

Checkboxes allow the selection of multiple options from a set

This component provides .css, .styl, .less and .scss -files.

To be able to install this component, please refer to the Project Setup documentation.

$ npm i @ids-core/checkbox@14.2.4

A paved road or a path?

Table of Contents

Edit this section, Opens in new window


Required markup

  <div class="if input-wrapper">
    <fieldset class="if">
      <legend class="if">A paved road or a path?</legend>
      <div class="if checkboxes [horizontal]">
        <input id="checkboxes-implementation-checkbox-1" type="checkbox" class="if checkbox" />
        <label for="checkboxes-implementation-checkbox-1">A path! A path!</label>
        <input id="checkboxes-implementation-checkbox-2" type="checkbox" class="if checkbox" />
        <label for="checkboxes-implementation-checkbox-2">A path! A path!</label>
        <input id="checkboxes-implementation-checkbox-3" checked type="checkbox" class="if checkbox" />
        <label for="checkboxes-implementation-checkbox-3">A path! A path!</label>
        <span class="if input-error" aria-live="polite">A validation error</span>
        <span class="if input-help">A helpful text</span>
Edit this section, Opens in new window



If you want to use a checkbox as a standalone component, i.e. just a checkbox without label, use the .standalone-class.

<form autocomplete="off" style="width: 100%">
  <div class="if input-wrapper">
    <div class="if checkboxes">
        class="if checkbox standalone"
      <label for="checkbox-standalone-checkbox2"></label>
Edit this section, Opens in new window


Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

14.0.0 (2021-11-09)


  • ๐Ÿค– Rename util to utils (f78721f)

Code Refactoring

  • ๐Ÿ’ก Rename scope and repository (3ea5423)
  • ๐Ÿ’ก Use new navigation structure for documentation (415aee5), closes #490579


  • โœ๏ธ Update links and change navigation structure (0bfd27d), closes #490579


  • ๐Ÿงจ The scope for If Design System npm packages has now changed from

@if-design-system to @ids-core. We have also renamed the repository from if-design-system to ids-core

  • ๐Ÿงจ Util is now renamed to Utils
  • ๐Ÿงจ We have now changed the navigation structure for the documentation site.

Please update any saved links!

  • ๐Ÿงจ Navigation structure has now changed. Please see release notes!

13.11.0 (2021-10-19)


  • ๐ŸŽธ Input field hot reload (eac76b7)

13.9.2 (2021-09-30)

Bug Fixes

  • ๐Ÿ› Complete the pseudo-element fix (1dcee2c)

13.6.3 (2021-09-17)

Bug Fixes

13.5.1 (2021-09-07)

Bug Fixes

  • ๐Ÿ› Finalize data-size issue (f7f9f55), closes #374144
  • ๐Ÿ› Update and fix data sizing for form elements (5fbefb4), closes #374144

12.13.1 (2021-08-11)

Bug Fixes

  • ๐Ÿ› Whitelist docs dir for npm packaging (1a5cfd0), closes #457621

12.12.1 (2021-08-10)

Bug Fixes

12.6.0 (2021-05-27)

Bug Fixes

  • ๐Ÿ› Manually set firstPublished and lastModified (e83af7d)
  • ๐Ÿ› We don't need lastModified (e458a12)

12.0.0 (2021-05-05)

Bug Fixes

  • ๐Ÿ› Use correct data size for largest (3357893)

Code Refactoring

  • ๐Ÿ’ก Rename and consolidate mixins (67cf470), closes #268081
  • ๐Ÿ’ก Rename crosslink buttons to Shortcuts (c05bf9c), closes #336508
  • ๐Ÿ’ก Rename Dropdown to Dropdown Select (af1fc9d), closes #336508
  • ๐Ÿ’ก Rename Footer to Global Footer (7cb7239), closes #336508
  • ๐Ÿ’ก Rename Notification to Alert Banner (8b4e48d), closes #336508


  • ๐ŸŽธ Extract components from selection control (50607a4), closes #336508
  • ๐ŸŽธ Rename and extract and update hero with no image to (384eb77), closes #336508


  • ๐Ÿงจ All of the mixins have now been renamed
  • ๐Ÿงจ Notification is now renamed to Alert Banner
  • ๐Ÿงจ This extracts the Hero variation with no image into a separate, design

updated component named Header

  • ๐Ÿงจ Footer is now renamed to Global Footer
  • ๐Ÿงจ The Dropdown Component is now renamed to Dropdown Select. Dropdown is a


  • ๐Ÿงจ Crosslinks have seized to exist. They are all extracted into separate

components. This commit converts crosslink buttons into the new component Shortcuts

  • ๐Ÿงจ Selection controls is no more. Has ceased to be. Bereft of life, it

rests in peace. This is an ex-component. The component is split into Radio Buttons, Toggle Control and Checkbox

Edit this section, Opens in new window
Contact us, Opens in new window