Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Field - Multiple Checkboxes
A React fieldset with multiple checkboxes for settings like desktop item preferences using legend and description built with shadcn/ui
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Scattered checkboxes without grouping make forms confusing. This React checkbox group uses FieldSet with FieldLegend to semantically group related options like desktop items or preferences. Built with shadcn/ui Field components and Radix UI Checkbox primitives, each checkbox has horizontal orientation and proper associations. Perfect for settings panels, preference forms, or any multi-select where options share a common category.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Simple Checkbox
Single checkbox with horizontal layout
Checkbox with Description
Checkbox with helper text for context
Radio with Descriptions
Single selection with detailed options
Fieldset with Legend
Grouped form fields with title
Complex Multi-Field Form
Mixed field types organized together
Multiple Inputs in Group
Grouped text inputs with spacing
Questions you might have
React Field - Simple Checkbox
A React checkbox field with horizontal layout for inline agreement forms like terms and conditions built with shadcn/ui
React Field - Radio Buttons
A React radio button group for single-choice selection like notification methods using RadioGroup and horizontal layout built with shadcn/ui