Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Field - Checkbox with Description
A React checkbox field with label and description grouped in FieldContent for settings like folder syncing built with shadcn/ui
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Some checkboxes need more than just a label to explain what they do. This React checkbox uses FieldContent to group label and description together—checkbox on left, explanatory text on right. Built with shadcn/ui Checkbox and Radix UI primitives in horizontal Field layout, users see both what the setting controls and how it works. Perfect for cloud sync settings, backup options, or feature toggles with non-obvious implications.
Your Desktop & Documents folders are being synced with iCloud Drive. You can access them from other devices.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Simple Checkbox
Basic checkbox without description
Switch with Description
Switch with grouped label and description
Multiple Checkboxes
Grouped checkboxes in fieldset
Simple Switch
Basic toggle switch field
Input with Description Below
Text input with helper text
Textarea with Description
Textarea with helper text below
Questions you might have
React Field - Switch with Description
A React switch field with label and description grouped in FieldContent for security settings like multi-factor authentication built with shadcn/ui
React Form with Select
A React form with Select dropdown validated using React Hook Form and Zod requiring country selection with error handling