Version
has been released! Read the upgrade guide

Radio

The documentation on this page is considered legacy.

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

Radios let users select one option at a time.

Overview

1Usage

The Radio 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 multiple options, then the Checkbox component should be used instead.

2Anatomy

  1. Radio Button. The Radio Button is a single value toggle

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

3States

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

Enhanced Radio Button

The Enhanced Radio Button 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 multiple options, then the Checkbox Enhanced component should be used instead.

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