Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Switch with Description
A React switch with label and description text using justify-between layout for settings list items with explanatory context
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Short labels can be cryptic—what do Push Notifications actually mean? This React switch pairs label with description text. Built with shadcn/ui Switch and Label with description paragraph, the extra context explains the setting—perfect for settings panels, configuration screens, preference lists, onboarding toggles, feature explanations, or any switch where a brief description under the label helps users understand exactly what they're enabling without hunting for documentation or making assumptions.
Receive notifications on your device
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Switch with Label
Simple label without description
Switch with State Labels
On/off state labels
Icon with Label
Icon, label, and switch
Settings Panel
Panel with multiple switches
Settings Form
Form with setting controls
Settings Card
Card with settings