Components

ConsentBlock

A text to read in a scroll region, with a reading bar and a consent checkbox that can wait until the end.

Storybook: Storybook
Source: Source

When to use

When people must read a text and accept it explicitly: terms of use, a privacy notice, explicit consent.

When not to use

For a short agreement: A Checkbox is enough for a one-line consent.
One block for several separate consents: Use one ConsentBlock or Checkbox per consent; do not merge required and optional ones.

Anatomy

Terms of use

Version 3 · 1 October 2026Open the full text

I have read and accept the terms.Scroll to the end of the text to accept.

import { ConsentBlock, Provider } from '@bigbang/ui';

export default function Default() {
  return (
    <Provider locale="en-GB">
      <ConsentBlock title="Terms of use" meta="Version 3 · 1 October 2026" href="#" checkboxLabel="I have read and accept the terms." requireScroll className="max-w-lg">
        <p>These terms explain how the service is used. By opening and using your account, you agree to follow these rules.</p>
        <p>You are responsible for keeping your account details up to date and for not sharing your sign-in details with anyone.</p>
        <p>You are told in advance when the terms change; you can read the changes before accepting the new version.</p>
        <p>For questions, reach us from the help page.</p>
        <p>These terms explain how the service is used. By opening and using your account, you agree to follow these rules.</p>
        <p>You are responsible for keeping your account details up to date and for not sharing your sign-in details with anyone.</p>
        <p>You are told in advance when the terms change; you can read the changes before accepting the new version.</p>
      </ConsentBlock>
    </Provider>
  );
}

Title: The name of the text; it names the scroll region.
Version and link: A version or date; the full text opens in a new tab.
Reading bar: Only with requireScroll; it shows how much is read.
Text region: At most 240 px tall; a fade at the bottom says there is more.
Checkbox: In the person’s own words.

Behaviour

The text region takes keyboard focus and scrolls with the arrow keys.
With requireScroll, the checkbox is disabled until the end of the text, with the reason under it. At the end it unlocks and this is announced; scrolling back up does not lock it again.
A short text that fits counts as read at once.
The bottom fade goes away at the end.

One consent per purpose (`items`)

Explicit consent under KVKK must be specific to each purpose and provable. items draws one checkbox per purpose; each item carries documentId, version, label and documentName, and “Version {version}” is written under its checkbox. The document name is a button: onOpenDocument opens the document on the page (for example a Dialog with AgreementViewer), never in a new tab. A mustRead item stays locked until its document is in readIds, with “Read the text first” under it. Accepted ids come through value and onValueChange; the server keeps the proof of which version was accepted. The single-consent form (title and children) is deprecated and warns in development.

Guidelines

Write the checkbox in the person’s voice: “I have read and accept the terms.”
Never pre-check the box.
Show which version is accepted with meta and record it on the server.
Use requireScroll only where reading really matters.

Content

Key	TR	EN
`ui.consent-block.scroll-hint`	Onaylamak için metni sonuna kadar kaydırın.	Scroll to the end of the text to accept.
`ui.consent-block.read`	Metnin sonuna geldiniz; artık onaylayabilirsiniz.	You reached the end of the text; you can accept now.
`ui.consent-block.full-text`	Tam metni aç	Open the full text
`ui.consent-block.version`	Sürüm {version}	Version {version}
`ui.consent-block.read-first`	Önce metni okuyun	Read the text first

Checkbox: A consent on its own.
Form: The error summary on submit.