Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Checked Switch
Switch toggle with defaultChecked prop to set initial checked state without controlled state management built with shadcn/ui
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Sometimes you need a toggle that starts on—user preferences remembered, features enabled by default, opt-out settings. This React switch uses defaultChecked prop with shadcn/ui Switch component for uncontrolled initial state. Built with Radix UI primitives, it starts checked but users can toggle freely without React state management—perfect for default-on features, remembered preferences, opt-out checkboxes, or any interface where initial checked state matters but you don't need to track changes in React until form submission.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Default Switch
Unchecked switch without defaultChecked
Small Switch
Compact sized switch variant
Disabled Switch
Non-interactive disabled state
Square Switch
Square corners minimal aesthetic
Square Switch with Label
Labeled switch with htmlFor linkage
Checked Checkbox
Checkbox with defaultChecked