Shadcn.io is not affiliated with official shadcn/ui
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
Security features need explanation before users enable them. This React switch groups label and multi-line description using FieldContent so explanatory text appears directly below the label with switch aligned to the right. Built with shadcn/ui Switch and Radix UI primitives in horizontal Field layout, it's perfect for security toggles, privacy settings, or any feature where users need context before deciding.
Switch with Description preview
Installation
Related Components
Simple Switch
Basic switch without description
Checkbox with Description
Checkbox with explanatory helper text
Simple Checkbox
Basic checkbox field
Input with Description Below
Text input with helper text
Textarea with Description
Textarea with helper text below
Complex Multi-Field Form
Mixed field types organized together
FAQ
Was this page helpful?
Sign in to leave feedback.