Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Compliance Check Comments Block for Solid

A message to a patient checked before it posts: private details found in the draft are listed masked, each with a Redact button, and Post stays disabled with a reason until none remain.

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.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Stop private details leaving the building, with this pre-post compliance check for Solid with Ark UI. A compact header sits over one framed panel built from bands. The first holds the message in a Textarea, already filled in. The second lists what the typed rules found: an email address, a phone number, a card-like number and a patient ID, each as an outline Badge with a masked token and a Redact Button that rewrites that token in the box as "[email removed]" and so on; a ghost Redact all clears them at once. The list keeps its height for up to four findings, and an Empty state shows when the message is clean. The Shine Button posts the message, but it stays aria-disabled while findings remain and says why ("Fix 4 things first"). A clean message posts to the list of sent messages at the foot. All data is fictional: 555 numbers and example.test addresses. It is built from Textarea, Badge, Button, Empty, Avatar, Field, Kbd, Shine Button and Guides, with a CSS entrance only. For patient messaging, support desks and any form that must not leak personal data.

FAQ

What does it look for?

Four typed patterns at the top of the file: an email address, a phone number (with or without an area code), a card-like number in four groups of four digits, and a patient ID that starts with CW-. Each is a regular expression with word boundaries. A finding names the type and shows a masked token such as p•••@example.test, never the full value. Add a rule to RULES to look for something else.

Can a model do this instead?

Yes, but keep the rules. Patterns are cheap, predictable and the right first line for numbers and addresses; a model is better at names and context. Return the same Finding list from your own function and the rest of the block keeps working. Do the final check on the server too: a browser check can be skipped.

Why is Post disabled but still pressable?

It is aria-disabled, not disabled, so keyboard and screen reader users can focus it, hear the reason (it is described by "Fix 4 things first") and press it for a fuller answer in the status line. Pressing it with findings left does nothing else.

What stays local?

The draft, the findings and the sent messages. Posting says "Posted in this demo. Nothing was sent." To make it real, run the same rules in post, send the message from your server, and log what was redacted if your policy needs it.

What does Redact do exactly?

It replaces every occurrence of that token in the box with a plain label such as [phone removed], so the text still reads. You can edit the box freely afterwards; the list is recomputed from the text on every keystroke, so a token you delete by hand disappears from it too.

How does it look on a phone?

Findings stack with the type above the masked token, and Redact becomes a full-width button on its own line. The list and the sent messages scroll inside their own regions, so nothing shifts when a finding goes.