Checkboxes

[govuk-design-system]

Use this issue to discuss this component in the GOV.UK Design System.

[torydunn-hmrc]

Would it be possible to look at vertical alignment when the option text is longer than a single line? Should alignment be top aligned, in general - would that help?

[36degrees]

Hey @torydunn-hmrc – I just want to check what you're asking for. When you say 'would it be possible to look at' do you think there's an issue with the checkbox component that needs looking at, or do you just want to see an example so you know what it does?

We don't currently have any examples of checkboxes with very long option text in the Design System, because we'd generally encourage service teams to keep their option text short. But I can show you what it looks like if you do have a lot of text…

As you can see, the first line of the option text is vertically aligned with the middle of the checkbox, and then any further lines just wrap underneath it.

Does that help?

[torydunn-hmrc]

Hi Oliver Thanks for the examples. Yes that's what I mean. We certainly try to avoid long text and options, but there can be some complicated distinctions in tax options that make things wrap. Looking at the design system again: even with 2 lines, it looks unaligned vertically. And when some of our tax options reach 3 lines (the max I have seen), it gets pretty weird. Could you see what it's like with at top aligning, even when it's a single line? Because I imagine trying to do vertical centring of multiple lines would be a real nightmare! [image: Screen Shot 2018-10-11 at 13.11.28.png] Cheers Tory

…

On Thu, 11 Oct 2018 at 12:16, Oliver Byford ***@***.***> wrote: Hey @torydunn-hmrc <https://github.com/torydunn-hmrc> – I just want to check what you're asking for. When you say 'would it be possible to look at' do you think there's an issue with the checkbox component that needs looking at, or do you just want to see an example so you know what it does? We don't currently have any examples of checkboxes with very long option text in the Design System, because we'd generally encourage service teams to keep their option text short. But I can show you what it looks like if you *do* have a lot of text… [image: screenshot 2018-10-11 at 12 04 59bst] <https://user-images.githubusercontent.com/121939/46800310-2f088c80-cd4f-11e8-8c5c-76bd91b4eeb9.png> As you can see, the first line of the option text is vertically aligned with the middle of the checkbox, and then any further lines just wrap underneath it. Does that help? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#37 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AildwgLXP_mxrf0CQDuqWXAS-HcnNGu9ks5ujyiIgaJpZM4RcUPt> .

-- Tory Dunn

[dashouse]

Hi Tory,

I think many people have tried (and failed) to dynamically vertically centre the text next to a checkbox or radio button, however when we put these components together we didn't find any examples where the first line wasn't vertically aligned to the middle of the checkbox, with the content wrapping below that.

In our case this looks slightly more dramatic as our radios and checkboxes are certainly larger than most. Here's a few examples from other design systems.

The main factor here though is that we simply don't know if the content is going to wrap or not, something that doesn't wrap on a large screen may well wrap on a small one. We can't set up any rules for these to behave differently at different breakpoints because it's entirely dependent on the character length of the label not the screen size.

Here's an example of something that doesn't wrap on desktop, but starts to wrap at a undefinable point.

Aligning the label to the top of the checkbox would fix this as you say, however with our radios and checkboxes being larger than normal, I think you'll agree it makes them look a little odd when the labels are short and don't wrap.

I think it would be acceptable to adjust this spacing manually for individual use cases with known content but from a Design System perspective, when designing for the unknown there's not a huge amount we can do to change the spacing based on content length of each label.

[MartinDM]

Not wishing to divert the existing topic of alignment on labels for checkboxes, I wanted also to propose a 'Select all' option for checkboxes.

Would it be useful to include such a check-all option? We found a need for something similar at DVSA and added it to our prototype, but perhaps others have needed this also?

Of course it'd be JS-driven, but the first option to 'select all' could be removed if JS is disabled, so it's an enhancement...

Eg.
[] Select all
[] Option 1
[] Option 2
[] Option 3

The first option would also track the state of the other options, so if you checked everything, it'd automatically check itself...

Thoughts on the feasibility of this?

[NickColley]

Had a go prototyping this:

