shadcn.io is not affiliated with official shadcn/ui
Scenario Picker Ethical Practices About Block for Svelte
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 Svelte with Ark 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.