Side-by-Side Switch Grid Form

A two-column layout displaying multiple toggle switches in a compact grid

Organize multiple settings into a space-efficient two-column grid layout. Ideal for settings pages with many toggle options that need to be displayed without excessive scrolling.

Side-by-Side Switch Grid Form preview

Scroll to load preview

Installation

Install

Pro block

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

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

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

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

Switch Basic

Simple on/off toggle switch

Switch Group

Multiple grouped toggle switches

Switch Card

Switch toggles in card containers

Toggle Feature Flags

Feature flag management toggles

Checkbox Grid

Grid layout for multiple checkboxes

Switch Responsive

Responsive switch layout adapting to screen size

FAQ

Last updated on March 24, 2026

Was this page helpful?

Responsive Switch Form

A responsive switch form that adapts layout from vertical to horizontal

Switch Form with Rich Description

A switch form with detailed description and explanation

Side-by-Side Switch Grid Form