shadcn.io is not affiliated with official shadcn/ui
Scenario Picker Ethical Practices About Block for React
An ethics block for a survey tool: three requests as radio cards (hand over customer data, switch off a feature, share usage with an investor), each answered in three numbered steps and a named decider.
Installation
Overview
An ethics block for React with Base UI, written for Candidly, a fictional survey tool. A split with a divider. At the start, a header that opens "When someone asks us to…" and three requests as radio cards: hand over a customer's survey data, switch off a feature, share usage with an investor. At the end, the chosen request's answer: a title, what the company does in three numbered steps, and one line saying who decides. The first request is chosen on load. Every answer is stacked unseen under the open one, so choosing never moves the page, and a polite region announces the new answer to a screen reader. On a phone the answer sits under the cards. It's built from Radio Group, Field and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For an about page, a trust page or a policies page. The scenarios and the policies are example copy for a fictional company; replace them with your own commitments.
FAQ
How do I change the requests and the answers?
SCENARIOS holds each request: its card label and hint, the answer's title, three steps and the line saying who decides. Add a request and it appears as a card with its own stacked answer. The policies here are example copy, not a real commitment.
Why radio cards and not buttons?
Choosing one request out of three is what a radio group is for: one choice at all times, arrow keys to move, and a screen reader hears "radio button, 1 of 3". The card is the label, so the whole row is a target.
Is the change announced?
Yes. The answer sits in a polite live region, so a screen reader reads the new title and steps after you choose. The unseen copies that hold the height are hidden from assistive technology.
How does the keyboard work?
Tab reaches the group, the arrow keys move between the three requests and choose as they go.
Related
- Pro
Vertical Tabs Data Privacy About
Security and platformA data-flow explainer for a backup service: vertical tabs for what we collect, where it lives and your rights, each panel a four-column table, with a ghost link to request your data.
- Pro
Domain Tabs Security Practices About
Security and platformSecurity practices for a password manager in four domain tabs, each a list of controls marked Done or Rolling out, under a security score worked out from the controls.
- Pro
Principles Rail About
Principles and processA split about section for a release-management tool: a sticky title at the start, and six principles as stations on a hairline rail, each opening to what it means and how it shows up.
- Pro
Commitments Ledger About
Principles and processA ledger of a nonprofit CRM's public promises: an ordered list of rows with the promise, how far along it is as a word and a progress bar, who owns it and when it was last checked, and a tally counted from the rows.
- Pro
A payroll co-op's report of seven measures over four quarters in Financial and Operational groups, a sparkline on every row, footnotes, and a quarter picker that rings one column.
- Pro
Status Grouped Compliance Badges About
Security and platformA compliance list for a vendor-risk tool grouped by status, In force and In progress, each row a generic programme with its scope, last audit and next step, with a ghost link to request the report.