Skip to content
BigBang

Popular

    ↑↓Navigate↵OpenEscClose
    TR

    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

    Installation

    Section titled “Installation”
    Package
    @bigbang/ui
    Import
    import { ConsentBlock } from '@bigbang/ui';
    Source
    ConsentBlock.tsx
    Storybook
    ConsentBlock · Playground

    ConsentBlock is in the @bigbang/ui package.

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

    <ConsentBlock title="Terms of use" checkboxLabel="I have read and accept the terms." requireScroll required name="terms">
      <p>…</p>
    </ConsentBlock>;

    Props

    Section titled “Props”
    itemsRequired
    Description
    One entry per purpose. Explicit consent under KVKK is never bundled with accepting an agreement or with marketing.
    Type
    readonly ConsentItem[]
    valueRequired
    Description
    Ids of the accepted items. Use it with onValueChange.
    Type
    readonly string[]
    onValueChangeRequired
    Description
    Called with the ids of the accepted items when one is checked or unchecked.
    Type
    (ids: readonly string[]) => void
    onOpenDocumentRequired
    Description
    Opens the document in a dialog on the page, never a new tab; call it read (add it to readIds) when the person reaches its end.
    Type
    (documentId: string) => void
    readIds
    Description
    Ids of the items whose document has been read; unlocks mustRead items.
    Type
    readonly string[]
    error
    Description
    Error under the list, such as when the form is sent without a required consent. Error under the checkbox, such as when the form is sent without consent.
    Type
    string
    name
    Description
    Field name; each accepted item is submitted as one value with its id. Field name of the checkbox.
    Type
    string
    className
    Description
    Added to the root element; use it for layout only.
    Type
    string
    titleRequired
    Description
    The name of the text, shown as a heading and naming the scroll region: "Kullanım koşulları".
    Type
    string
    childrenRequired
    Description
    The text to read: paragraphs and lists.
    Type
    ReactNode
    checkboxLabelRequired
    Description
    The checkbox text, written as the person's statement: "Koşulları okudum ve kabul ediyorum."
    Type
    ReactNode
    headingLevel
    Description
    Heading level of the title.
    Type
    2 | 3 | 4
    Default
    3
    meta
    Description
    A version or date line next to the title.
    Type
    ReactNode
    href
    Description
    Link to the full text, opened in a new tab.
    Type
    string
    requireScroll
    Description
    The checkbox stays locked until the text is scrolled to the end; a short text that fits is read at once.
    Type
    boolean
    Default
    false
    checked
    Description
    Checked state when you control it. Use it with onCheckedChange.
    Type
    boolean
    defaultChecked
    Description
    Checked state on first render when you do not control it.
    Type
    boolean
    Default
    false
    onCheckedChange
    Description
    Called with the new checked state.
    Type
    (checked: boolean) => void
    required
    Description
    The checkbox must be checked before the form is submitted.
    Type
    boolean
    Default
    false

    Data attributes

    Section titled “Data attributes”
    • data-component="consent-block" and data-read once read.
    • data-part: body, progress, meta, error, announcement.