Shadcn Switch Card Grid

When to use

• Single on or off preferences beside a label, such as airplane mode, sign in security or an AI feature
• Grouped notification, privacy and editor preferences in a card, a Frame panel or a dense list
• Options with a supporting sentence set as clickable tiles, including a risky one that erases data

When not to use

• Tiles where exactly 1 option may be on at a time: use the Radio Group component
• A complete options page with account, security and notification sections ready to drop in: use the Settings blocks
• A row of pressed buttons that picks a view, an alignment or a time range: use the Toggle Group component
• A consent or terms box that is ticked and sent along with a form: use the Checkbox component

Agent notes

• Replace features with your services; the checked flag on each entry is only the starting state
• FieldGroup keeps grid-cols-2 at every width, so the 4 tiles stay 2 across on a phone; add a 1 column base for narrow screens
• Every Switch here is uncontrolled, seeded by defaultChecked or left off, and nothing reads a flip back; control it to save the setting
• No example gives Switch a name, so a native form submit carries none of these values; add one when the switch sits inside a form