diff --git a/components/checkbox/bem.js b/components/checkbox/bem.js
index e8dcc0e5ef3..8133e0f47a9 100644
--- a/components/checkbox/bem.js
+++ b/components/checkbox/bem.js
@@ -13,6 +13,7 @@ export const defaultArgs = {
 export const Checkbox = ({ checked = false, disabled = false }) =>
   `<input type="checkbox"${checked ? ' checked' : ''}${disabled ? ' disabled' : ''} class="${clsx(
     'utrecht-checkbox',
+    'utrecht-checkbox--html-input',
     checked && 'utrecht-checkbox--checked',
     disabled && 'utrecht-checkbox--disabled',
   )}">`;
diff --git a/components/radio-button/bem.js b/components/radio-button/bem.js
index a367d4390f0..ad1413dbf36 100644
--- a/components/radio-button/bem.js
+++ b/components/radio-button/bem.js
@@ -13,6 +13,7 @@ export const defaultArgs = {
 export const RadioButton = ({ checked = false, disabled = false }) =>
   `<input type="radio"${checked ? ' checked' : ''}${disabled ? ' disabled' : ''} class="${clsx(
     'utrecht-radio-button',
+    'utrecht-radio-button--html-input',
     checked && 'utrecht-radio-button--checked',
     disabled && 'utrecht-radio-button--disabled',
   )}">`;
diff --git a/components/select/bem.js b/components/select/bem.js
index 5d8e5209f5d..0476b714739 100644
--- a/components/select/bem.js
+++ b/components/select/bem.js
@@ -17,7 +17,7 @@ export const defaultArgs = {
 export const Select = ({ disabled = false, focus = false, invalid = false, options = [], required = false }) =>
   `<select${invalid ? ' aria-invalid="true"' : ''}${disabled ? ' disabled' : ''}${
     required ? ' required' : ''
-  } class="${clsx('utrecht-select', {
+  } class="${clsx('utrecht-select', 'utrecht-select--html-select', {
     'utrecht-select--disabled': disabled,
     'utrecht-select--focus': focus,
     'utrecht-select--focus-visible': focus,
diff --git a/components/textarea/bem.js b/components/textarea/bem.js
index e05d0394dcc..fee3f5cdb3d 100644
--- a/components/textarea/bem.js
+++ b/components/textarea/bem.js
@@ -23,6 +23,7 @@ export const TextArea = ({
 }) =>
   `<textarea class="${clsx(
     'utrecht-textarea',
+    'utrecht-textarea--html-textarea',
     disabled && 'utrecht-textarea--disabled',
     focus && 'utrecht-textarea--focus utrecht-textarea--focus-visible',
     hover && 'utrecht-textarea--hover',
diff --git a/components/textbox/bem.js b/components/textbox/bem.js
index 9fad49f2b7f..d4c0fd854e3 100644
--- a/components/textbox/bem.js
+++ b/components/textbox/bem.js
@@ -26,6 +26,7 @@ export const TextBox = ({
 }) =>
   `<input class="${clsx(
     'utrecht-textbox',
+    'utrecht-textbox--html-input',
     disabled && 'utrecht-textbox--disabled',
     focus && 'utrecht-textbox--focus utrecht-textbox--focus-visible',
     invalid && 'utrecht-textbox--invalid',