Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dialog examples · Standard

Terms and Conditions Dialog for React

A terms dialog whose I Agree button stays disabled until the reader scrolls to the end of the text.

Framework
UI library

Accepting terms nobody read helps no one. This React dialog keeps I Agree disabled until the reader has scrolled to the end of the terms. It's shadcn.io's Dialog on Base UI, with the terms in a scrolling area whose scroll position is checked as people read.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

How is the end of the text detected?

The terms sit in a div with h-75 overflow-y-auto, and its scroll handler checks whether scrollHeight - scrollTop - clientHeight is under 10 pixels. Once it is, I Agree is enabled for good.

Is forcing a scroll good UX?

For legal agreements you must prove were shown, it's defensible. For everything else, a checkbox confirmation is friendlier.

Should the button say why it's disabled?

Yes: add a short line under the terms such as Scroll to the end to accept, and remove it once the button is enabled.

How is I Agree disabled?

The button takes disabled until the reader reaches the end. It's a DialogClose, so it closes the dialog once pressed.

Does it work with touch scrolling?

Yes, touch scrolling fires the same scroll events. A fast flick reaches the end without reading, which is a limit of the pattern.

Does the state reset when it reopens?

No. The state lives in the component that renders the dialog, so once the end is reached, I Agree stays enabled. Reset it when the dialog closes if every open should start over.

All 17 dialog examples