Shadcn.io is not affiliated with official shadcn/ui
Horizontal List Checkbox
A React horizontal checkbox list with flex-wrap layout for compact multi-select options like weekday selection using shadcn/ui
Vertical lists waste space when options are short. This React horizontal checkbox list uses flex flex-wrap with gap-4 to flow checkboxes left-to-right, wrapping to new lines as needed. Built with shadcn/ui mapping over items array rendering checkbox-label pairs. The wrap behavior adapts to container width—desktop shows all inline, mobile wraps naturally. Perfect for compact option sets like weekdays, product sizes, time slots, or any multi-select where options fit comfortably in horizontal flow without overwhelming width.
Horizontal List Checkbox preview
Installation
Related Components
Vertical List Checkbox
Stacked checkbox layout
Simple Checkbox
Single checkbox
Right-Aligned Checkbox
Checkboxes aligned right
Nested List Checkbox
Hierarchical checkbox structure
Radio Group
Single-selection horizontal list
Toggle Group
Horizontal toggle buttons
FAQ
Was this page helpful?
Sign in to leave feedback.