Shadcn.io is not affiliated with official shadcn/ui
Checkbox with Description
A React checkbox field with label and description grouped in FieldContent for settings like folder syncing built with shadcn/ui
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.
Checkbox with Description preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.
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
Form with Select
A React form with Select dropdown validated using React Hook Form and Zod requiring country selection with error handling