search

alphagov / govuk-frontend

GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.
https://frontend.design-system.service.gov.uk/
MIT License
1.13k stars 320 forks source link

Checkboxes with none option - slightly inflexible implementation, not catering for checkboxes with different names in a group #2286

Open andymantell opened 2 years ago

andymantell commented 2 years ago

Description of the issue

The new "none of these" checkbox pattern (https://design-system.service.gov.uk/components/checkboxes/with-none-option/index.html) assumes that all the checkboxes in the group will have the same name attribute. However this is not necessarily the case in all frameworks. In .Net it would be quite reasonable for each checkbox input to be a different property on the underlying model, which maps to a different name in the html output.

Actual vs expected behaviour

Ideally it would be better if it was possible to configure the grouping of checkboxes manually. Over on nhsuk-frontend I have done this by grouping them with a data attribute rather than name. Like this (heavily abridged) example:

<input data-checkbox-exclusive-group="communication-preferences" class="nhsuk-checkboxes__input" id="contact-1" name="email" type="checkbox" value="email">
<input data-checkbox-exclusive-group="communication-preferences" class="nhsuk-checkboxes__input" id="contact-2" name="phone" type="checkbox" value="phone">
<input data-checkbox-exclusive data-checkbox-exclusive-group="communication-preferences" class="nhsuk-checkboxes__input" id="contact-5" name="none" type="checkbox" value="none">

so they each have different names, but all share a data-checkbox-exclusive-group of communication-preferences

I spoke to @frankieroberto about this on Slack and he suggested maybe defaulting to grouping by name, but allowing people to group explicitly if necessary. This could be a small feature release then, rather than necessitating a breaking change.

frankieroberto commented 2 years ago

@andymantell thanks for adding this!

When implementing this feature, we did debate various options for scoping the grouping of checkboxes, including using the "module" scope (ie the parent with data-module="checkboxes"), however we [avoided this](https://github.com/alphagov/govuk-frontend/pull/2151#discussion_r650941963) as there is a use-case where you might want to divide a group of checkboxes into sub-groups using either headings, which you can currently do by calling thegovukCheckboxesmacro multiple times, but using the samename` value.

Another alternative which could be explored again is relying on the <fieldset> to group the checkboxes, which is at least the more semantic HTML way of doing this. The only caveat is that you might have nested fieldsets, in which case it would be unclear which level the grouping should be applied at.

So on balance, I suspect that the idea of having a manual-override of using the data attribute is probably the most flexible solution (and backwards-compatible).

I would suggest naming the attribute as something like data-behaviour-group, as the checkbox bit is redundant, and using the behaviour rather than exclusive allows the same attribute to be used for as-yet-unimplemented future behaviours (like a "select all", which might be behaviour="inclusive").

As the macro already supports arbitrary attributes on the <input>, I think the only change this would require is a bit of extra logic in the javascript?

andymantell commented 2 years ago

On nhsuk-frontend I've used exclusive and exclusiveGroup params on the nunjucks macro and render some data attributes from those (And never use name at all). But yes, you could definitely just do it with the existing attributes param and adjust the JS to suit. It might be a little fiddly? If you're defaulting to name, but allowing data-behaviour-group or whatever then you'd have to work out which one was being used when you're unticking groups of checkboxes 🤔