Version
has been released! Read the upgrade guide

Checkbox

The documentation on this page is considered legacy.

We will be updating this content to our new principle-based format in the near future.

Overview

Checkboxes let users select multiple options at once.

1Usage

The checkbox component allows the active selection of one or more input values at a time. It typically appears in forms and modals. If you require the user to select a single option from a series of items, then the Radio Button component should be used instead.

2Anatomy

  1. Checkbox Button. The checkbox is a single value toggle.

  2. Label (Optional). Used to provide context to the Checkbox Button.

3States

The Checkbox Button has three available states - DefaultHover/Active, and Checked.

The MOD.UK Design System provides guidance and tools for building high–quality Services within the UK Ministry of Defence. This project is open source and its source code is available on GitHub.

All content is available under the Apache 2.0 licence, except where otherwise stated.

© Crown copyright