Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Checkbox - With Description
A React checkbox with multi-line description text below label for detailed explanations using shadcn/ui and Tailwind typography
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Sometimes checkbox labels need more than a few words. This React checkbox adds multi-line description text below the label using space-y-1 vertical stacking and text-muted-foreground for hierarchy. Built with shadcn/ui with mt-1 checkbox alignment keeping it at label baseline while description flows below. The items-start flex ensures checkbox stays top-aligned as description wraps. Perfect for settings with consequences, permissions needing explanation, marketing opt-ins with legal detail, or any checkbox where informed consent requires context beyond brief labels.
Receive emails about new products, features, and updates.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Simple Checkbox
Basic checkbox without description
Subtitle and Description
Both inline badge and description
Checkbox with Subtitle
Inline subtitle only
Right-Aligned Checkbox
Alternate vertical layout
Vertical List Checkbox
Multiple stacked checkboxes
Disabled Checkbox
Non-interactive states
Questions you might have
React Simple Checkbox
A React checkbox with label for basic binary selection using shadcn/ui and Radix UI for accessible form controls
React Checkbox - With Subtitle and Description
A React checkbox combining inline subtitle badge and multi-line description for maximum context like Recommended settings using shadcn/ui