Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
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
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Maximum information density—some checkboxes need it all. This React checkbox combines inline subtitle badge (Recommended) with multi-line description text below, layering context vertically. Built with shadcn/ui using items-baseline for label-subtitle alignment and space-y-1 for label-description stacking. The mt-1 checkbox alignment keeps it at label baseline while subtitle and description flow below. Perfect for important settings needing both recommendation indicators and detailed explanations, feature toggles with qualification and consequences, or critical permissions requiring multi-level context.
Get notified about important security updates and potential threats to your account.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Checkbox with Description
Description text only
Checkbox with Subtitle
Inline subtitle badge only
Simple Checkbox
Basic checkbox without extras
Right-Aligned Checkbox
Settings-style layout
Disabled Checkbox
Non-interactive states
Vertical List Checkbox
Multiple stacked checkboxes
Questions you might have
React Checkbox - With Description
A React checkbox with multi-line description text below label for detailed explanations using shadcn/ui and Tailwind typography
React Checkbox - Nested List
A React nested checkbox list with parent-child relationships where parent controls all children for hierarchical selections using shadcn/ui