shadcn.io is not affiliated with official shadcn/ui
Terms Consent Checkout Block for Svelte
A consent ledger for a gear hire: a native table of five consents with two required and three optional and off, each with a one-line meaning and a Read button that opens its key sentence, Accept required only and Accept all shortcuts, and a gate that names and focuses the first missing box.
Installation
Overview
Collect the agreements a hire needs without a wall of text, with this terms consent checkout for Svelte with Ark UI. A compact header from Treecreeper Supply, a camping gear hire, sits over a hairline frame with a plus mark on each corner. The first band holds a count ("2 of 5 agreed") and two ghost Buttons, Accept required only and Accept all. Below them a native table lists five consents: the terms of sale and the returns policy are required, marketing email, text updates and sharing with partners are optional and start off. Each row has a tick, the name, a one-line meaning, whether it is required, and a Read button that opens the key sentence in place and keeps its height when closed. On a phone each consent is a card with Read under its label. A line under the table says how many required consents are still to agree. Agree and continue is the only Shine Button: if a required box is empty, it says which one and moves focus to it. It's built from Button, native checkboxes, a native table, Shine Button and Guides. For hires, bookings, marketplaces and any checkout with consents.
FAQ
How is a required consent different from an optional one?
Required consents gate the button; optional ones never do. The row says which is which in words, not only by placement, and the gate message names the first required consent that is not ticked. Optional consents start off, because a pre-ticked box is not consent in most jurisdictions.
What do the two shortcuts do?
Accept required only ticks the two required rows and clears the optional ones; Accept all ticks every row. Both set the whole selection at once and the status line says the result ("All agreed. 5 of 5 agreed."). Neither hides anything: the wording stays one press away on every row.
How does Read behave?
It is a button with aria-expanded that controls its row's sentence. Its accessible name includes the consent ("Read Terms of sale"). The sentence sits in a row that animates from zero height with grid-template-rows, is inert and invisible while closed, and respects reduced motion.
Is it still a table on a phone?
Yes. The table keeps its table markup and its caption, and CSS turns each row into a card on a phone: the tick and the name, the meaning, then Read under the label. The header row is visually hidden below the medium breakpoint and stays available to screen readers.
Does it work right to left?
Yes. The tick column, the text and the Read button use logical sides, names and counts sit in isolates, and the chevron rotates rather than flipping.
What stays local in the demo, and how do I wire it up?
Everything, and nothing is recorded. In your app write each answer on the server with the wording version and a time (a consent you can't prove isn't one), send optional ones to the system they concern, and show the exact wording your lawyer approved in the Read rows. To go to your next step: wrap an a element in the Shine Button with asChild.