diff --git a/features/standard/UserCreation.feature b/features/standard/UserCreation.feature
index 4bfe8d89d9..624e81c2e9 100644
--- a/features/standard/UserCreation.feature
+++ b/features/standard/UserCreation.feature
@@ -37,8 +37,8 @@ Feature: User management
       | First name  | testuseredited |
       | Last name   | lastnameedited |
     And I set content fields for user
-      | label         | Username  | Password    | Confirm password  | Email          |
-      | User account  | testuser  | Test123456  | Test123456        | test@test.org  |
+      | label         | Username  | Password    | Confirm password  | Email          | Enabled |
+      | User account  | testuser  | Test123456  | Test123456        | test@test.org  | Yes     | 
     And I perform the "Update" action
     Then I should be on Content view Page for "Users/testuseredited lastnameedited"
     And content attributes equal
diff --git a/src/bundle/Resources/encore/ibexa.css.config.js b/src/bundle/Resources/encore/ibexa.css.config.js
index 62dfba962e..283f45eb1f 100644
--- a/src/bundle/Resources/encore/ibexa.css.config.js
+++ b/src/bundle/Resources/encore/ibexa.css.config.js
@@ -5,6 +5,7 @@ module.exports = (Encore) => {
         path.resolve(__dirname, '../public/scss/ibexa-bootstrap.scss'),
         path.resolve(__dirname, '../public/scss/ibexa.scss'),
         path.resolve(__dirname, '../public/scss/ui/ibexa-modules.scss'),
+        path.resolve('./vendor/ibexa/admin-ui-assets/src/bundle/Resources/public/vendors/ids-assets/dist/css/styles.css'),
         path.resolve('./vendor/ibexa/admin-ui-assets/src/bundle/Resources/public/vendors/flatpickr/dist/flatpickr.min.css'),
         path.resolve(
             './vendor/ibexa/admin-ui-assets/src/bundle/Resources/public/vendors/flatpickr/dist/plugins/confirmDate/confirmDate.css',
diff --git a/src/bundle/Resources/encore/ibexa.js.config.js b/src/bundle/Resources/encore/ibexa.js.config.js
index 30b8296fd9..89e6e1fedb 100644
--- a/src/bundle/Resources/encore/ibexa.js.config.js
+++ b/src/bundle/Resources/encore/ibexa.js.config.js
@@ -49,6 +49,7 @@ const layout = [
     path.resolve(__dirname, '../public/js/scripts/admin.focus.mode.js'),
     path.resolve(__dirname, '../public/js/scripts/sidebar/main.menu.js'),
     path.resolve(__dirname, '../public/js/scripts/admin.input.text.js'),
+    path.resolve('./vendor/ibexa/design-system-twig/src/bundle/Resources/public/ts/init_components.ts'),
     path.resolve(__dirname, '../public/js/scripts/admin.table.js'),
     path.resolve(__dirname, '../public/js/scripts/core/collapse.js'),
     path.resolve(__dirname, '../public/js/scripts/admin.dropdown.js'),
diff --git a/src/bundle/Resources/public/js/scripts/admin.notifications.filters.js b/src/bundle/Resources/public/js/scripts/admin.notifications.filters.js
index 33fb21d9d9..f2027fbf72 100644
--- a/src/bundle/Resources/public/js/scripts/admin.notifications.filters.js
+++ b/src/bundle/Resources/public/js/scripts/admin.notifications.filters.js
@@ -1,4 +1,5 @@
 (function (global, doc) {
+    const SELECTOR_FILTER_CHECKBOX = '.ids-input--checkbox:not([name="dropdown-checkbox"])';
     const searchForm = doc.querySelector('.ibexa-list-search-form');
     const filtersContainerNode = doc.querySelector('.ibexa-list-filters');
     const applyFiltersBtn = filtersContainerNode.querySelector('.ibexa-btn--apply');
@@ -13,9 +14,7 @@
         }
 
         const sourceSelect = filterNode.querySelector('.ibexa-list-filters__item-content .ibexa-dropdown__source .ibexa-input--select');
-        const checkboxes = filterNode.querySelectorAll(
-            '.ibexa-list-filters__item-content .ibexa-input--checkbox:not([name="dropdown-checkbox"])',
-        );
+        const checkboxes = filterNode.querySelectorAll(`.ibexa-list-filters__item-content ${SELECTOR_FILTER_CHECKBOX}`);
         const timePicker = filterNode.querySelector('.ibexa-date-time-picker__input');
 
         if (sourceSelect) {
@@ -45,9 +44,7 @@
             return;
         }
 
-        const checkboxes = filterNode.querySelectorAll(
-            '.ibexa-list-filters__item-content .ibexa-input--checkbox:not([name="dropdown-checkbox"])',
-        );
+        const checkboxes = filterNode.querySelectorAll(`.ibexa-list-filters__item-content ${SELECTOR_FILTER_CHECKBOX}`);
         checkboxes.forEach((checkbox) => {
             checkbox.addEventListener('change', filterChange, false);
         });
@@ -80,7 +77,7 @@
         }
 
         const select = filterNode.querySelector('.ibexa-dropdown__source .ibexa-input--select');
-        const checkedCheckboxes = filterNode.querySelectorAll('.ibexa-input--checkbox:checked');
+        const checkedCheckboxes = filterNode.querySelectorAll(`${SELECTOR_FILTER_CHECKBOX}:checked`);
 
         if (isNodeDatePicker(filterNode)) {
             const timePicker = filterNode.querySelector('.ibexa-date-time-picker__input');
diff --git a/src/bundle/Resources/public/js/scripts/admin.notifications.list.js b/src/bundle/Resources/public/js/scripts/admin.notifications.list.js
index e17cdcb55a..10ab3a0dee 100644
--- a/src/bundle/Resources/public/js/scripts/admin.notifications.list.js
+++ b/src/bundle/Resources/public/js/scripts/admin.notifications.list.js
@@ -1,6 +1,7 @@
 import { isFirefox } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/browser.helper.js';
 
 (function (global, doc, ibexa, Translator, Routing) {
+    const SELECTOR_NOTIFICATION_CHECKBOX = '.ibexa-notification-list__mark-row-checkbox';
     const SELECTOR_MODAL_ITEM = '.ibexa-notifications-modal__item';
     const SELECTOR_GO_TO_NOTIFICATION = '.ibexa-notification-view-all__show';
     const SELECTOR_TOGGLE_NOTIFICATION = '.ibexa-notification-view-all__mail';
@@ -10,7 +11,7 @@ import { isFirefox } from '@ibexa-admin-ui/src/bundle/Resources/public/js/script
     const markAsReadBtn = doc.querySelector('.ibexa-notification-list__btn-mark-as-read');
     const deleteBtn = doc.querySelector('.ibexa-notification-list__btn-delete');
     const notificationsCheckboxes = [
-        ...doc.querySelectorAll('.ibexa-notification-list .ibexa-table__cell--has-checkbox .ibexa-input--checkbox'),
+        ...doc.querySelectorAll(`.ibexa-notification-list .ibexa-table__cell--has-checkbox ${SELECTOR_NOTIFICATION_CHECKBOX}`),
     ];
     const notificationsTable = doc.querySelector('.ibexa-table--notifications');
     const uncheckCheckboxesEvent = new CustomEvent('ibexa-uncheck-checkboxes', {
diff --git a/src/bundle/Resources/public/js/scripts/admin.table.js b/src/bundle/Resources/public/js/scripts/admin.table.js
index cd95832999..325c822c9c 100644
--- a/src/bundle/Resources/public/js/scripts/admin.table.js
+++ b/src/bundle/Resources/public/js/scripts/admin.table.js
@@ -1,4 +1,5 @@
 (function (global, doc) {
+    const SELECTOR_TABLE_CHECKBOX = '.ids-input--checkbox';
     const ibexaTables = doc.querySelectorAll('.ibexa-table');
     const setMainCheckboxState = (mainCheckbox, subCheckboxes, event) => {
         const isFromJS = event?.detail?.isFromJS ?? false;
@@ -61,9 +62,9 @@
             }
 
             const mainCheckboxIndex = [...headCells].indexOf(headCellWithCheckbox);
-            const mainCheckbox = headCellWithCheckbox.querySelector('.ibexa-input--checkbox');
+            const mainCheckbox = headCellWithCheckbox.querySelector(SELECTOR_TABLE_CHECKBOX);
             const subCheckboxes = tableBody.querySelectorAll(
-                `.ibexa-table__cell--has-checkbox:nth-child(${mainCheckboxIndex + 1}) .ibexa-input--checkbox`,
+                `.ibexa-table__cell--has-checkbox:nth-child(${mainCheckboxIndex + 1}) ${SELECTOR_TABLE_CHECKBOX}`,
             );
 
             if (!mainCheckbox) {
@@ -138,7 +139,7 @@
 
     const uncheckCheckboxes = (table) => {
         const mainCheckbox = table.querySelector('.ibexa-table__header-cell-checkbox');
-        const subCheckboxes = [...table.querySelectorAll('.ibexa-table__cell--has-checkbox .ibexa-input--checkbox')];
+        const subCheckboxes = [...table.querySelectorAll(`.ibexa-table__cell--has-checkbox ${SELECTOR_TABLE_CHECKBOX}`)];
 
         mainCheckbox.checked = false;
         mainCheckbox.indeterminate = false;
diff --git a/src/bundle/Resources/public/js/scripts/button.state.toggle.js b/src/bundle/Resources/public/js/scripts/button.state.toggle.js
index a06a27b90f..e17acd6ac0 100644
--- a/src/bundle/Resources/public/js/scripts/button.state.toggle.js
+++ b/src/bundle/Resources/public/js/scripts/button.state.toggle.js
@@ -1,8 +1,9 @@
 (function (global, doc) {
+    const SELECTOR_TABLE_CHECKBOX = '.ids-input--checkbox';
     const toggleForms = doc.querySelectorAll('.ibexa-toggle-btn-state');
 
     toggleForms.forEach((toggleForm) => {
-        const checkboxes = [...toggleForm.querySelectorAll('.ibexa-table__cell--has-checkbox .ibexa-input--checkbox')];
+        const checkboxes = [...toggleForm.querySelectorAll(`.ibexa-table__cell--has-checkbox ${SELECTOR_TABLE_CHECKBOX}`)];
         const buttonRemove = doc.querySelector(toggleForm.dataset.toggleButtonId);
 
         if (!buttonRemove) {
diff --git a/src/bundle/Resources/public/js/scripts/core/dropdown.js b/src/bundle/Resources/public/js/scripts/core/dropdown.js
index b69bf0c740..f587021d99 100644
--- a/src/bundle/Resources/public/js/scripts/core/dropdown.js
+++ b/src/bundle/Resources/public/js/scripts/core/dropdown.js
@@ -152,7 +152,7 @@
 
             this.sourceInput.querySelectorAll('option').forEach((option) => (option.selected = false));
             this.itemsListContainer.querySelectorAll('.ibexa-dropdown__item--selected').forEach((option) => {
-                const checkbox = option.querySelector('.ibexa-input--checkbox');
+                const checkbox = option.querySelector('.ibexa-dropdown__item-checkbox');
 
                 option.classList.remove('ibexa-dropdown__item--selected');
 
@@ -211,7 +211,11 @@
             const value = this.getValueFromElement(element);
 
             if (value && !this.canSelectOnlyOne) {
-                element.querySelector('.ibexa-input').checked = selected;
+                const checkbox = element.querySelector('.ibexa-dropdown__item-checkbox');
+
+                if (checkbox) {
+                    checkbox.checked = selected;
+                }
             }
 
             this.itemsListContainer.querySelector(`[data-value=${value}]`).classList.toggle('ibexa-dropdown__item--selected', selected);
@@ -314,7 +318,11 @@
             itemSelected.classList.remove('ibexa-dropdown__item--selected');
 
             if (!this.canSelectOnlyOne) {
-                itemSelected.querySelector('.ibexa-input').checked = false;
+                const checkbox = itemSelected.querySelector('.ibexa-dropdown__item-checkbox');
+
+                if (checkbox) {
+                    checkbox.checked = false;
+                }
             }
 
             if (optionSelect) {
diff --git a/src/bundle/Resources/public/js/scripts/core/toggle.button.js b/src/bundle/Resources/public/js/scripts/core/toggle.button.js
index 19bf315f33..1a7a6580fe 100644
--- a/src/bundle/Resources/public/js/scripts/core/toggle.button.js
+++ b/src/bundle/Resources/public/js/scripts/core/toggle.button.js
@@ -4,7 +4,10 @@
     class ToggleButton {
         constructor(config) {
             this.toggleNode = config.toggleNode;
-            this.inputsSelector = config?.inputsSelector || 'input';
+            this.inputsSelector = config?.inputsSelector || (this.toggleNode.classList.contains('ids-toggle') ? '.ids-toggle__source input' : 'input');
+            this.checkedClass = this.toggleNode.classList.contains('ids-toggle') ? 'ids-toggle--checked' : 'ibexa-toggle--is-checked';
+            this.disabledClass = this.toggleNode.classList.contains('ids-toggle') ? 'ids-toggle--disabled' : 'ibexa-toggle--is-disabled';
+            this.focusedClass = this.toggleNode.classList.contains('ids-toggle') ? 'ids-toggle--focused' : 'ibexa-toggle--is-focused';
 
             this.toggleState = this.toggleState.bind(this);
             this.addFocus = this.addFocus.bind(this);
@@ -18,18 +21,18 @@
 
             const toggler = event.currentTarget;
 
-            if (toggler.classList.contains('ibexa-toggle--is-disabled')) {
+            if (toggler.classList.contains(this.disabledClass)) {
                 return;
             }
 
-            const isChecked = toggler.classList.toggle('ibexa-toggle--is-checked');
+            const isChecked = toggler.classList.toggle(this.checkedClass);
 
             if (toggler.classList.contains('ibexa-toggle--radio')) {
                 const valueToSet = isChecked ? 1 : 0;
 
                 toggler.querySelector(`.form-check input[value="${valueToSet}"]`).checked = true;
             } else {
-                const toggleInput = toggler.querySelector('.ibexa-toggle__input');
+                const toggleInput = toggler.querySelector(this.inputsSelector);
 
                 toggleInput.checked = isChecked;
                 toggleInput.dispatchEvent(new Event('change'));
@@ -39,25 +42,25 @@
         addFocus(event) {
             event.preventDefault();
 
-            const toggler = event.currentTarget.closest('.ibexa-toggle');
+            const toggler = event.currentTarget.closest('.ibexa-toggle, .ids-toggle');
 
-            if (toggler.classList.contains('ibexa-toggle--is-disabled')) {
+            if (toggler.classList.contains(this.disabledClass)) {
                 return;
             }
 
-            toggler.classList.add('ibexa-toggle--is-focused');
+            toggler.classList.add(this.focusedClass);
         }
 
         removeFocus(event) {
             event.preventDefault();
 
-            const toggler = event.currentTarget.closest('.ibexa-toggle');
+            const toggler = event.currentTarget.closest('.ibexa-toggle, .ids-toggle');
 
-            if (toggler.classList.contains('ibexa-toggle--is-disabled')) {
+            if (toggler.classList.contains(this.disabledClass)) {
                 return;
             }
 
-            toggler.classList.remove('ibexa-toggle--is-focused');
+            toggler.classList.remove(this.focusedClass);
         }
 
         toggleStateOnSpacePressed(event) {
diff --git a/src/bundle/Resources/public/js/scripts/fieldType/ibexa_author.js b/src/bundle/Resources/public/js/scripts/fieldType/ibexa_author.js
index 117997bd48..94ee075d34 100644
--- a/src/bundle/Resources/public/js/scripts/fieldType/ibexa_author.js
+++ b/src/bundle/Resources/public/js/scripts/fieldType/ibexa_author.js
@@ -1,6 +1,7 @@
 (function (global, doc, ibexa) {
     const SELECTOR_REMOVE_AUTHOR = '.ibexa-btn--remove-author';
     const SELECTOR_AUTHOR = '.ibexa-data-source__author';
+    const SELECTOR_AUTHOR_CHECKBOX = '.ibexa-data-source__author-checkbox';
     const SELECTOR_FIELD = '.ibexa-field-edit--ibexa_author';
     const SELECTOR_LABEL = '.ibexa-data-source__label';
     const SELECTOR_FIELD_EMAIL = '.ibexa-data-source__field--email';
@@ -104,7 +105,7 @@
 
         toggleBulkDeleteButtonState(event) {
             const container = event.target.closest(SELECTOR_FIELD);
-            const checkboxes = container.querySelectorAll('.ibexa-input--checkbox');
+            const checkboxes = container.querySelectorAll(SELECTOR_AUTHOR_CHECKBOX);
             const isAnyCheckboxSelected = [...checkboxes].some((checkbox) => checkbox.checked);
             const bulkDeleteButton = container.querySelector('.ibexa-btn--bulk-remove-author');
 
@@ -113,7 +114,7 @@
 
         removeSelectedItems(event) {
             const container = event.target.closest(SELECTOR_FIELD);
-            const selectedCheckboxes = container.querySelectorAll('.ibexa-input--checkbox:checked');
+            const selectedCheckboxes = container.querySelectorAll(`${SELECTOR_AUTHOR_CHECKBOX}:checked`);
             const bulkDeleteButton = container.querySelector('.ibexa-btn--bulk-remove-author');
 
             selectedCheckboxes.forEach((checkbox) => checkbox.closest(SELECTOR_AUTHOR).remove());
@@ -246,7 +247,7 @@
             },
             {
                 isValueValidator: false,
-                selector: '.ibexa-data-source__author .ibexa-input--checkbox',
+                selector: `.ibexa-data-source__author ${SELECTOR_AUTHOR_CHECKBOX}`,
                 eventName: 'change',
                 callback: 'toggleBulkDeleteButtonState',
             },
diff --git a/src/bundle/Resources/public/js/scripts/sidebar/btn/content.edit.js b/src/bundle/Resources/public/js/scripts/sidebar/btn/content.edit.js
index a2d8d1287e..1813e212f6 100644
--- a/src/bundle/Resources/public/js/scripts/sidebar/btn/content.edit.js
+++ b/src/bundle/Resources/public/js/scripts/sidebar/btn/content.edit.js
@@ -3,7 +3,7 @@
 
     editButtons.forEach((editButton) => {
         const languageRadioOption = doc.querySelector(
-            `.ibexa-extra-actions--edit.ibexa-extra-actions--prevent-show[data-actions="${editButton.dataset.actions}"] .ibexa-input--radio`,
+            `.ibexa-extra-actions--edit.ibexa-extra-actions--prevent-show[data-actions="${editButton.dataset.actions}"] .ids-input--radio`,
         );
 
         if (!languageRadioOption) {
diff --git a/src/bundle/Resources/public/js/scripts/sidebar/btn/contenttype.edit.js b/src/bundle/Resources/public/js/scripts/sidebar/btn/contenttype.edit.js
index 437a1b5f8c..bc59a4d9e6 100644
--- a/src/bundle/Resources/public/js/scripts/sidebar/btn/contenttype.edit.js
+++ b/src/bundle/Resources/public/js/scripts/sidebar/btn/contenttype.edit.js
@@ -1,6 +1,6 @@
 (function (global, doc) {
     const editButton = doc.querySelector('.ibexa-btn--edit');
-    const languageRadioOption = doc.querySelector('.ibexa-extra-actions--edit.ibexa-extra-actions--prevent-show .ibexa-input--radio');
+    const languageRadioOption = doc.querySelector('.ibexa-extra-actions--edit.ibexa-extra-actions--prevent-show .ids-input--radio');
     const editActions = doc.querySelector('.ibexa-extra-actions--edit');
     const btns = editActions.querySelectorAll('.form-check [type="radio"]');
     const changeHandler = () => {
diff --git a/src/bundle/Resources/public/js/scripts/sidebar/btn/user.edit.js b/src/bundle/Resources/public/js/scripts/sidebar/btn/user.edit.js
index d2a8204ced..f17d3df02b 100644
--- a/src/bundle/Resources/public/js/scripts/sidebar/btn/user.edit.js
+++ b/src/bundle/Resources/public/js/scripts/sidebar/btn/user.edit.js
@@ -1,6 +1,6 @@
 (function (global, doc) {
     const editButton = doc.querySelector('.ibexa-btn--edit-user');
-    const languageRadioOption = doc.querySelector('.ibexa-extra-actions--edit-user.ibexa-extra-actions--prevent-show .ibexa-input--radio');
+    const languageRadioOption = doc.querySelector('.ibexa-extra-actions--edit-user.ibexa-extra-actions--prevent-show .ids-input--radio');
     const editActions = doc.querySelector('.ibexa-extra-actions--edit-user');
 
     if (!editActions || !languageRadioOption) {
diff --git a/src/bundle/Resources/public/scss/_custom-url-form.scss b/src/bundle/Resources/public/scss/_custom-url-form.scss
index 7626b45f09..e9fa793638 100644
--- a/src/bundle/Resources/public/scss/_custom-url-form.scss
+++ b/src/bundle/Resources/public/scss/_custom-url-form.scss
@@ -25,13 +25,13 @@
         &--checked {
             display: none;
 
-            .ibexa-toggle--is-checked + & {
+            .ids-toggle--checked + & {
                 display: block;
             }
         }
 
         &--unchecked {
-            .ibexa-toggle--is-checked + .ibexa-custom-url-from__info-text--checked + & {
+            .ids-toggle--checked + .ibexa-custom-url-from__info-text--checked + & {
                 display: none;
             }
         }
diff --git a/src/bundle/Resources/public/scss/_dropdown.scss b/src/bundle/Resources/public/scss/_dropdown.scss
index 5cb76a2d78..26f2965a36 100644
--- a/src/bundle/Resources/public/scss/_dropdown.scss
+++ b/src/bundle/Resources/public/scss/_dropdown.scss
@@ -281,7 +281,7 @@
             }
         }
 
-        .ibexa-input {
+        .ibexa-dropdown__item-checkbox {
             flex-shrink: 0;
             margin: 0 calculateRem(16px) 0 0;
         }
diff --git a/src/bundle/Resources/public/scss/_grid-view-item.scss b/src/bundle/Resources/public/scss/_grid-view-item.scss
index 99362deb62..27f8a28a52 100644
--- a/src/bundle/Resources/public/scss/_grid-view-item.scss
+++ b/src/bundle/Resources/public/scss/_grid-view-item.scss
@@ -28,8 +28,8 @@
         border-color: $ibexa-color-dark;
         text-decoration: none;
 
-        .ibexa-input--checkbox,
-        .ibexa-input--radio {
+        .ids-input--checkbox,
+        .ids-input--radio {
             border-color: $ibexa-color-primary;
         }
     }
@@ -179,9 +179,16 @@
         top: calculateRem(10px);
         display: none;
 
-        .ibexa-input {
+        .ibexa-input,
+        .ids-input {
             background-color: $ibexa-color-white;
         }
+
+        &--hovered {
+            .ids-input {
+                border-color: $ibexa-color-primary;
+            }
+        }
     }
 
     &:hover {
diff --git a/src/bundle/Resources/public/scss/_inputs.scss b/src/bundle/Resources/public/scss/_inputs.scss
index 7ed963dee7..b80fd66d33 100644
--- a/src/bundle/Resources/public/scss/_inputs.scss
+++ b/src/bundle/Resources/public/scss/_inputs.scss
@@ -528,3 +528,15 @@
         }
     }
 }
+
+.form-check-input:checked {
+  background-color: $ibexa-color-white;
+}
+
+.form-check-input:checked[type=checkbox] {
+  --bs-form-check-bg-image: none;
+}
+
+.form-check-input[type=checkbox] {
+    border-radius: calculateRem(2px);
+}
diff --git a/src/bundle/Resources/public/scss/_tables.scss b/src/bundle/Resources/public/scss/_tables.scss
index 6f97f9a339..7ae670c80f 100644
--- a/src/bundle/Resources/public/scss/_tables.scss
+++ b/src/bundle/Resources/public/scss/_tables.scss
@@ -40,8 +40,8 @@
                     border-color: $ibexa-color-primary;
                 }
 
-                .ibexa-input--checkbox,
-                .ibexa-input--radio {
+                .ids-input--checkbox,
+                .ids-input--radio {
                     border-color: $ibexa-color-primary;
                 }
             }
@@ -149,7 +149,7 @@
     }
 
     &__header-cell-checkbox {
-        &.ibexa-input--checkbox {
+        &.ids-input--checkbox {
             margin-bottom: 0;
         }
     }
@@ -186,7 +186,7 @@
         &--has-checkbox {
             width: calculateRem(48px);
 
-            .ibexa-input--checkbox {
+            .ids-input--checkbox {
                 float: left;
                 margin-bottom: 0;
             }
@@ -212,12 +212,12 @@
         &--content-center {
             text-align: center;
 
-            .ibexa-input--checkbox {
+            .ids-input--checkbox {
                 margin-bottom: 0;
             }
         }
 
-        .ibexa-input--radio {
+        .ids-input--radio {
             vertical-align: middle;
         }
     }
diff --git a/src/bundle/Resources/public/scss/fieldType/edit/_ibexa_media.scss b/src/bundle/Resources/public/scss/fieldType/edit/_ibexa_media.scss
index f4dc7bb427..68b8c85f3a 100644
--- a/src/bundle/Resources/public/scss/fieldType/edit/_ibexa_media.scss
+++ b/src/bundle/Resources/public/scss/fieldType/edit/_ibexa_media.scss
@@ -44,7 +44,7 @@
                 row-gap: calculateRem(12px);
                 column-gap: calculateRem(8px);
 
-                .ibexa-input--checkbox {
+                .ibexa-field-edit-preview__checkbox {
                     margin-top: calculateRem(4px);
                 }
             }
diff --git a/src/bundle/Resources/public/scss/ui/modules/sub-items-list/_view-columns-toggler-list-element.scss b/src/bundle/Resources/public/scss/ui/modules/sub-items-list/_view-columns-toggler-list-element.scss
index 7873b20f62..fdbfea30dc 100644
--- a/src/bundle/Resources/public/scss/ui/modules/sub-items-list/_view-columns-toggler-list-element.scss
+++ b/src/bundle/Resources/public/scss/ui/modules/sub-items-list/_view-columns-toggler-list-element.scss
@@ -9,7 +9,7 @@
         align-items: center;
     }
 
-    .ibexa-input--checkbox {
+    &__checkbox {
         margin-right: calculateRem(8px);
     }
 
diff --git a/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_collapsible.scss b/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_collapsible.scss
index 40bf62707c..755a7256b9 100644
--- a/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_collapsible.scss
+++ b/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_collapsible.scss
@@ -78,7 +78,7 @@
             overflow: hidden;
         }
 
-        .ibexa-input--checkbox {
+        .ids-input--checkbox {
             margin-right: calculateRem(8px);
         }
     }
diff --git a/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_content-type-selector-list.scss b/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_content-type-selector-list.scss
index c559ad6a7b..d2afb2f7ae 100644
--- a/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_content-type-selector-list.scss
+++ b/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_content-type-selector-list.scss
@@ -20,7 +20,7 @@
             font-size: $ibexa-text-font-size-medium;
         }
 
-        .ibexa-input--checkbox {
+        .c-content-type-selector-list__checkbox {
             margin-right: calculateRem(8px);
         }
     }
diff --git a/src/bundle/Resources/views/themes/admin/account/notifications/list_item_all.html.twig b/src/bundle/Resources/views/themes/admin/account/notifications/list_item_all.html.twig
index 2f3d3a0f1c..3f1b97dd8b 100644
--- a/src/bundle/Resources/views/themes/admin/account/notifications/list_item_all.html.twig
+++ b/src/bundle/Resources/views/themes/admin/account/notifications/list_item_all.html.twig
@@ -87,11 +87,11 @@
         {% embed '@ibexadesign/ui/component/table/table_body_cell.html.twig' with { class: 'ibexa-table__cell--has-checkbox' } %}
             {% block content %}
                 <div class="form-check">
-                    <input
+                    <twig:ibexa:checkbox:input
+                        name="{{ 'notification-checkbox-' ~ notification.id }}"
+                        inputClass="ibexa-notification-list__mark-row-checkbox form-check-input"
                         data-notification-id="{{ notification.id }}"
-                        data-form-checkbox-id="notification_selection_notifications_{{ notification.id}}"
-                        type="checkbox"
-                        class="ibexa-input ibexa-input--checkbox ibexa-notification-list__mark-row-checkbox form-check-input"
+                        data-form-checkbox-id="notification_selection_notifications_{{ notification.id }}"
                     />
                 </div>
             {% endblock %}
@@ -153,4 +153,3 @@
         {% endembed %}
     {% endblock %}
 {% endembed %}
-
diff --git a/src/bundle/Resources/views/themes/admin/content/tab/locations/tab.html.twig b/src/bundle/Resources/views/themes/admin/content/tab/locations/tab.html.twig
index 0fa5775eeb..c86327daf9 100644
--- a/src/bundle/Resources/views/themes/admin/content/tab/locations/tab.html.twig
+++ b/src/bundle/Resources/views/themes/admin/content/tab/locations/tab.html.twig
@@ -32,14 +32,12 @@
                 ]) %}
 
                 {% set col_raw %}
-                    <input
-                        class="ibexa-input ibexa-input--radio"
-                        type="radio"
-                        {{ location.main ? 'checked' }}
-                        {{ not location.canEdit ? 'disabled' }}
+                    <twig:ibexa:radio_button:input
                         name="updateMainLocation"
-                        value="{{ location.id }}"
-                    >
+                        :checked="location.main"
+                        :disabled="not location.canEdit"
+                        :value="location.id ~ ''"
+                    />
                 {% endset %}
                 {% set body_row_cols = body_row_cols|merge([{
                     content: col_raw,
@@ -48,25 +46,25 @@
 
                 {% set col_raw %}
                     <div class="ibexa-content-locations__visibility-toggler">
-                        <div class="ibexa-toggle ibexa-toggle--checkbox {{ not can_hide[location.id] ? 'ibexa-toggle--is-disabled' }} {{ not location.explicitlyHidden ? 'ibexa-toggle--is-checked' }}">
-                            <label class="ibexa-toggle__switcher">
-                                <span class="ibexa-toggle__indicator"></span>
-                                <input
-                                    type="checkbox"
-                                    class="ibexa-toggle__input ibexa-content-locations__visibility-checkbox"
-                                    {{ not location.explicitlyHidden ? 'checked' }}
+                        <twig:ibexa:toggle_button:input
+                            name="updateVisibility"
+                            :checked="not location.explicitlyHidden"
+                            :disabled="not can_hide[location.id]"
+                            :value="location.id ~ ''"
+                            onLabel="{{ 'toggle_widget.label.on'|trans|desc('On') }}"
+                            offLabel="{{ 'toggle_widget.label.off'|trans|desc('Off') }}"
+                        >
+                            <twig:block name="input">
+                                <twig:ibexa:checkbox:input
                                     name="updateVisibility"
-                                    {{ not can_hide[location.id] ? 'disabled' }}
-                                    value="{{ location.id }}"
+                                    class="ibexa-content-locations__visibility-checkbox"
+                                    :checked="not location.explicitlyHidden"
+                                    :disabled="not can_hide[location.id]"
+                                    :value="location.id ~ ''"
+                                    data-ids-custom-init="1"
                                 />
-                            </label>
-                            <span class="ibexa-toggle__label ibexa-toggle__label--on">
-                                {{ 'toggle_widget.label.on'|trans|desc('On') }}
-                            </span>
-                            <span class="ibexa-toggle__label ibexa-toggle__label--off mr-2">
-                                {{ 'toggle_widget.label.off'|trans|desc('Off') }}
-                            </span>
-                        </div>
+                            </twig:block>
+                        </twig:ibexa:toggle_button:input>
                         <label class="ibexa-content-locations__visibility-toggler-label {{ not location.invisible ? 'ibexa-content-locations__visibility-toggler-label--hidden' }}">
                             <svg class="ibexa-icon ibexa-icon--small-medium">
                                 <use xlink:href="{{ ibexa_icon_path('system-information') }}"></use>
diff --git a/src/bundle/Resources/views/themes/admin/content/tab/translations/tab.html.twig b/src/bundle/Resources/views/themes/admin/content/tab/translations/tab.html.twig
index fa5611933a..974c71affe 100644
--- a/src/bundle/Resources/views/themes/admin/content/tab/translations/tab.html.twig
+++ b/src/bundle/Resources/views/themes/admin/content/tab/translations/tab.html.twig
@@ -39,14 +39,12 @@
 
         {% if main_translation_switch %}
             {% set col_raw %}
-                <input
-                    class="ibexa-input ibexa-input--radio"
-                    type="radio"
-                    {{ translation.main ? 'checked' }}
-                    {{ not translation.canEdit ? 'disabled' }}
+                <twig:ibexa:radio_button:input
                     name="main_translation_update"
+                    :checked="translation.main"
+                    :disabled="not translation.canEdit"
                     value="{{ translation.languageCode }}"
-                >
+                />
             {% endset %}
             {% set body_row_cols = body_row_cols|merge([{
                 content: col_raw,
diff --git a/src/bundle/Resources/views/themes/admin/content/tab/url/checkbox.html.twig b/src/bundle/Resources/views/themes/admin/content/tab/url/checkbox.html.twig
index 6a0a768ed0..79508080d5 100644
--- a/src/bundle/Resources/views/themes/admin/content/tab/url/checkbox.html.twig
+++ b/src/bundle/Resources/views/themes/admin/content/tab/url/checkbox.html.twig
@@ -1,8 +1,8 @@
-{% use '@ibexadesign/ui/form_fields/toggle_widget.html.twig' %}
+{% use '@ibexadesign/ui/form_fields/toggle_widget_ds.html.twig' %}
 
 {%- block checkbox_widget -%}
     {% if value is defined %}
-        {% set attr = attr|merge({'value': value}) %}
+        {% set attr = attr|merge({'value': value ~ ''}) %}
     {% endif %}
     {% if checked %}
         {% set attr = attr|merge({'checked': checked}) %}
diff --git a/src/bundle/Resources/views/themes/admin/content/translation_add_form_fields.html.twig b/src/bundle/Resources/views/themes/admin/content/translation_add_form_fields.html.twig
index 0df1e5ab12..78d44c294d 100644
--- a/src/bundle/Resources/views/themes/admin/content/translation_add_form_fields.html.twig
+++ b/src/bundle/Resources/views/themes/admin/content/translation_add_form_fields.html.twig
@@ -1,10 +1,18 @@
 {% extends '@ibexadesign/ui/form_fields.html.twig' %}
 
 {% block radio_widget %}
-    {% set attr = attr|merge({'class': (attr.class|default('') ~ ' ibexa-translation__input')|trim}) %}
+    {% set component_attr = attr|merge({'class': (attr.class|default('') ~ ' ibexa-translation__input')|trim}) %}
     <div class="radio ibexa-translation__input-wrapper">
         <label class="ibexa-translation__label">
-            {{ parent() }}
+            <twig:ibexa:radio_button:input
+                id="{{ id }}"
+                name="{{ full_name }}"
+                :checked="checked"
+                :disabled="disabled"
+                :required="required"
+                value="{{ (value is defined ? value : '') ~ '' }}"
+                {{ ...component_attr }}
+            />
             <svg class="ibexa-icon">
                 <use xlink:href="{{ ibexa_icon_path('checkmark') }}"></use>
             </svg>
diff --git a/src/bundle/Resources/views/themes/admin/content_type/field_types.html.twig b/src/bundle/Resources/views/themes/admin/content_type/field_types.html.twig
index 8f3a3c9df7..7c7cc36e46 100644
--- a/src/bundle/Resources/views/themes/admin/content_type/field_types.html.twig
+++ b/src/bundle/Resources/views/themes/admin/content_type/field_types.html.twig
@@ -186,9 +186,10 @@
             data-next-option-id="{{ form.options.vars.value is empty ? 0 : max(form.options.vars.value|keys) + 1 }}">
             {% for option in form.options %}
                 <li class="ibexa_selection-settings-option-value ibexa-selection-table-row mb-2 d-flex align-items-center">
-                    <input
-                        type="checkbox"
-                        class="ibexa-input ibexa-input--checkbox ibexa_selection-settings-option-checkbox ibexa-selection-table-checkbox">
+                    <twig:ibexa:checkbox:input
+                        name="{{ 'selection-option-checkbox-' ~ loop.index }}"
+                        inputClass="ibexa_selection-settings-option-checkbox ibexa-selection-table-checkbox"
+                    />
                     {{ form_errors(option) }}
                     {{ form_widget(option, { 'attr': { 'class': 'form-control ml-1 mb-0'}}) }}
                 </li>
@@ -199,7 +200,10 @@
             data-ibexa_selection-option-input-name="{{ form.options.vars.prototype.vars.full_name }}"
             data-ibexa_selection-option-input-id="{{ form.options.vars.prototype.vars.id }}">
             <li class="ibexa_selection-settings-option-value ibexa-selection-table-row mb-2 d-flex align-items-center">
-                <input type="checkbox" class="ibexa-input ibexa-input--checkbox ibexa_selection-settings-option-checkbox ibexa-selection-table-checkbox">
+                <twig:ibexa:checkbox:input
+                    name="selection-option-checkbox-prototype"
+                    inputClass="ibexa_selection-settings-option-checkbox ibexa-selection-table-checkbox"
+                />
                 {{ form_widget(form.options.vars.prototype, { 'attr': { 'class': 'form-control ml-1 mb-0'}}) }}
             </li>
         </script>
diff --git a/src/bundle/Resources/views/themes/admin/language/index.html.twig b/src/bundle/Resources/views/themes/admin/language/index.html.twig
index 5c7ac32078..608fa21844 100644
--- a/src/bundle/Resources/views/themes/admin/language/index.html.twig
+++ b/src/bundle/Resources/views/themes/admin/language/index.html.twig
@@ -60,13 +60,13 @@
 {% block content %}
     {% set enable_checkbox_raw %}
         <div class="form-check">
-            <input
-                type="checkbox"
+            <twig:ibexa:checkbox:input
+                name="{{ 'language-enabled-' ~ language.id }}"
+                inputClass="ibexa-language-status-checkbox form-check-input"
                 title="{{ language.enabled ? 'language.enabled'|trans|desc('Enabled') : 'language.disabled'|trans|desc('Disabled') }}"
-                class="ibexa-input ibexa-input--checkbox form-check-input"
-                disabled
-                {% if language.enabled %}checked{% endif %}
-            >
+                :disabled="true"
+                :checked="language.enabled"
+            />
         </div>
     {% endset %}
     {% set language_items = [
diff --git a/src/bundle/Resources/views/themes/admin/language/list.html.twig b/src/bundle/Resources/views/themes/admin/language/list.html.twig
index 52d1deda3c..e854db788f 100644
--- a/src/bundle/Resources/views/themes/admin/language/list.html.twig
+++ b/src/bundle/Resources/views/themes/admin/language/list.html.twig
@@ -80,13 +80,13 @@
 
             {% set col_raw %}
                 <div class="form-check">
-                    <input
-                        type="checkbox"
+                    <twig:ibexa:checkbox:input
+                        name="{{ 'language-enabled-' ~ language.id }}"
+                        inputClass="ibexa-language-status-checkbox form-check-input"
                         title="{{ language.enabled ? 'language.enabled'|trans|desc('Enabled')  : 'language.disabled'|trans|desc('Disabled')  }}"
-                        class="ibexa-input ibexa-input--checkbox form-check-input"
-                        disabled
-                        {% if language.enabled %}checked{% endif %}
-                    >
+                        :disabled="true"
+                        :checked="language.enabled"
+                    />
                 </div>
             {% endset %}
             {% set body_row_cols = body_row_cols|merge([{
diff --git a/src/bundle/Resources/views/themes/admin/trash/list.html.twig b/src/bundle/Resources/views/themes/admin/trash/list.html.twig
index 2aa53dbe29..51d7c8a4cd 100644
--- a/src/bundle/Resources/views/themes/admin/trash/list.html.twig
+++ b/src/bundle/Resources/views/themes/admin/trash/list.html.twig
@@ -129,7 +129,7 @@
                     <div class="form-check">
                         {{ form_widget(form, { attr: {
                             'data-is-parent-in-trash': is_parent_in_trash ? '1': '0',
-                            class: 'ibexa-input ibexa-input--checkbox  form-check-input'
+                            class: 'ids-input ids-input--checkbox'
                         }}) }}
                     </div>
                 {% endset %}
diff --git a/src/bundle/Resources/views/themes/admin/ui/component/dropdown/dropdown_item.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/dropdown/dropdown_item.html.twig
index 2e8ed6dac9..c5eeb0c030 100644
--- a/src/bundle/Resources/views/themes/admin/ui/component/dropdown/dropdown_item.html.twig
+++ b/src/bundle/Resources/views/themes/admin/ui/component/dropdown/dropdown_item.html.twig
@@ -23,7 +23,11 @@
             {% if is_selected %}ibexa-dropdown__item--selected{% endif %}"
     >
         {% if multiple is defined and multiple %}
-            <input type="checkbox" name="dropdown-checkbox" class="ibexa-input ibexa-input--checkbox" {% if is_selected %}checked{% endif %} />
+            <twig:ibexa:checkbox:input
+                name="dropdown-checkbox"
+                inputClass="ibexa-dropdown__item-checkbox"
+                :checked="is_selected"
+            />
         {% endif %}
         {% if icon is defined and icon != '' %}
             <svg class="ibexa-icon ibexa-icon--small-medium {{ icon_class|default('') }}">
diff --git a/src/bundle/Resources/views/themes/admin/ui/component/table/table_head_cell.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/table/table_head_cell.html.twig
index 0712156e72..5ae383acfb 100644
--- a/src/bundle/Resources/views/themes/admin/ui/component/table/table_head_cell.html.twig
+++ b/src/bundle/Resources/views/themes/admin/ui/component/table/table_head_cell.html.twig
@@ -13,10 +13,11 @@
     {%- block content -%}
         {%- if has_checkbox|default(false) -%}
             <div class="ibexa-table__header-cell-checkbox-wrapper">
-                <input
-                    class="ibexa-input ibexa-input--checkbox ibexa-table__header-cell-checkbox
+                <twig:ibexa:checkbox:input
+                    name="{{ attr.name|default('table-header-checkbox') }}"
+                    inputClass="ibexa-table__header-cell-checkbox
                         {%- if is_custom_bulk|default(false) %} ibexa-table__header-cell-checkbox--custom-init{%- endif -%}"
-                    type="checkbox">
+                />
             </div>
         {%- else -%}
             <span
diff --git a/src/bundle/Resources/views/themes/admin/ui/field_type/edit/binary_base_fields.html.twig b/src/bundle/Resources/views/themes/admin/ui/field_type/edit/binary_base_fields.html.twig
index 6c5b21d9ee..9c23e338c9 100644
--- a/src/bundle/Resources/views/themes/admin/ui/field_type/edit/binary_base_fields.html.twig
+++ b/src/bundle/Resources/views/themes/admin/ui/field_type/edit/binary_base_fields.html.twig
@@ -1,7 +1,14 @@
 {% block checkbox_row %}
     <div class="ibexa-field-edit-preview__info ibexa-field-edit-preview__info--{{ name }}">
         <div class="ibexa-field-edit-preview__input-wrapper ibexa-field-edit-preview__input-wrapper--checkbox-input">
-            <input class="ibexa-input ibexa-input--checkbox" type="checkbox" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %}>
+            <twig:ibexa:checkbox:input
+                name="{{ full_name }}"
+                inputClass="ibexa-field-edit-preview__checkbox"
+                value="{{ value|default('') ~ '' }}"
+                :checked="checked"
+                :disabled="disabled"
+                :required="required"
+            />
             <span class="ibexa-data-source__label-text">{{ translation_domain is same as(false) ? label : label|trans({}, translation_domain) }}</span>
         </div>
     </div>
@@ -23,4 +30,3 @@
         </div>
     </div>
 {% endblock %}
-
diff --git a/src/bundle/Resources/views/themes/admin/ui/field_type/edit/ibexa_author.html.twig b/src/bundle/Resources/views/themes/admin/ui/field_type/edit/ibexa_author.html.twig
index e7c79d7343..ac41b62722 100644
--- a/src/bundle/Resources/views/themes/admin/ui/field_type/edit/ibexa_author.html.twig
+++ b/src/bundle/Resources/views/themes/admin/ui/field_type/edit/ibexa_author.html.twig
@@ -50,11 +50,11 @@
     <div class="ibexa-data-source__author form-row">
         {{- form_widget(form.id) -}}
         <div class="ibexa-data-source__checkbox">
-            <input
-                type="checkbox"
-                class="ibexa-input ibexa-input--checkbox"
-                {{ readonly|default(false) ? 'disabled' }}
-             />
+            <twig:ibexa:checkbox:input
+                name="{{ form.vars.id ~ '_author_checkbox' }}"
+                inputClass="ibexa-data-source__author-checkbox"
+                :disabled="readonly|default(false)"
+            />
         </div>
         {{- form_row(form.name, { label_wrapper_attr: { 'hidden': 'hidden' }, attr: { readonly: readonly }}) -}}
         {{- form_row(form.email, { label_wrapper_attr: { 'hidden': 'hidden' }, attr: {'class': 'ibexa-input--text', readonly: readonly }}) -}}
diff --git a/src/bundle/Resources/views/themes/admin/ui/field_type/edit/ibexa_boolean.html.twig b/src/bundle/Resources/views/themes/admin/ui/field_type/edit/ibexa_boolean.html.twig
index c6a286b4f7..930734b00f 100644
--- a/src/bundle/Resources/views/themes/admin/ui/field_type/edit/ibexa_boolean.html.twig
+++ b/src/bundle/Resources/views/themes/admin/ui/field_type/edit/ibexa_boolean.html.twig
@@ -1,4 +1,4 @@
-{% use '@ibexadesign/ui/form_fields/toggle_widget.html.twig' %}
+{% use '@ibexadesign/ui/form_fields/toggle_widget_ds.html.twig' %}
 
 {% block ezplatform_fieldtype_ibexa_boolean_label %}
     {{ block('form_label') }}
diff --git a/src/bundle/Resources/views/themes/admin/ui/field_type/edit/relation_base.html.twig b/src/bundle/Resources/views/themes/admin/ui/field_type/edit/relation_base.html.twig
index 97a9bb7939..ab4f20f12d 100644
--- a/src/bundle/Resources/views/themes/admin/ui/field_type/edit/relation_base.html.twig
+++ b/src/bundle/Resources/views/themes/admin/ui/field_type/edit/relation_base.html.twig
@@ -22,7 +22,7 @@
     {% set col_raw_checkbox_template %}
         <input
             type="checkbox"
-            class="ibexa-input ibexa-input--checkbox"
+            class="ids-input ids-input--checkbox ibexa-relations__checkbox"
             value="{{ '{{ content_id }}' }}"
             {{ readonly ? 'disabled' }}
         >
@@ -111,7 +111,7 @@
                 {% set col_raw_checkbox %}
                     <input
                         type="checkbox"
-                        class="ibexa-input ibexa-input--checkbox"
+                        class="ids-input ids-input--checkbox ibexa-relations__checkbox"
                         value="{{ relation.contentInfo.id }}"
                         {{ readonly ? 'disabled' }}
                     >
diff --git a/src/bundle/Resources/views/themes/admin/ui/form_fields.html.twig b/src/bundle/Resources/views/themes/admin/ui/form_fields.html.twig
index 91a7092d11..ac7db64eb6 100644
--- a/src/bundle/Resources/views/themes/admin/ui/form_fields.html.twig
+++ b/src/bundle/Resources/views/themes/admin/ui/form_fields.html.twig
@@ -1,6 +1,6 @@
 {% extends 'bootstrap_5_layout.html.twig' %}
 
-{% use '@ibexadesign/ui/form_fields/toggle_widget.html.twig' %}
+{% use '@ibexadesign/ui/form_fields/toggle_widget_ds.html.twig' %}
 {% use '@ibexadesign/ui/form_fields/dropdown_widget.html.twig' %}
 
 {%- block button_widget -%}
@@ -148,17 +148,51 @@
 {%- endblock -%}
 
 {%- block checkbox_widget -%}
-    {%- set attr = attr|merge({class: 'ibexa-input ibexa-input--checkbox ' ~ attr.class|default('') }) -%}
+    {%- set attr_class = attr.class|default('') -%}
+    {%- if 'btn-check' not in attr_class -%}
+        {%- set attr_class = 'ids-input ids-input--checkbox form-check-input ' ~ attr_class -%}
+    {%- else -%}
+        {%- set attr_class = 'ids-input ids-input--checkbox ' ~ attr_class -%}
+    {%- endif -%}
+    {%- set attr = attr|merge({class: attr_class|trim }) -%}
     {{ parent() }}
 {%- endblock -%}
 
 {%- block radio_widget -%}
-    {%- set attr = attr|merge({class: 'ibexa-input ibexa-input--radio ' ~ attr.class|default('') }) -%}
-    {{ parent() }}
+    {%- set attr_class = attr.class|default('') -%}
+    {%- set row_class = '' -%}
+    {%- if 'btn-check' not in attr_class -%}
+        {%- set attr_class = attr_class ~ ' form-check-input' -%}
+        {%- set row_class = 'form-check' -%}
+    {%- endif -%}
+    {%- set parent_label_class = parent_label_class|default(label_attr.class|default('')) -%}
+    {%- if 'radio-inline' in parent_label_class -%}
+        {%- set row_class = row_class ~ ' form-check-inline' -%}
+    {%- endif -%}
+    {%- set component_attr = attr|merge({ class: attr_class|trim }) -%}
+    {%- if row_class is not empty -%}
+        <div class="{{ row_class }}">
+    {%- endif -%}
+    {{- form_label(form, null, { widget: block('radio_widget_input_ds') }) -}}
+    {%- if row_class is not empty -%}
+        </div>
+    {%- endif -%}
+{%- endblock -%}
+
+{%- block radio_widget_input_ds -%}
+    <twig:ibexa:radio_button:input
+        id="{{ id }}"
+        name="{{ full_name }}"
+        :checked="checked"
+        :disabled="disabled"
+        :required="required"
+        value="{{ (value is defined ? value : '') ~ '' }}"
+        {{ ...component_attr }}
+    />
 {%- endblock -%}
 
 {%- block trash_item_checkbox_widget -%}
-    <input type="checkbox" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} />
+    <input type="checkbox" class="ids-input ids-input--checkbox form-check-input" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} />
 {%- endblock -%}
 
 {%- block _trash_item_restore_restore_widget -%}
@@ -504,7 +538,7 @@
 {%- endblock %}
 
 {% block content_type_meta_field_definition_enabled_row -%}
-    {% use '@ibexadesign/ui/form_fields/toggle_widget.html.twig' %}
+    {% use '@ibexadesign/ui/form_fields/toggle_widget_ds.html.twig' %}
 
     <div class="ibexa-content-type-edit__form-field ibexa-form-field form-group">
         {{ block('form_label') }}
diff --git a/src/bundle/Resources/views/themes/admin/ui/form_fields/toggle_widget_ds.html.twig b/src/bundle/Resources/views/themes/admin/ui/form_fields/toggle_widget_ds.html.twig
new file mode 100644
index 0000000000..456d0f3d26
--- /dev/null
+++ b/src/bundle/Resources/views/themes/admin/ui/form_fields/toggle_widget_ds.html.twig
@@ -0,0 +1,40 @@
+{%- block toggle_widget -%}
+    {% set default_label_on = 'toggle_widget.label.on'|trans|desc('On') %}
+    {% set default_label_off = 'toggle_widget.label.off'|trans|desc('Off') %}
+    {% set field_type = block_prefixes[1]|default('choice') %}
+    {% set attr = attr|default({}) %}
+    {% set is_disabled = disabled|default(false) or attr.readonly|default(false) %}
+
+    {% if checked|default(false) %}
+        {% set attr = attr|merge({ 'checked': 'checked' }) %}
+    {% endif %}
+    {% if value is defined %}
+        {% set attr = attr|merge({ 'value': value ~ '' }) %}
+    {% endif %}
+
+    {% set input_content %}
+        {% if custom_inputs is defined %}
+            {{ custom_inputs }}
+        {% elseif field_type == 'choice' %}
+            {{ block('choice_widget') }}
+        {% else %}
+            <input type="checkbox" {% with attr %}{{ block('widget_attributes') }}{% endwith %} />
+        {% endif %}
+    {% endset %}
+
+    <twig:ibexa:toggle_button:input
+        :id="id"
+        name="{{ full_name }}"
+        :checked="checked|default(false)"
+        :disabled="is_disabled"
+        :required="required|default(false)"
+        value="{{ value is defined ? value ~ '' : '' }}"
+        size="{{ small|default(false) ? 'small' : 'medium' }}"
+        onLabel="{{ label_on|default(default_label_on) }}"
+        offLabel="{{ label_off|default(default_label_off) }}"
+    >
+        <twig:block name="input">
+            {{ input_content|raw }}
+        </twig:block>
+    </twig:ibexa:toggle_button:input>
+{%- endblock -%}
diff --git a/src/bundle/ui-dev/src/modules/common/dropdown/dropdown.js b/src/bundle/ui-dev/src/modules/common/dropdown/dropdown.js
index e913b9e104..afe558613a 100644
--- a/src/bundle/ui-dev/src/modules/common/dropdown/dropdown.js
+++ b/src/bundle/ui-dev/src/modules/common/dropdown/dropdown.js
@@ -2,6 +2,8 @@ import React, { useState, useEffect, useRef, useLayoutEffect } from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 
+import { CheckboxInput } from '@ids-components/components/Checkbox';
+
 import { createCssClassNames } from '../../common/helpers/css.class.names';
 import Icon from '../../common/icon/icon';
 import { getTranslator } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/context.helper';
@@ -83,7 +85,11 @@ const Dropdown = ({
                 }}
             >
                 {!single && (
-                    <input type="checkbox" className="ibexa-input ibexa-input--checkbox" checked={isItemSelected} onChange={() => {}} />
+                    <CheckboxInput
+                        className="ids-input ids-input--checkbox ibexa-dropdown__item-checkbox"
+                        checked={isItemSelected}
+                        onChange={() => {}}
+                    />
                 )}
                 <span className="ibexa-dropdown__item-label">{item.label}</span>
                 {single && (
diff --git a/src/bundle/ui-dev/src/modules/sub-items/components/table-view/table.view.component.js b/src/bundle/ui-dev/src/modules/sub-items/components/table-view/table.view.component.js
index 63173a2f1c..5ade196055 100644
--- a/src/bundle/ui-dev/src/modules/sub-items/components/table-view/table.view.component.js
+++ b/src/bundle/ui-dev/src/modules/sub-items/components/table-view/table.view.component.js
@@ -208,7 +208,7 @@ export default class TableViewComponent extends Component {
                             checked={anyLocationSelected}
                             onClick={this.selectAll} // We need onClick, because MS Edge does not trigger onChange when checkbox has indeterminate state. (ref: https://stackoverflow.com/a/33529024/5766602)
                             onChange={() => {}} // Dummy callback to not trigger React warning as we cannot use onChange on MS Edge
-                            className="ibexa-input ibexa-input--checkbox ibexa-table__header-cell-checkbox ibexa-table__header-cell-checkbox--custom-init"
+                            className="ids-input ids-input--checkbox ibexa-table__header-cell-checkbox ibexa-table__header-cell-checkbox--custom-init"
                         />
                     </th>
                     {this.renderBasicColumnsHeader()}
diff --git a/src/bundle/ui-dev/src/modules/sub-items/components/table-view/table.view.item.component.js b/src/bundle/ui-dev/src/modules/sub-items/components/table-view/table.view.item.component.js
index 76087cc155..4ec5c7f32d 100644
--- a/src/bundle/ui-dev/src/modules/sub-items/components/table-view/table.view.item.component.js
+++ b/src/bundle/ui-dev/src/modules/sub-items/components/table-view/table.view.item.component.js
@@ -1,6 +1,8 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 
+import { CheckboxInput } from '@ids-components/components/Checkbox';
+
 import { getTranslator } from '@ibexa-admin-ui-helpers/context.helper';
 import { getContentTypeIconUrl } from '@ibexa-admin-ui-helpers/content.type.helper';
 import { formatShortDateTime } from '@ibexa-admin-ui-helpers/timezone.helper';
@@ -420,7 +422,7 @@ export default class TableViewItemComponent extends PureComponent {
     }
 
     componentDidMount() {
-        parseCheckbox('.c-table-view-item__cell .ibexa-input--checkbox', 'c-table-view-item--active');
+        parseCheckbox('.c-table-view-item__cell .c-table-view-item__checkbox', 'c-table-view-item--active');
     }
 
     render() {
@@ -437,9 +439,8 @@ export default class TableViewItemComponent extends PureComponent {
         return (
             <tr className="ibexa-table__row c-table-view-item">
                 <td className="ibexa-table__cell c-table-view-item__cell c-table-view-item__cell--checkbox">
-                    <input
-                        type="checkbox"
-                        className="ibexa-input ibexa-input--checkbox"
+                    <CheckboxInput
+                        className="ids-input ids-input--checkbox c-table-view-item__checkbox"
                         checked={isSelected}
                         onChange={this.onSelectCheckboxChange}
                     />
diff --git a/src/bundle/ui-dev/src/modules/sub-items/components/three-state-checkbox/three.state.checkbox.component.js b/src/bundle/ui-dev/src/modules/sub-items/components/three-state-checkbox/three.state.checkbox.component.js
index 6eb85900f4..27cb1734e5 100644
--- a/src/bundle/ui-dev/src/modules/sub-items/components/three-state-checkbox/three.state.checkbox.component.js
+++ b/src/bundle/ui-dev/src/modules/sub-items/components/three-state-checkbox/three.state.checkbox.component.js
@@ -1,16 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import { CheckboxInput } from '@ids-components/components/Checkbox';
+
 const ThreeStateCheckboxComponent = ({ indeterminate = false, ...restOfProps }) => (
-    <input
-        {...restOfProps}
-        type="checkbox"
-        ref={(input) => {
-            if (input) {
-                input.indeterminate = indeterminate;
-            }
-        }}
-    />
+    <CheckboxInput {...restOfProps} indeterminate={indeterminate} />
 );
 
 ThreeStateCheckboxComponent.propTypes = {
diff --git a/src/bundle/ui-dev/src/modules/sub-items/components/view-columns-toggler/view.columns.toggler.list.element.js b/src/bundle/ui-dev/src/modules/sub-items/components/view-columns-toggler/view.columns.toggler.list.element.js
index 9a893e85e9..5fb7f1bbb8 100644
--- a/src/bundle/ui-dev/src/modules/sub-items/components/view-columns-toggler/view.columns.toggler.list.element.js
+++ b/src/bundle/ui-dev/src/modules/sub-items/components/view-columns-toggler/view.columns.toggler.list.element.js
@@ -1,13 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import { CheckboxInput } from '@ids-components/components/Checkbox';
+
 const ViewColumnsTogglerListElement = ({ label, isColumnVisible, toggleColumnVisibility, columnKey }) => {
     return (
         <li className="ibexa-popup-menu__item c-view-columns-toggler-list-element">
             <button className="ibexa-popup-menu__item-content" type="button" onClick={() => toggleColumnVisibility(columnKey)}>
-                <input
-                    className="form-check-input ibexa-input ibexa-input--checkbox"
-                    type="checkbox"
+                <CheckboxInput
+                    className="ids-input ids-input--checkbox c-view-columns-toggler-list-element__checkbox"
                     checked={isColumnVisible}
                     readOnly={true}
                 />
diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/components/content-type-selector/content.type.selector.js b/src/bundle/ui-dev/src/modules/universal-discovery/components/content-type-selector/content.type.selector.js
index 1be5094598..6b7a73f881 100644
--- a/src/bundle/ui-dev/src/modules/universal-discovery/components/content-type-selector/content.type.selector.js
+++ b/src/bundle/ui-dev/src/modules/universal-discovery/components/content-type-selector/content.type.selector.js
@@ -1,5 +1,7 @@
 import React, { useContext } from 'react';
 
+import { CheckboxInput } from '@ids-components/components/Checkbox';
+
 import { SelectedContentTypesContext } from '../search/search';
 import { AllowedContentTypesContext } from '../../universal.discovery.module';
 
@@ -11,8 +13,8 @@ const ContentTypeSelector = () => {
     const { contentTypes: contentTypesMap } = adminUiConfig;
     const allowedContentTypes = useContext(AllowedContentTypesContext);
     const [selectedContentTypes, dispatchSelectedContentTypesAction] = useContext(SelectedContentTypesContext);
-    const handleContentTypeSelect = ({ nativeEvent }) => {
-        const { contentTypeIdentifier } = nativeEvent.target.dataset;
+    const handleContentTypeSelect = (_checked, event) => {
+        const { contentTypeIdentifier } = event.currentTarget.dataset;
         const action = { contentTypeIdentifier };
 
         action.type = selectedContentTypes.includes(contentTypeIdentifier) ? 'REMOVE_CONTENT_TYPE' : 'ADD_CONTENT_TYPE';
@@ -44,10 +46,9 @@ const ContentTypeSelector = () => {
                                 return (
                                     <li key={contentType.identifier} className="c-content-type-selector-list__item">
                                         <div className="form-check form-check-inline">
-                                            <input
-                                                type="checkbox"
+                                            <CheckboxInput
                                                 id={`ibexa-search-content-type-${contentType.identifier}`}
-                                                className="ibexa-input ibexa-input--checkbox form-check-input"
+                                                className="ids-input ids-input--checkbox c-content-type-selector-list__checkbox"
                                                 value={contentType.identifier}
                                                 data-content-type-identifier={contentType.identifier}
                                                 onChange={handleContentTypeSelect}
diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/components/toggle-selection/toggle.item.selection.js b/src/bundle/ui-dev/src/modules/universal-discovery/components/toggle-selection/toggle.item.selection.js
index 6c1f228683..22ab04b50f 100644
--- a/src/bundle/ui-dev/src/modules/universal-discovery/components/toggle-selection/toggle.item.selection.js
+++ b/src/bundle/ui-dev/src/modules/universal-discovery/components/toggle-selection/toggle.item.selection.js
@@ -1,6 +1,8 @@
 import React, { useContext, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 
+import { CheckboxInput } from '@ids-components/components/Checkbox';
+
 import { createCssClassNames } from '../../../common/helpers/css.class.names';
 import { MultipleConfigContext, SelectedItemsContext } from '../../universal.discovery.module';
 
@@ -11,9 +13,9 @@ const ToggleItemSelection = ({ item, isDisabled = false, isPreselected = false,
     const isSelected = selectedItems.some((selectedItem) => selectedItem.type === item.type && selectedItem.id === item.id);
     const isSelectionBlocked = multipleItemsLimit !== 0 && selectedItems.length >= multipleItemsLimit && !isSelected;
     const className = createCssClassNames({
-        'c-udw-toggle-selection ibexa-input': true,
-        'ibexa-input--checkbox': multiple,
-        'ibexa-input--radio': !multiple,
+        'c-udw-toggle-selection ids-input': true,
+        'ids-input--checkbox': multiple,
+        'ids-input--radio': !multiple,
         'c-udw-toggle-selection--hidden': isHidden,
     });
     const inputType = multiple ? 'checkbox' : 'radio';
@@ -26,6 +28,19 @@ const ToggleItemSelection = ({ item, isDisabled = false, isPreselected = false,
         inputRef.current.indeterminate = isIndeterminate;
     }, [isIndeterminate]);
 
+    if (multiple) {
+        return (
+            <CheckboxInput
+                ref={inputRef}
+                className={className}
+                checked={isPreselected || isSelected}
+                disabled={isSelectionBlocked || isDisabled || isHidden}
+                indeterminate={isIndeterminate}
+                readOnly={true}
+            />
+        );
+    }
+
     return (
         <input
             ref={inputRef}
diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/components/toggle-selection/toggle.selection.js b/src/bundle/ui-dev/src/modules/universal-discovery/components/toggle-selection/toggle.selection.js
index 740bc2798f..64544ef946 100644
--- a/src/bundle/ui-dev/src/modules/universal-discovery/components/toggle-selection/toggle.selection.js
+++ b/src/bundle/ui-dev/src/modules/universal-discovery/components/toggle-selection/toggle.selection.js
@@ -1,6 +1,8 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 
+import { CheckboxInput } from '@ids-components/components/Checkbox';
+
 import { createCssClassNames } from '../../../common/helpers/css.class.names';
 import { SelectedLocationsContext } from '../../universal.discovery.module';
 
@@ -8,8 +10,7 @@ const ToggleSelection = ({ multiple, location, isDisabled = false, isHidden = fa
     const [selectedLocations, dispatchSelectedLocationsAction] = useContext(SelectedLocationsContext);
     const isSelected = selectedLocations.some((selectedItem) => selectedItem.location.id === location.id);
     const className = createCssClassNames({
-        'c-udw-toggle-selection ibexa-input': true,
-        'ibexa-input--checkbox': multiple,
+        'c-udw-toggle-selection ids-input ids-input--checkbox': true,
         'c-udw-toggle-selection--hidden': isHidden,
     });
     const toggleSelection = () => {
@@ -22,9 +23,7 @@ const ToggleSelection = ({ multiple, location, isDisabled = false, isHidden = fa
         return null;
     }
 
-    return (
-        <input type="checkbox" className={className} checked={isSelected} disabled={isDisabled || isHidden} onChange={toggleSelection} />
-    );
+    return <CheckboxInput className={className} checked={isSelected} disabled={isDisabled || isHidden} onChange={toggleSelection} />;
 };
 
 ToggleSelection.propTypes = {
diff --git a/src/lib/Behat/Component/ContentActionsMenu.php b/src/lib/Behat/Component/ContentActionsMenu.php
index edaab7b13e..e2876707f8 100644
--- a/src/lib/Behat/Component/ContentActionsMenu.php
+++ b/src/lib/Behat/Component/ContentActionsMenu.php
@@ -11,6 +11,7 @@
 use Ibexa\Behat\Browser\Component\Component;
 use Ibexa\Behat\Browser\Element\Action\MouseOverAndClick;
 use Ibexa\Behat\Browser\Element\Criterion\ElementTextCriterion;
+use Ibexa\Behat\Browser\Element\ElementCollectionInterface;
 use Ibexa\Behat\Browser\Locator\VisibleCSSLocator;
 
 final class ContentActionsMenu extends Component
@@ -28,9 +29,7 @@ public function clickButton(string $buttonName, ?string $groupName = null): void
 
     private function clickStandaloneButton(string $buttonName): void
     {
-        $buttons = $this->getHTMLPage()
-            ->findAll($this->getLocator('menuButton'))
-            ->filterBy(new ElementTextCriterion($buttonName));
+        $buttons = $this->getStandaloneButtons($buttonName);
 
         if ($buttons->any()) {
             $buttons->single()->execute(new MouseOverAndClick());
@@ -38,12 +37,24 @@ private function clickStandaloneButton(string $buttonName): void
             return;
         }
 
-        $this->getHTMLPage()->find($this->getLocator('moreButton'))->click();
+        $moreButtons = $this->getHTMLPage()->findAll($this->getLocator('moreButton'));
+        if (!$moreButtons->any()) {
+            throw new \RuntimeException(sprintf('Standalone action button "%s" was not found.', $buttonName));
+        }
+
+        $moreButtons->single()->click();
         $this->getHTMLPage()
             ->findAll($this->getLocator('expandedMenuButton'))
             ->getByCriterion(new ElementTextCriterion($buttonName))->click();
     }
 
+    private function getStandaloneButtons(string $buttonName): ElementCollectionInterface
+    {
+        return $this->getHTMLPage()
+            ->findAll($this->getLocator('menuButton'))
+            ->filterBy(new ElementTextCriterion($buttonName));
+    }
+
     private function clickButtonInGroup(string $groupName, string $buttonName): void
     {
         $group = $this->getHTMLPage()
@@ -116,7 +127,7 @@ protected function specifyLocators(): array
     {
         return [
             new VisibleCSSLocator('label', '.ibexa-btn__label'),
-            new VisibleCSSLocator('menuButton', '.ibexa-context-menu .ibexa-btn'),
+            new VisibleCSSLocator('menuButton', '.ibexa-context-menu .ibexa-btn, .ibexa-context-menu .ids-button'),
             new VisibleCSSLocator('button', '.ibexa-popup-menu__item-content'),
             new VisibleCSSLocator('toggle', '.ibexa-split-btn__toggle-btn '),
             new VisibleCSSLocator('splitButton', '.ibexa-split-btn'),
diff --git a/src/lib/Behat/Component/CreateUrlAliasModal.php b/src/lib/Behat/Component/CreateUrlAliasModal.php
index d971af4e56..0e615eb6fb 100644
--- a/src/lib/Behat/Component/CreateUrlAliasModal.php
+++ b/src/lib/Behat/Component/CreateUrlAliasModal.php
@@ -46,9 +46,9 @@ public function createNewUrlAlias(string $path, string $languageName, bool $redi
     private function setRedirectToggle(bool $shouldBeChecked): void
     {
         $toggle = $this->getHTMLPage()->find($this->getLocator('redirectToggle'));
-        $isChecked = $toggle->hasClass('ibexa-toggle--is-checked');
+        $isChecked = $toggle->hasClass('ids-toggle--checked');
         if ($shouldBeChecked !== $isChecked) {
-            $this->getHTMLPage()->find($this->getLocator('redirectToggle'))->click();
+            $this->getHTMLPage()->find(new VisibleCSSLocator('toggle', '.ibexa-custom-url-from__item .ids-toggle .ids-toggle__widget'))->click();
         }
     }
 
@@ -76,7 +76,7 @@ protected function specifyLocators(): array
             new VisibleCSSLocator('createButton', '#custom_url_add_add'),
             new VisibleCSSLocator('pathInput', '#custom_url_add_path'),
             new VisibleCSSLocator('languageDropdown', '.ibexa-custom-url-from__item .ibexa-dropdown__selection-info'),
-            new VisibleCSSLocator('redirectToggle', '.ibexa-custom-url-from__item .ibexa-toggle'),
+            new VisibleCSSLocator('redirectToggle', '.ibexa-custom-url-from__item .ids-toggle'),
         ];
     }
 }
diff --git a/src/lib/Behat/Component/DeleteContentDialog.php b/src/lib/Behat/Component/DeleteContentDialog.php
index ed27cd3b2f..26912eab00 100644
--- a/src/lib/Behat/Component/DeleteContentDialog.php
+++ b/src/lib/Behat/Component/DeleteContentDialog.php
@@ -20,7 +20,7 @@ public function confirmTrashing(): void
     public function specifyLocators(): array
     {
         return array_merge(parent::specifyLocators(), [
-            new VisibleCSSLocator('trashConfirmCheckbox', '.modal-content .ibexa-input--checkbox'),
+            new VisibleCSSLocator('trashConfirmCheckbox', '.modal-content .ids-input--checkbox'),
         ]);
     }
 }
diff --git a/src/lib/Behat/Component/Fields/Checkbox.php b/src/lib/Behat/Component/Fields/Checkbox.php
index a903c7f3ac..56c70164a5 100644
--- a/src/lib/Behat/Component/Fields/Checkbox.php
+++ b/src/lib/Behat/Component/Fields/Checkbox.php
@@ -68,9 +68,9 @@ public function getFieldTypeIdentifier(): string
     public function specifyLocators(): array
     {
         return [
-            new VisibleCSSLocator('fieldInput', '.ibexa-toggle__indicator'),
-            new VisibleCSSLocator('checkbox', '.ibexa-toggle__switcher'),
-            new VisibleCSSLocator('checked', 'ibexa-toggle--is-checked'),
+            new VisibleCSSLocator('fieldInput', '.ids-toggle__indicator'),
+            new VisibleCSSLocator('checkbox', '.ids-toggle__widget'),
+            new VisibleCSSLocator('checked', 'ids-toggle--checked'),
         ];
     }
 }
diff --git a/src/lib/Behat/Component/Fields/User.php b/src/lib/Behat/Component/Fields/User.php
index a7953c9041..929590a32b 100644
--- a/src/lib/Behat/Component/Fields/User.php
+++ b/src/lib/Behat/Component/Fields/User.php
@@ -89,14 +89,15 @@ protected function specifyLocators(): array
             new VisibleCSSLocator('password', '#ezplatform_content_forms_user_create_fieldsData_user_account_value_password_first,#ezplatform_content_forms_user_update_fieldsData_user_account_value_password_first'),
             new VisibleCSSLocator('confirmPassword', '#ezplatform_content_forms_user_create_fieldsData_user_account_value_password_second,#ezplatform_content_forms_user_update_fieldsData_user_account_value_password_second'),
             new VisibleCSSLocator('email', '#ezplatform_content_forms_user_create_fieldsData_user_account_value_email,#ezplatform_content_forms_user_update_fieldsData_user_account_value_email'),
-            new VisibleCSSLocator('buttonEnabled', '.ibexa-toggle--checkbox'),
-            new VisibleCSSLocator('buttonEnabledToggleConfirmation', '.ibexa-toggle--is-checked'),
+            new VisibleCSSLocator('buttonEnabled', '.ids-toggle__widget'),
+            new VisibleCSSLocator('buttonEnabledLabel', '.ids-toggle__label'),
+            new VisibleCSSLocator('buttonEnabledToggleConfirmation', '.ids-toggle--checked'),
         ];
     }
 
     private function setEnabledField(bool $enabled): void
     {
-        $isCurrentlyEnabled = $this->getHTMLPage()->find($this->parentLocator)->find($this->getLocator('buttonEnabled'))->getText() === 'On';
+        $isCurrentlyEnabled = $this->getHTMLPage()->find($this->parentLocator)->find($this->getLocator('buttonEnabledLabel'))->getText() === 'On';
         if ($isCurrentlyEnabled !== $enabled) {
             $script = sprintf("document.querySelector('%s %s').click()", $this->parentLocator->getSelector(), $this->getLocator('buttonEnabled')->getSelector());
             $this->getHTMLPage()->executeJavaScript($script);
diff --git a/src/lib/Behat/Component/IbexaDropdown.php b/src/lib/Behat/Component/IbexaDropdown.php
index c1fad443b2..d9150afc9a 100644
--- a/src/lib/Behat/Component/IbexaDropdown.php
+++ b/src/lib/Behat/Component/IbexaDropdown.php
@@ -10,7 +10,6 @@
 
 use Ibexa\Behat\Browser\Component\Component;
 use Ibexa\Behat\Browser\Element\Condition\ElementExistsCondition;
-use Ibexa\Behat\Browser\Element\Condition\ElementTransitionHasEndedCondition;
 use Ibexa\Behat\Browser\Element\Criterion\ElementTextCriterion;
 use Ibexa\Behat\Browser\Element\Criterion\ElementTextFragmentCriterion;
 use Ibexa\Behat\Browser\Locator\VisibleCSSLocator;
@@ -21,7 +20,7 @@ public function verifyIsLoaded(): void
     {
         $this->getHTMLPage()
             ->setTimeout(5)
-            ->waitUntilCondition(new ElementTransitionHasEndedCondition($this->getHTMLPage(), $this->getLocator('isIbexaDropdownVisible')));
+            ->waitUntilCondition(new ElementExistsCondition($this->getHTMLPage(), $this->getLocator('isIbexaDropdownVisible')));
     }
 
     protected function specifyLocators(): array
diff --git a/src/lib/Behat/Component/UniversalDiscoveryWidget.php b/src/lib/Behat/Component/UniversalDiscoveryWidget.php
index 8a133284ec..4ce85b1d6f 100644
--- a/src/lib/Behat/Component/UniversalDiscoveryWidget.php
+++ b/src/lib/Behat/Component/UniversalDiscoveryWidget.php
@@ -222,7 +222,7 @@ protected function specifyLocators(): array
             new CSSLocator('categoryTabSelector', '.c-tab-selector__item'),
             new CSSLocator('selectedTab', '.c-tab-selector__item--selected'),
             new VisibleCSSLocator('contentIframe', '.c-content-edit__iframe, .m-content-create__iframe'),
-            new VisibleCSSLocator('multiselect', '.m-ud .c-finder-leaf .ibexa-input--checkbox'),
+            new VisibleCSSLocator('multiselect', '.m-ud .c-finder-leaf .ids-input--checkbox'),
             new VisibleCSSLocator('selectedItemName', '.c-content-meta-preview__content-name'),
             new VisibleCSSLocator('previewImage', '.c-content-meta-preview__preview'),
             new VisibleCSSLocator('createNewButton', '.c-content-create-button__btn'),
diff --git a/src/lib/Behat/Component/UpperMenu.php b/src/lib/Behat/Component/UpperMenu.php
index e4363c903e..c4708dde07 100644
--- a/src/lib/Behat/Component/UpperMenu.php
+++ b/src/lib/Behat/Component/UpperMenu.php
@@ -65,6 +65,14 @@ public function setFocusMode(bool $expectedModeStatus): void
 
         if ($expectedModeStatus != $isEnabled) {
             $this->getHTMLPage()->find($this->getLocator('userFocusMode'))->click();
+
+            $this->getHTMLPage()->setTimeout(10)->waitUntil(function (): bool {
+                return !$this->getHTMLPage()->findAll($this->getLocator('userSettingsPopup'))->any();
+            }, 'Focus mode dropdown did not close after toggling');
+
+            $this->getHTMLPage()->setTimeout(10)->waitUntil(function () use ($expectedModeStatus): bool {
+                return $this->getHTMLPage()->findAll($this->getLocator('focusModeBadge'))->any() === $expectedModeStatus;
+            }, 'Focus mode state did not update after toggling');
         } else {
             $this->toggleUserDropdown();
         }
@@ -99,8 +107,8 @@ protected function specifyLocators(): array
             new VisibleCSSLocator('userSettingsPopup', '.ibexa-header-user-menu .ibexa-header-user-menu__popup-menu'),
             new VisibleCSSLocator('searchInput', '.ibexa-main-header #search_query'),
             new VisibleCSSLocator('searchButton', '.ibexa-main-header .ibexa-input-text-wrapper__action-btn--search'),
-            new VisibleCSSLocator('userFocusEnabled', '[name="focus_mode_change"] .ibexa-toggle__label--on'),
-            new VisibleCSSLocator('userFocusMode', '[name="focus_mode_change"] .ibexa-toggle__switcher'),
+            new VisibleCSSLocator('userFocusEnabled', '[name="focus_mode_change"] .ids-toggle--checked'),
+            new VisibleCSSLocator('userFocusMode', '[name="focus_mode_change"] .ids-toggle__widget'),
             new VisibleCSSLocator('focusModeBadge', '.ibexa-user-mode-badge'),
             new VisibleCSSLocator('siteDropdown', '.ibexa-preview-context-switch-form .ibexa-dropdown'),
             new VisibleCSSLocator('siteDropdownSelectedItem', '.ibexa-preview-context-switch-form .ibexa-dropdown li.ibexa-dropdown__selected-item:nth-of-type(1)'),
diff --git a/src/lib/Behat/Page/ContentTypeUpdatePage.php b/src/lib/Behat/Page/ContentTypeUpdatePage.php
index ec5e54673d..f6dfc13b5f 100644
--- a/src/lib/Behat/Page/ContentTypeUpdatePage.php
+++ b/src/lib/Behat/Page/ContentTypeUpdatePage.php
@@ -40,7 +40,7 @@ public function expandLastFieldDefinition(): void
 
         $this->getHTMLPage()->setTimeout(10)->waitUntil(function () use ($fieldDefinitionLocator): bool {
             $fieldDefinition = $this->getHTMLPage()->findAll($fieldDefinitionLocator)->last();
-            $fieldDefinition->click();
+            $fieldDefinition->find(new VisibleCSSLocator('collapseButton', 'button.ibexa-collapse__toggle-btn'))->click();
             $this->getHTMLPage()->setTimeout(3)->waitUntilCondition(
                 new ElementNotExistsCondition(
                     $fieldDefinition,
@@ -72,9 +72,9 @@ public function specifyLocators(): array
             new VisibleCSSLocator('contentTypeCategoryList', ' div.ibexa-content-type-edit__add-field-definitions-group > ul > li:nth-child(n):not(.ibexa-popup-menu__item-action--disabled)'),
             new VisibleCSSLocator('availableFieldLabelList', '.ibexa-available-field-types__list > li:not(.ibexa-available-field-type--hidden)'),
             new VisibleCSSLocator('workspace', '.ibexa-collapse__body-content'),
-            new VisibleCSSLocator('fieldDefinitionToggle', '.ibexa-collapse:nth-last-child(2) > div.ibexa-collapse__header > button:last-child:not([data-bs-target="#content_collapse"])'),
-            new VisibleCSSLocator('selectLaunchEditorMode', '.form-check .ibexa-input--radio'),
-            new VisibleCSSLocator('fieldDefinitionOpenContainer', '[data-collapsed="false"] .ibexa-content-type-edit__field-definition-content'),
+            new VisibleCSSLocator('fieldDefinitionToggle', '.ibexa-collapse__toggle-btn--title'),
+            new VisibleCSSLocator('selectLaunchEditorMode', '.form-check .ids-input--radio'),
+            new VisibleCSSLocator('fieldDefinitionOpenContainer', '.ibexa-collapse__body.show .ibexa-content-type-edit__field-definition-content'),
             new VisibleCSSLocator('selectBlocksDropdown', '.ibexa-page-select-items__toggler'),
             new VisibleCSSLocator('fieldDefinitionSearch', '.ibexa-available-field-types__sidebar-filter'),
         ]);
diff --git a/src/lib/Behat/Page/ContentViewPage.php b/src/lib/Behat/Page/ContentViewPage.php
index b1effcf6b5..95af41b099 100644
--- a/src/lib/Behat/Page/ContentViewPage.php
+++ b/src/lib/Behat/Page/ContentViewPage.php
@@ -296,7 +296,7 @@ protected function specifyLocators(): array
             new VisibleCSSLocator('addUrlAliasButton', '#ibexa-tab-location-view-urls [data-bs-target="#ibexa-modal--custom-url-alias"]'),
             new VisibleCSSLocator('customUrlAliasesTable', '#ibexa-tab-location-view-urls .ibexa-table'),
             new VisibleCSSLocator('alertTitle', '.ibexa-alert__title'),
-            new VisibleCSSLocator('selectHideMode', '.form-check .ibexa-input--radio'),
+            new VisibleCSSLocator('selectHideMode', '.form-check .ids-input--radio'),
             new VisibleCSSLocator('cancelScheduleButton', '.ibexa-btn--schedule-hide-cancel'),
         ];
     }
diff --git a/src/lib/Behat/Page/LanguagePage.php b/src/lib/Behat/Page/LanguagePage.php
index 15a8eaf8b0..f9654457f3 100644
--- a/src/lib/Behat/Page/LanguagePage.php
+++ b/src/lib/Behat/Page/LanguagePage.php
@@ -56,7 +56,7 @@ public function hasProperties(array $languageProperties): bool
             $hasEnabledField = $this
                 ->getHTMLPage()
                 ->find($this->getLocator('enabledField'))
-                ->getValue() === 'on';
+                ->hasAttribute('checked');
 
             $shouldHaveEnabledField = 'true' === $languageProperties['Enabled'];
             $hasExpectedEnabledFieldValue = $hasEnabledField === $shouldHaveEnabledField;
@@ -137,7 +137,7 @@ protected function specifyLocators(): array
         return [
             new VisibleCSSLocator('pageTitle', '.ibexa-page-title h1'),
             new VisibleCSSLocator('button', '.ibexa-btn'),
-            new VisibleCSSLocator('enabledField', '.ibexa-input--checkbox'),
+            new VisibleCSSLocator('enabledField', '.ibexa-language-status-checkbox'),
             new VisibleCSSLocator('languagePropertiesItem', '.ibexa-details__item'),
             new VisibleCSSLocator('languagePropertiesLabel', '.ibexa-details__item-label'),
             new VisibleCSSLocator('languagePropertiesValue', '.ibexa-details__item-content'),