BaseCheckbox

Introduction

Name: didomi-base-checkbox Component type: baseCheckbox

Display a label with an input checkbox.

Object configuration

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

Inline configuration

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

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

value

Boolean

Value of the checkbox

style

Object

See this section for style information

For inline configuration, make sure to use kebab-case syntax. For example fontSize will become font-size.

Slots

You have the possibility to add a slot which allow you to add content to the checkbox label.

<didomi-base-checkbox id="ID_OF_THE_COMPONENT">
<span>Content inside the label</span>
</didomi-base-checkbox>

Events

Name

Description

click-base-checkbox

Trigger when the user clicks on the checkbox

const baseCheckbox = document.querySelector('#didomi-base-checkbox');
button.addEventListener('click-base-checkbox', (e) => {
// Get the updated value
console.log(e.detail.value)
});

Examples

Object configuration

window.didomiConfig = {
...
components: {
activeComponents: [
{
id: "section-base-checkbox",
type: "base-checkbox",
options: {
style: {
default: {
color: "white",
backgroundColor: "#F07D5A",
padding: "10px 20px"
}
}
}
}
]
}
};
-----
<didomi-base-checkbox id="section-base-checkbox">
Base Checkbox Content
</didomi-base-checkbox>
-----
const baseCheckbox = document.querySelector("#section-base-checkbox");
baseCheckbox.addEventListener("click-base-checkbox", e => {
baseCheckbox.value = e.detail.value;
});

Inline configuration

<didomi-base-checkbox
style='{"default":{"color": "white", "backgroundColor": "#F07D5A", "padding": "10px 20px"}}'
>Base Checkbox Content</didomi-base-checkbox>