Checkboxes

[govuk-design-system]

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

[a184studio]

@abbott567 I had the same conversation the other day.

@joelanman Pointed me to this sub thread on CheckBoxes https://github.com/alphagov/govuk-frontend/pull/2151#issuecomment-947677438

[cristina-agramunt]

Hi,

I believe someone has already pointed this issue earlier on but I haven't seen a feedback for it - I tried using the "or" option by copying the code available on the https://design-system.service.gov.uk/components/checkboxes/ but unfortunately the "or" doesn't seem to be styled as shown on the examples. Would anybody know why this is happening and how can I fix it please?

Thank you

[36degrees]

@cristina-agramunt do you know which version of GOV.UK Frontend (or Prototype Kit) you are using?

You'll need v3.13.0 or above (or v9.14.0 or above of the Prototype Kit) for the 'or' divider styles to be included.

[JodiB-TPR]

I'm curious to know if the testing that was done on conditional reveals included radios and checkboxes with hint text. The guidance says conditionally revealing stuff is OK as long as it's simple. It reads like the simplicity only refers to the revealed item itself and not the entirety of the radio or checkbox item. By that reasoning, it would seem it's OK to conditionally reveal simple questions in a radio or checkbox item that has hint text. (See screenshot. Imagine the radio is a checkbox. :))

[This was cross-posted to the related Radios feed.]

[edwardhorsford]

@JodiB-TPR I see no reason why you couldn't.

[a184studio]

@JodiB-TPR I agree with @edwardhorsford We use this combination. Radio and text field.

[CharlotteDowns]

We ran an external accessibility audit for some of the components and patterns in GOV.UK Frontend in May 2023. In that audit, we included examples of the Radio and Checkboxes components. We’re adding results from that audit here so that we can:

• document, discuss and address the findings
• inform future contributors of the findings

One usability issue raised

No visible hover for checkboxes and radios in high contrast mode. Can't tell what's being hovered.

The checkboxes and radio buttons do not display a visible change when receiving mouse hover in high contrast mode. This means that some users may not be able to distinguish when they are able to activate the component and form.

More detail in this issue:

• #3695