Checkboxgroup with very large item list

General
1

hi everyone i have a checkboxgroup with numerous items displayed vertically, is there a way to split this in 2 or more columns? thanks

2

Using CSS you could change the container to use a CSS grid:

vaadin-checkbox-group::part(group-field) {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

You can adjust the number of columns for different screen sizes using media queries.

3

Another option is CSS multi-column layout, which means you don’t need to define the number of columns upfront, just the width of the columns, and as many columns will be created as can fit.

The difference is that in multi-column layout, items will from from top to bottom and then onto a new column, whereas with grid content flows first from left to right, then onto new rows.

vaadin-checkbox-group::part(group-field) {
  display: block;
  column-width: 12em;
}

More information from here: Basic concepts of multi-column layout - CSS: Cascading Style Sheets | MDN