Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99

--d --h --m --sGet Pro

Dialog Terms Scroll

ProNew

A terms dialog whose Accept stays disabled until the reader scrolls to the end, with a polite status, a keyboard-scrollable region, Decline always available and Escape as decline.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

open

title

children

Guide and examples

When to use it

Use this where policy requires evidence that the full text was presented: licence agreements, medical consent.

Do not use it as a dark pattern for long marketing text, and do not treat scrolling as proof of understanding: keep a plain-language summary above the full text.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Log in Get Pro for $35

Props

DialogTermsScroll

Prop	Type	Default	Description
`open`	`boolean`	-	Show the dialog.
`title`	`string`	`Terms of service`	Dialog title; also names the text region.
`onAccept, onDecline`	`() => void`	-	Handlers; Escape and the close button call `onDecline`.
`children`	`ReactNode`	-	The text.

Accessibility

The text area is a named, focusable region, so keyboard users can scroll it (WCAG 2.1.1).
A polite status says "Scroll to the end to enable Accept." and then "You reached the end."; text that fits without scrolling enables Accept at once.
Declining never needs scrolling, and the end check also runs when the window is resized.

Keyboard

Key	Action
Tab	reaches the scroll region, then Decline and Accept
Arrow keys, Page Down, End	scroll the text
Escape	declines

Testing

The pattern ships a Testing Library test (dialog-terms-scroll.test.tsx) that covers the focusable region, enabling Accept at the end, accepting and declining and Escape.