Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Horizontal List Checkbox
A React horizontal checkbox list with flex-wrap layout for compact multi-select options like weekday selection using shadcn/ui
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
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.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
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
Questions you might have
React Custom Indicator Checkbox
A React checkbox with custom green checkmark icon and styling using Lucide React icons and shadcn/ui data-state selectors
React Vertical List Checkbox
A React vertical checkbox list with space-y layout for stacked multi-select options like skill selection using shadcn/ui