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

The example below loads live from Storybook; open it there to use the controls.

Live example, StorybookOpen in Storybook

Default

requireScroll locks the checkbox until the end of the text; the bar at the top shows how much is read.

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>
  );
}

Error

When the form is sent without consent, error shows under the checkbox.

Terms of use

I have read and accept the terms.Accept the terms to continue.

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

export default function Error() {
  return (
    <Provider locale="en-GB">
      <ConsentBlock title="Terms of use" checkboxLabel="I have read and accept the terms." error="Accept the terms to continue." 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>
  );
}

Light and dark mode

The text region uses the sunken surface.

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.

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>
  );
}