https://select-all-govuk-frontend-prototype.glitch.me/

We could take advantage of the indeterminate property:

• https://www.w3.org/TR/html52/sec-forms.html#dom-htmlinputelement-indeterminate
• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#Indeterminate_state_checkboxes
• https://css-tricks.com/indeterminate-checkboxes/

Quick observations:

• this is a JavaScript only behaviour, so we'd have to be OK with this.
• does it make sense for a user using assistive technologies?
• does the indeterminate option include semantics that are announced to assistive technologies?

Edit: Just realised my example is a bit broken, will make it work properly when I get a second...

[torydunn-hmrc]

Thanks for the examples and experiments, Dave. I think it we can find a way to adjust them manually, when the majority of options start to wrap, it will help.

…

On Thu, 11 Oct 2018 at 14:37, Dave House ***@***.***> wrote: Hi Tory, I think many people have tried (and failed) to dynamically vertically centre the text next to a checkbox or radio button, however when we put these components together we didn't find any examples where the first line wasn't vertically aligned to the middle of the checkbox, with the content wrapping below that. In our case this looks slightly more dramatic as our radios and checkboxes are certainly larger than most. Here's a few examples from other design systems. [image: screen shot 2018-10-11 at 13 55 35] <https://user-images.githubusercontent.com/23356842/46807015-efe33700-cd60-11e8-9770-52169b9e3c88.png> [image: screen shot 2018-10-11 at 13 56 24] <https://user-images.githubusercontent.com/23356842/46807033-fa9dcc00-cd60-11e8-8e8f-ddb522490ef6.png> [image: screen shot 2018-10-11 at 13 58 58] <https://user-images.githubusercontent.com/23356842/46807041-ff628000-cd60-11e8-8506-940c3e2755b7.png> [image: screen shot 2018-10-11 at 13 59 30] <https://user-images.githubusercontent.com/23356842/46807053-038e9d80-cd61-11e8-8106-6506f647c1d0.png> The main factor here though is that we simply don't know if the content is going to wrap or not, something that doesn't wrap on a large screen may well wrap on a small one. We can't set up any rules for these to behave differently at different breakpoints because it's entirely dependent on the character length of the label not the screen size. Here's an example of something that doesn't wrap on desktop, but starts to wrap at a undefinable point. [image: checkbozx-wrap] <https://user-images.githubusercontent.com/23356842/46807275-7566e700-cd61-11e8-9c87-dc481bef1936.gif> Aligning the label to the top of the checkbox would fix this as you say, however with our radios and checkboxes being larger than normal, I think you'll agree it makes them look a little odd when the labels are short and don't wrap. [image: screen shot 2018-10-11 at 14 26 11] <https://user-images.githubusercontent.com/23356842/46807381-afd08400-cd61-11e8-99b4-04d20f42aacc.png> I think it would be acceptable to adjust this spacing manually for individual use cases with known content but from a Design System perspective, when designing for the unknown there's not a huge amount we can do to change the spacing based on content length of each label. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#37 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/Aildwu63RcpaPHxzV3M6rHAQWlB6Ytt-ks5uj0mHgaJpZM4RcUPt> .

-- Tory Dunn Head of Design | CDIO Digital Services | Dorset House | 07392 289160

[edwardhorsford]

I'd like the design system to support dividers for checkboxes as it does for radios - it confused me when it didn't.

Like radios, checkboxes sometimes have options that are unlike others - such as 'none of the above' - in this case a divider helps communicate this.

Example:

Why

Similar reasoning to having it for radios - it helps communicate the options and that these are slightly different.

[joelanman]

Just a note that if we supported the 'None' of the above' pattern specifically, we might want to consider JavaScript to unselect the other checkboxes.

[edwardhorsford]

Just a note that if we supported the 'None' of the above' pattern specifically, we might want to consider JavaScript to unselect the other checkboxes.

Yep - and unselect 'none of the above' if you then pick one of the others ones.

[stevenaproctor]

You would also need to handle it when JavaScript is not available.

Do we want to use 'None of the above' in the example or something like 'My event will not include any of these'?