Switch Form with Card Layout

A switch form with card-style containers for each toggle

This switch form demonstrates how to present toggle switches in card-like containers with subtle backgrounds. Perfect for feature settings, privacy controls, or any preferences that need visual emphasis. Uses subtle background containers for enhanced visual hierarchy.

Switch Form with Card Layout preview

Scroll to load preview

Installation

Install

Pro block

npx shadcn@latest add https://www.shadcn.io/r/form-switch-card.json

npx shadcn@latest add https://www.shadcn.io/r/form-switch-card.json

pnpm dlx shadcn@latest add https://www.shadcn.io/r/form-switch-card.json

bunx shadcn@latest add https://www.shadcn.io/r/form-switch-card.json

Switch Basic

Simple on/off toggle switch

Switch Group

Multiple grouped toggle switches

Switch With Description

Switch toggle with detailed description

Switch Responsive

Responsive switch layout adapting to screen size

Switch Nested

Conditional fields revealed by switch toggle

Toggle Feature Flags

Feature flag management toggles

FAQ

Last updated on March 24, 2026

Was this page helpful?

Basic Switch Toggle Form

A basic switch toggle form with a single switch field

Destructive Action Switch Form

A form with dangerous toggle switches requiring careful consideration before enabling

Switch Form with Card Layout