---
title: IABConsentDialog
description: Shared IABConsentDialog reference for the c15t Vue plugin and Nuxt module.
group: reference
lastModified: "2026-10-09T11:22:50+01:00"
lastAuthor: Kaylee
---
## 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.