Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Form blocks

Pro

Privacy Card Switches Form Block for React

Four privacy settings as whole-card switches in one column: press anywhere on a card to flip it, a count says how many are visible to others, and a save bar keeps or discards the changes.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Make a switch as easy to hit as a button with this card switch form for React with Base UI. A compact header sits over a hairline frame with a plus mark on each corner. The first band lists four privacy settings for a journal app in one column of cards on shared hairlines: each card is a name, a sentence on what it shares, an On or Off word and a Switch, and the whole card is the hit area, so pressing the sentence flips it as pressing the switch does. Focus rings the card, and a card that is on carries a foreground ring, so the state reads from across the page as well as from the switch. The band's count says how many of the four are visible to others and a note under the cards says entries are never shared. The foot counts unsaved changes beside a Shine Button to save them and an outline Button to discard them. It's built from Switch, Button, Shine Button and Guides, with a CSS entrance only. For privacy and sharing settings, profile visibility and any short list of independent yes-or-no choices.

FAQ

How do I add or change a setting?

Edit SETTINGS at the top: each has an id, a name and a hint. START lists the ids that are on when the page opens. The count in the band and the changes counted in the foot are worked out from the draft list and the saved list, so a fifth card needs no other change; change the "of 4" in the band's text to match.

How does the whole card work as a switch?

The switch's own hit area is stretched to the edges of the card with a CSS pseudo-element, so there is one control, not a card wrapped around a button. A card is therefore one tab stop, Space flips it, and a screen reader reads the switch's name. The visible name and the sentence are the same text, so nothing is read twice.

Is the state shown by more than color?

Yes. Each card says On or Off in words, the switch moves, and an on card has a ring in the foreground color. The focus ring is a separate, thicker ring on the card, so a focused card that is on still shows both.

How does it look on a phone?

The cards stay one per row at full width, each with its sentence wrapping under the name, and the foot is pinned to the bottom of the screen with Save and Discard side by side.

What stays local, and how do I connect it for real?

Nothing is sent: Save says "Saved 2 changes in this demo." To make it real, send the list of ids that are on from the submit handler, set the saved list from the server's answer and show a failure in the status line without losing the draft.

How do I connect it to react-hook-form or TanStack Form?

With react-hook-form, keep the ids that are on as one array field (or one boolean per setting) and call field.onChange from each switch's change handler; formState.dirtyFields replaces the count of changes.
All 100 form blocks