Checkbox

Introduction

Name: didomi-checkbox Component type: checkbox Extends: DidomiBlock

Display a single checkbox.

Object configuration

window.didomiConfig = {
...
entities: [...],
containers: [...],
components: {
activeComponents: [
{
id: "ID_OF_THE_COMPONENT",
type: "checkbox",
options: {
...,
propKey: "PROP_VALUE" // Remember to use camelCase for the key
}
}
]
}
};
<didomi-checkbox id="ID_OF_THE_COMPONENT" />

Inline configuration

<didomi-checkbox prop-key="PROP_VALUE" .../>

Setup

For this component to work properly, you will need to have entities (purposes, preferences and channels) as well as containers available to link to the checkbox.

A checkbox is linked to an entity and its parents, if any. The current entity will be displayed in the checkbox (name, status). If you want to display a preference, your current entity is the preference. You will have to populate the purposeId and the preferenceId .

window.didomiConfig = {
...,
entities: [
{
id: "purpose-id",
name: "...",
description: "..."
},
{
id: "preference-id",
name: "Preference 1"
}
],
containers: [
{
purposes: [
{
id: "purpose-id",
preferences: [
{
id: "preference-id",
channels: [] // Don't forget this property, even if you have no channels linked to it
}
]
}
]
}
],
components: {
activeComponents: [
{
id: "ID_OF_THE_COMPONENT",
type: "checkbox",
options: {
...,
purposeId: "purpose-id",
preferenceId: "preference-id"
}
}
]
}
};
<didomi-checkbox id='ID_OF_THE_COMPONENT' />

Props

Name

Type

Description

id

String

If you decide to configure your component in the didomiConfig object, you can use this id to link your component to your configuration object. See this section for more information

activeLabel

DidomiBaseCheckbox

Label of the checkbox when it is checked

activeText

DidomiText

Override the name of the entity linked to the checkbox when it is checked

channelId

String

ID of the channel linked to the checkbox. See this section for more information

color

String

Color of the checkbox

enabledPath

String

If you want to save the consent status in a different path in the metadata object of the current entity, you can set a different path as a string. For example if you want to save the consent in a brands object located in the entity metadata, for the brand didomi, in an attribut called enabled, you would add brands.didomi.enabled

fontSize

String

Font size of the text

hasBorder

Boolean

Does the checkbox have a border

indicator

DidomiFlex

Container of the indicator

label

DidomiBaseCheckbox

Label of the checkbox

metadata

Object

Metadata passed to the HTTP request. See this section for more information

padding

String

padding of the checkbox

preferenceId

String

ID of the preference linked to the checkbox. See this section for more information

purposeId

String

ID of the purpose linked to the checkbox. See this section for more information

saveOnClick

Boolean

Should the consent be saved on click or set as pending consent. This attribute gives you the choice to either save the consent immediately or wait and save all the pending consents together with a didomi-save component for example. Default value: false.

text

DidomiText

Override the name of the entity linked to the checkbox

textColor

String

Color of the text

For inline configuration, make sure to use kebab-case syntax. For example purposeId will become purpose-id.

Metadata

If you enabled save-on-click and you want to send additional information to the POST HTTP request, you can populate this attribute with data. It will be sent beside the consent object in the body request as a metadata object.

window.didomiConfig = {
...
components: {
activeComponents: [
{
id: "checkbox-email",
type: "checkbox",
options: {
...
metadata: {
brand: "didomi",
value: "test"
}
}
}
]
}
};
// OR //
<didomi-checkbox
metadata='{ "brand": "didomi", "value": "test" }'
/>

Events

Name

Description

click-checkbox

Trigger when the user clicks on the checkbox

const checkbox = document.querySelector('#didomi-checkbox');
checkbox.addEventListener('click-checkbox', (e) => {
console.log('the checkbox has been clicked', e.detail)
});

Examples

Object configuration

window.didomiConfig = {
...
entities: [...],
containers: [...],
components: {
activeComponents: [
{
id: "checkbox-email",
type: "checkbox",
options: {
purposeId: "purpose-id",
preferenceId: "preference-id",
channelId: "channel-id-email",
color: "#F07D5A"
}
},
{
id: "checkbox-print",
type: "checkbox",
options: {
purposeId: "purpose-id",
preferenceId: "preference-id",
channelId: "channel-id-print",
color: "#003790",
padding: "10px",
hasBorder: true
}
},
{
id: "checkbox-text",
type: "checkbox",
options: {
purposeId: "purpose-id",
preferenceId: "preference-id",
channelId: "channel-id-text",
color: "#F07D5A",
fontSize: "20px"
}
},
{
id: "checkbox-call",
type: "checkbox",
options: {
purposeId: "purpose-id",
preferenceId: "preference-id",
channelId: "channel-id-call",
color: "#F07D5A",
textColor: "#003790"
}
}
]
}
};
<didomi-checkbox id="checkbox-email" />
<div style="width: 100px; display: inline-block">
<didomi-checkbox id="checkbox-print" />
</div>
<didomi-checkbox id="checkbox-text" />
<didomi-checkbox id="checkbox-call" />

Inline configuration

window.didomiConfig = {
...
entities: [...],
containers: [...],
};
<didomi-checkbox
purpose-id="purpose-id"
preference-id="preference-id"
channel-id="channel-id-email"
color="#F07D5A"
/>
<div style="width: 100px; display: inline-block">
<didomi-checkbox
purpose-id="purpose-id"
preference-id="preference-id"
channel-id="channel-id-print"
color="#003790"
padding="10px"
has-border="true"
/>
</div>
<didomi-checkbox
purpose-id="purpose-id"
preference-id="preference-id"
channel-id="channel-id-text"
color="#F07D5A"
font-size="20px"
/>
<didomi-checkbox
purpose-id="purpose-id"
preference-id="preference-id"
channel-id="channel-id-call"
color="#F07D5A"
text-color="#003790"
/>