Add smaller versions of radio buttons and checkboxes #1125

dashouse · 2019-01-10T15:49:03Z

Introduces smaller versions of the radios and checkboxes components.

Despite being visually smaller, these have a target size of 44 x 44px, as the input extends outside of the boundaries of the visual control.

To make it clear which control will be activated when hovering in the gap between the controls, we add a hover state.

This PR also simplifies the way that existing checkboxes and radio buttons are rendered in IE8 and increases the touch area of the existing radios and checkboxes to 44x44px.

👉Checkbox examples in the review app
👉Radio examples in the review app
👉Radios and checkboxes, big and small, in all the states
👉A contrived example

Browser and assistive technology testing

Physical device testing

Chrome 69, Android 7.0 (Galaxy S6)

Works as expected

Chrome 50, Android 5.1.1 (Nexus 10 tablet)

Works as expected

Chrome 71, Android 4.4.2 (Galaxy Note 2)

Tested with stylus and touch. Worked as expected

Android Browser, Android 4.4.2 (Galaxy Note 2)

The stylus triggers hover style
Touch triggers the hover style, and clicking once triggers hover style then after a delay triggers the click. Not ideal but still usable.

Android 2.2 (Galaxy S)

Radios are square – seemingly no support for border-radius – an existing issue.
Small hidden element highlighted on tap. Hover state not visible.

Safari, iOS 10.3.2 (iPhone 5C)

Works as expected

Safari, iOS 9.3.2 (iPhone 5)

Works as expected

Safari, iOS 7.1.2 (iPhone 4)

Hover state is visible and 'sticks', but clicking once still triggers the control

Internet Explorer, Windows Phone 8.1 (Lumia 630)

Works as expected

Screenshots

Chrome 70 (macOS Mojave)

Chrome 70 (Windows 10)

Chrome 71 (macOS Mojave)

Chrome 71 (Windows 10)

Firefox 62 (macOS Mojave)

Firefox 62 (Windows 10)

Safari 9.1 (OS X El Capitan)

Safari 10.1 (macOS Sierra)

Safari 11.1 (macOS High Sierra)

Safari 12 (macOS Mojave)

Internet Explorer 8 (Windows 7)

Internet Explorer 9 (Windows 7)

Internet Explorer 10 (Windows 8)

Internet Explorer 11 (Windows 10)

Edge 18 (Windows 10)

Android 7.1 (Google Pixel)

Android 8.0 (Google Pixel 2)

Android 9.0 (Google Pixel 2)

iOS 8.3 (iPhone 6)

iOS 10 (iPhone 7)

iOS 11 (iPhone 8)

iOS 12 (iPhone XR)

Known issues

The hover state 'sticks' on devices that support both touch and pointer based interaction, such as Chromebooks and Surfaces.

Video showing issue

If you try to use a hint with the smaller radios and checkboxes, moving the cursor over the hint will trigger the hover state, but clicking the hint won't actually select the control.

Video showing issue

joelanman · 2019-01-10T15:54:12Z

Nice work Dave! Feels pretty good on mobile Chrome. After selecting, the hover colour remains, is that expected?

NickColley · 2019-01-10T15:58:35Z

@dashouse can you explain the technical requirement to have them block?

NickColley · 2019-01-10T16:04:51Z

@joelanman this could be the same issue we saw when we looked to add ghost hover states before: alphagov/govuk_elements#570 (comment)

dashouse · 2019-01-10T16:14:32Z

Updated with a quick override class to block the hover state for the second example to see how we feel about the difference.

@joelanman Hover colour should not remain no... I wasn't seeing this initially on iOS, but I don't see the normal focus either

@NickColley It's hard to explain in words, but also near impossible to screenshot because of the cursors but... the .govuk-radios__item is hovered in order to add the box shadow...if we make the .govuk-radios__label inline-block then the hover state appears when .govuk-radios__item is hovered when away from the label. The checkbox or radio isn't actually selectable but the hover state gives a false impression that it could be. I may have to show you.

