Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Vertical List Checkbox
A React vertical checkbox list with space-y layout for stacked multi-select options like skill selection using shadcn/ui
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Forms need multi-select, and vertical lists deliver. This React vertical checkbox list uses space-y-3 stacking checkboxes with consistent 0.75rem spacing between items. Built with shadcn/ui mapping over items array rendering checkbox-label pairs in vertical flow. Each option gets its own line for easy scanning and selection. Perfect for feature selections, skill lists, permission settings, preference forms, or any multi-select where users evaluate options one by one rather than comparing side-by-side.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Horizontal List Checkbox
Inline flowing checkbox layout
Simple Checkbox
Single checkbox
Nested List Checkbox
Parent-child hierarchies
Checkbox with Description
Checkboxes with explanation text
Radio Group
Single-selection vertical list
Right-Aligned Checkbox
Alternative vertical layout
Questions you might have
React Horizontal List Checkbox
A React horizontal checkbox list with flex-wrap layout for compact multi-select options like weekday selection using shadcn/ui
React Right-Aligned Checkbox
A React right-aligned checkbox list with label-first layout for toggle-style controls like notification settings using shadcn/ui