Skip to main contentDocumentation
IABConsentDialog
What IABConsentDialog renders
IABConsentDialog is the IAB TCF preference centre. It opens while
activeUI is 'manager', the iab option is set, and the policy uses the
iab model. ConsentRoot loads it in place of ConsentManager under such
a policy.
It has two tabs. Purposes lists each purpose, stack and special feature with consent and legitimate-interest switches. Vendors lists every vendor, including your custom vendors, with a search field and per-vendor switches. The footer saves the selection, or accepts or rejects everything, and writes the TC String.
To build your own preference centre instead, read and change the selection
with useConsentIabSelection() and save it with useConsentIabSave().
Props
| Prop | Type | Default | Behavior |
|---|---|---|---|
initialTab | 'purposes' | 'vendors' | The tab the banner asked for, else 'purposes' | Which tab the dialog opens on. |
Accessibility and styling
The dialog renders in document.body with role="dialog". While blocking
it sets aria-modal="true", locks scrolling and traps focus. It has a close
button. The components['iab-dialog'] option adds attributes to parts such
as root, card, header, tabsList, tabPanel and footer, and
components['iab-purpose-item'], components['iab-stack-item'] and
components['iab-vendor-list'] reach the rows. iabDialogHideBranding
hides the "Secured by" tag.