cds-checkbox-group layout 'hroizontanl-inline' showing items vertically when there are more items to display instead of wrapping

[jyothi530]

Describe the bug

When using cds-checkbox-group with more cds-checkbox elements that don't fit in the width, items are displayed with vertical layout.

How to reproduce

The following link shows the behavior with less number of elements and higher number.
https://stackblitz.com/edit/clarity-javascript-demo-rqcq7q?file=src%2Findex.js,src%2Findex.html

Expected behavior

When there are more elements it should wrap to the next line instead of a vertical alignment

Versions

Clarity project:

• Clarity Core
• Clarity Angular/UI

Clarity version:

• v5.x
• v6.x

Framework:

• Angular
• React
• Vue
• Other: vanilla JS

Device:

• OS: Windows
• Browser Edge chromium

[ashleyryan]

@colinreedmiller Is this intentional? The cds-layout switches to vertical when the checkboxes would wrap - I think this might be the responsive behavior?

In fact, storybook has this exact use case as the first demo: https://storybook.core.clarity.design/?path=/story/forms-responsive--page

[colinreedmiller]

Looks like the intended behavior. Generally speaking it is not good design to have multiple rows of form elements creating a vertical and horizontal layout simultaneously, except in very specific cases - can be quite difficult to read.

.

[jyothi530]

This is a specific case where we don't want to use the multi-select because of usability reasons. We are migrating from @clr/angular to @cds/angular. In @clr/angular decorating a <clr-checkbox-container> with clrInline attribute wraps the elements properly. We are expecting the same with CDS when using layout: horizontal-inline

[ashleyryan]

Like Colin said, that's not the behavior of the component, nor do we intend to enable that behavior - it's not good design or UX to have that many checkboxes that they need to wrap.

Let me see if I can find a work around for you.

[ashleyryan]

Ok, Core has the idea of a generic "control" - basically you can put whatever you want inside of an element with the cds-control attribute on it and it will render in the form, aligned with the other controls.

If you want this behavior, you can create your own checkbox group essentially. I have a demo, you may need to play with some of the padding around the checkboxes to more closely match the checkbox group's layout. You will also lose some behavior of the checkbox group - like setting the status or disabled attributes on the group element will not propagate to the children. https://stackblitz.com/edit/clarity-javascript-demo-n8dtpy?file=src%2Findex.js,src%2Findex.html

Please not that the cds-control element has role="group" and aria-labeledby on it. You must set this yourself for accessibility. The checkbox-group does that for you, but you won't be using it. Also set aria-describedby if you use a control-message.

[github-actions]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.