shadcn.io is not affiliated with official shadcn/ui
Data Classification Settings Block for React
A four-label ladder (Public, Internal, Confidential, Restricted) as columns of handling switches, with six sample documents whose label is checked against what it requires.
Installation
Overview
Decide what each sensitivity label requires and see which documents break it, with this data classification block for React with Base UI. A native table puts the four labels across, each with its place on a four-step ladder, and four handling rules down (encrypt, audit access, allow external sharing, require MFA), each cell a Switch named for both ("Confidential: Require MFA"). What the top rung can't drop is locked on with a lock and still named (encryption and auditing on Restricted, sharing on Public). Below it, six sample documents each have a Native Select for their label and a check beside it that compares what the label requires with what is true of the document: "Restricted can't be shared outside: this link is public", or "No conflict: Internal fits this file". The band's count ("2 of 6 conflict") follows every change. A default label says what an unlabelled document is treated as, and the action foot holds a Shine Button and a Discard Button. On a phone each rule becomes a card with four Toggle chips. It's built from Switch, Toggle, Native Select, Button, Shine Button and Guides, with a CSS entrance only. For a document store, a data catalog or any product that labels sensitive data.
FAQ
How do I add a label, a rule or a document?
Add a label to LEVELS (with its rung), a rule to RULES and a document to DOCS with its sharing, whether it is encrypted, audited and needs MFA. The matrix, the phone chips, the lock list and the checks all read from those lists. A rule that a label can never drop goes in LOCKED; a new rule also needs a line in conflictsOf, which is the one place that says what a conflict looks like.
How does the conflict check work?
It is a small pure function. For a document and its label it asks, in order: does the label forbid sharing outside while the document is public or shared outside; does it require encryption while the document isn't encrypted; does it require audited access while it isn't; does it require MFA while the document opens without. The first conflict is shown with how many more there are, and a document with none says its label fits. Change a switch or a label and every row is checked again.
What stays local, and how do I make it real?
All of it. The facts about the documents are typed samples and nothing is encrypted, audited or enforced; Save keeps the choices in this page only. To make it real, read the facts from your storage layer, run the same check when a document is labelled or its sharing changes, and enforce the label's rules where files are served, not only here.
Why are some switches locked?
Some rules follow from the label itself: a Restricted document is always encrypted and audited, and a Public one can always be shared, so those cells are on, disabled and say so in their name. They are drawn on the page, never hidden, so the matrix reads as a complete ladder.
What do Save and Discard do?
They are always there and always answer. Save counts what changed (switches, labels and the default) and keeps it in this page, saying "Saved 3 changes in this demo.", or "No changes to save."; it saves even when conflicts remain, because the conflicts are a report, not a block. Discard puts the last saved state back.
How does it look on a phone, and by keyboard?
Below the medium breakpoint each rule is a card: its name, its hint and a two-by-two grid of toggle chips named for the label and the rule ("Restricted for Require MFA"). The documents stack with their check under the select, and the Save and Discard foot stays pinned to the bottom of the screen. Every switch, chip and select takes the keyboard in the usual way.
Related
- Pro
GDPR Consent Settings
Privacy and consentA purposes register with a legal basis, retention and consent record per purpose, a rule that withdrawing must be as easy as giving, and three data requests counted down from 30 days.
- Pro
Compliance Controls Settings
Privacy and consentA policy review window: a rail of six sample policies grouped Overdue, Due soon and Current, and a pane with owner, cadence, the next review worked out from a typed date and who has acknowledged.
- Pro
Privacy Settings
Privacy and consentA privacy panel with three presets that set five switches, a sentence that adds them up, and a row per setting that says in words what it means for you and what it shares.
- Pro
Role Permissions Settings
Team and rolesA roles window with a rail of five roles and a detail of grouped permissions: mixed-state group boxes, a Compare with select that marks each permission with a plus or a minus, read-only system roles and Duplicate to edit.
- Pro
Audit Log Retention Settings
Backups and exportsAn audit log retention panel with a row for each class of event, a preset for how long to keep it, an archive-after menu, a legal hold that freezes the row and a two-part bar to one scale, with the gigabytes searchable and archived added up from typed daily volumes.
- Pro
Cookie Consent Settings
Privacy and consentA cookie preferences page with four purpose cells on shared hairlines: necessary locked on in words, three switches, and under each the exact cookies it covers, kept for how long, set or blocked.