Horizontal List Checkbox for React

Horizontal suits a handful of options with one-word labels, like these five weekdays. Stack the fields in a FieldGroup when the list is longer or the labels wrap inside the row.

The row puts as many days on a line as fit and moves the rest to the next, with no breakpoints. gap-4 keeps the same spacing across and between lines. Each field is w-fit, so it's as wide as its label rather than the full row.

Add justify-center or justify-end to the row; every wrapped line aligns the same way. justify-end follows the reading direction, so it puts the days on the left in a right-to-left page.

For short labels like these, yes: wrapping handles narrow screens. For longer labels, stack them on small screens with flex-col sm:flex-row. If people mis-tap neighbors, give the row more gap or go vertical.

Change gap-4 to gap-2 or gap-6, or set the two directions apart with gap-x-6 gap-y-2. Tighter rows fit more per line but leave less room between tap targets.

Yes. Tab moves through the checkboxes in source order, which is the visual order, and Space toggles each. To name the group for screen readers, wrap it in a FieldSet with a FieldLegend such as "Available days".