Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
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
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
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.
Enable multi-factor authentication. If you do not have a two-factor device, you can use a one-time code sent to your email.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
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
Questions you might have
React Field - Simple Switch
A React switch toggle field with horizontal layout for instant on/off controls like airplane mode built with shadcn/ui
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