Version
has been released! Read the upgrade guide

Checkbox Enhanced

The documentation on this page is considered legacy.

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

An enhanced version of the Checkbox with space for custom content.

Overview

The Checkbox has an enhanced version (CheckboxEnhanced) when a label isn’t sufficient by itself. This button provides a space for a description or custom content. It is wrapped in a frame to highlight its clickable region.

1Usage

The CheckboxEnhanced component allows the active selection of one input at a time. It typically appears in forms and modals. If you require the user to select single options, then the RadioEnhanced component should be used instead.

2Anatomy

  1. Frame. Wraps the component, highlighting when hovered.

  2. Checkbox. A single value toggle.

  3. Title. Provides context to the Checkbox.

  4. Description (Optional). Additional information.

3States

The enhanced version of the Checkbox has three states - DefaultHover/Active, and Checked.

4Variations

The Enhanced Checkbox has a variation where custom content can be added in place of its description. The Checkbox and Title must remain in the component so the user knows what to expect with its functionality.

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