Design

Research and rationale

Our design for radio buttons is based on the GOV.UK (UK Government, 2023, Radio section) and DTA (Digital Transformation Agency, 2018, Control input section).

Our radio buttons are much larger than default browser inputs to provide larger hit/target areas for touchscreen devices or mobility impaired users. There's a smaller version available where this is not practical.

Like all our form elements, our radio buttons used the border-alt colour to determine their border colours as this is designed for maximum contrast.

For more information and our form designs and rationale see the forms component.