NickColley · 2019-01-10T16:36:27Z

I think... if you do, it works as we want?

.govuk-checkboxes--small .govuk-checkboxes__label {
-   display: block;
-   margin-top: -2px;
    padding: 11px 15px 9px 0;
}
.govuk-checkboxes--small .govuk-checkboxes__item {
    min-height: 0;
    padding-left: 35px;
+   float: left;
+   margin-top: -2px;
}

dashouse · 2019-02-05T15:51:38Z

I think... if you do, it works as we want?

.govuk-checkboxes--small .govuk-checkboxes__label {
-   display: block;
-   margin-top: -2px;
    padding: 11px 15px 9px 0;
}
.govuk-checkboxes--small .govuk-checkboxes__item {
    min-height: 0;
    padding-left: 35px;
+   float: left;
+   margin-top: -2px;
}

Yes, this is perfect 👍

NickColley · 2019-03-12T14:55:10Z

src/components/radios/_radios.scss

+    //
+    // (If you do use them, they won't look completely broken... but seriously,
+    // don't use them)
+    .govuk-radios__hint {


I wonder if 'pointer-events: none' would ensure it doesnt trigger the hover state...

I'd had a similar thought, but sadly not, as the pointer events just 'go through' the hint and find the label.

- Nest small radios selectors and re-order - Improve documentation - Fix display of hints - Fix alignment of conditional reveals - Disable hover on disabled radios - General tidy up

This should be handled by autoprefixer instead.

This means that they display correctly when colours are overridden in the browser.

hannalaakso

Great work everyone 🙌

aliuk2012 · 2019-04-11T14:30:18Z

Addresses alphagov/govuk-design-system-backlog#162

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1125 January 10, 2019 15:49 Inactive

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1125 January 10, 2019 15:59 Inactive

dashouse force-pushed the small-form-controls branch from f7e900c to 53dc4ae Compare February 7, 2019 09:37

hannalaakso mentioned this pull request Feb 21, 2019

DNM: Add News and Comms with sorting and small form controls #1212

Closed

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1125 March 5, 2019 09:32 Inactive

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1125 March 7, 2019 15:02 Inactive

andymantell mentioned this pull request Mar 12, 2019

Checkboxes demo LandRegistry/hmlr-design-system-legacy#21

Merged

govuk-design-system-ci requested a deployment to govuk-frontend-review-pr-1125 March 12, 2019 14:45 Abandoned

NickColley reviewed Mar 12, 2019

View reviewed changes

govuk-design-system-ci requested a deployment to govuk-frontend-review-pr-1125 March 12, 2019 15:41 Abandoned

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1125 March 13, 2019 09:17 Inactive

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1125 March 13, 2019 11:12 Inactive

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1125 March 14, 2019 15:47 Inactive

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1125 March 14, 2019 15:53 Inactive

36degrees force-pushed the small-form-controls branch from 83f304c to 160cfee Compare March 18, 2019 14:03

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1125 March 18, 2019 14:03 Inactive

36degrees force-pushed the small-form-controls branch from 160cfee to dedc6da Compare March 18, 2019 14:13

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1125 March 18, 2019 14:13 Inactive

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1125 March 18, 2019 14:26 Inactive

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1125 March 18, 2019 15:05 Inactive

36degrees force-pushed the small-form-controls branch from 70edfe9 to 4ac2df0 Compare March 18, 2019 15:20

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1125 March 18, 2019 15:20 Inactive

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1125 March 19, 2019 13:37 Inactive

36degrees changed the title ~~WIP - Small radios and checkboxes~~ Add smaller versions of radio buttons and checkboxes Mar 20, 2019

36degrees added 17 commits April 11, 2019 07:28

Document small checkboxes

d12d026

Simplify variable names

7c83d7c

Disable hover state when checkbox is disabled

5620742

Fix hint with small checkboxes

d16c286

Fix conditional reveals with checkboxes

746f73f

Port checkbox fixes to radios, refactoring

ce82a15

- Nest small radios selectors and re-order - Improve documentation - Fix display of hints - Fix alignment of conditional reveals - Disable hover on disabled radios - General tidy up

Add radios examples

3cfb4c0

Bump radio inputs to 44 x 44px

f0a9dff

Disable hover state on checkboxes and radios

777de0d

Centre the inputs around pseudo inputs

6a0bc5c

Remove prefixed -ms-touch-action

384f272

This should be handled by autoprefixer instead.

Adjust dividers with small radios

b645ac1

Improve IE8 rendering

19da14a

Avoid hover state for coarse pointers

971299a

Add small form controls example

4a009e3

Use border for small radio buttons

6276830

This means that they display correctly when colours are overridden in the browser.

Add example of form controls in all states

23d0d71

aliuk2012 force-pushed the small-form-controls branch from 26fd6e8 to 23d0d71 Compare April 11, 2019 06:29

govuk-design-system-ci deployed to govuk-frontend-review-pr-1125 April 11, 2019 06:29 View deployment

aliuk2012 self-assigned this Apr 11, 2019

aliuk2012 approved these changes Apr 11, 2019

View reviewed changes

hannalaakso approved these changes Apr 11, 2019

View reviewed changes

aliuk2012 merged commit c7b6ef8 into master Apr 11, 2019

aliuk2012 mentioned this pull request Apr 11, 2019

Release v2.10.0 #1271

Merged

aliuk2012 added this to the Next milestone Apr 12, 2019

aliuk2012 mentioned this pull request Apr 12, 2019

Bump govuk-frontend from v2.9.0 to v2.10.0 alphagov/govuk-prototype-kit#722

Merged

aliuk2012 deleted the small-form-controls branch May 9, 2019 06:29

colinrotherham mentioned this pull request Jul 1, 2024

Fix divider width for small checkboxes #5114

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add smaller versions of radio buttons and checkboxes #1125

Add smaller versions of radio buttons and checkboxes #1125

dashouse commented Jan 10, 2019 •

edited by 36degrees

Loading

joelanman commented Jan 10, 2019

NickColley commented Jan 10, 2019

NickColley commented Jan 10, 2019 •

edited

Loading

dashouse commented Jan 10, 2019 •

edited

Loading

NickColley commented Jan 10, 2019

dashouse commented Feb 5, 2019

NickColley Mar 12, 2019

36degrees Mar 12, 2019

hannalaakso left a comment

aliuk2012 commented Apr 11, 2019

Add smaller versions of radio buttons and checkboxes #1125

Add smaller versions of radio buttons and checkboxes #1125

Conversation

dashouse commented Jan 10, 2019 • edited by 36degrees Loading

Browser and assistive technology testing

Physical device testing

Chrome 69, Android 7.0 (Galaxy S6)

Chrome 50, Android 5.1.1 (Nexus 10 tablet)

Chrome 71, Android 4.4.2 (Galaxy Note 2)

Android Browser, Android 4.4.2 (Galaxy Note 2)

Android 2.2 (Galaxy S)

Safari, iOS 10.3.2 (iPhone 5C)

Safari, iOS 9.3.2 (iPhone 5)

Safari, iOS 7.1.2 (iPhone 4)

Internet Explorer, Windows Phone 8.1 (Lumia 630)

Screenshots

Known issues

joelanman commented Jan 10, 2019

NickColley commented Jan 10, 2019

NickColley commented Jan 10, 2019 • edited Loading

dashouse commented Jan 10, 2019 • edited Loading

NickColley commented Jan 10, 2019

dashouse commented Feb 5, 2019

NickColley Mar 12, 2019

Choose a reason for hiding this comment

36degrees Mar 12, 2019

Choose a reason for hiding this comment

hannalaakso left a comment

Choose a reason for hiding this comment

aliuk2012 commented Apr 11, 2019

dashouse commented Jan 10, 2019 •

edited by 36degrees

Loading

NickColley commented Jan 10, 2019 •

edited

Loading

dashouse commented Jan 10, 2019 •

edited

Loading