diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_forms.scss b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_forms.scss
new file mode 100644
index 00000000..e029efdf
--- /dev/null
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_forms.scss
@@ -0,0 +1,16 @@
+.form-field {
+ @apply border-gray-400 focus:border-gray-800 ring-0 focus:ring-0 mt-1 block w-full;
+
+ &--has-error {
+ @apply border-red-500;
+ }
+}
+
+.form-checkbox,
+.form-radio {
+ @apply border-gray-400 focus:border-gray-800 ring-0 focus:ring-0 text-ep-secondary sbw:text-sbw-secondary uch:text-uch-secondary h-4 w-4 ;
+
+ &--has-error {
+ @apply border-red-500;
+ }
+}
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main.scss b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main.scss
index 929ce373..eab1c4a3 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main.scss
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main.scss
@@ -20,6 +20,7 @@
@import "components/cookie-consent";
@import "components/calendar";
@import "components/datepicker";
+ @import "components/forms";
@import "components/herounit";
@import "components/lightbox";
@import "components/map";
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Checkbox.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Checkbox.html
index 6d86a835..a0ecd006 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Checkbox.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Checkbox.html
@@ -6,7 +6,8 @@
property="{element.identifier}"
id="{element.uniqueIdentifier}"
value="{element.properties.value}"
- class="border-gray-400 focus:border-gray-800 text-ep-secondary sbw:text-sbw-secondary uch:text-uch-secondary h-6 w-6"
+ class="form-checkbox"
+ errorClass="form-checkbox--has-error"
additionalAttributes="{formvh:translateElementProperty(element: element, property: 'fluidAdditionalAttributes')}"
/>
{formvh:translateElementProperty(element: element, property: 'label')}
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Email.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Email.html
index 59de8253..590dbdb6 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Email.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Email.html
@@ -5,8 +5,8 @@
type="email"
property="{element.identifier}"
id="{element.uniqueIdentifier}"
- class="border-gray-400 focus:border-gray-800 mt-1 block w-full"
- errorClass="{element.properties.elementErrorClassAttribute}"
+ class="form-field"
+ errorClass="form-field--has-error"
additionalAttributes="{formvh:translateElementProperty(element: element, property: 'fluidAdditionalAttributes')}"
/>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/LinkedCheckbox.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/LinkedCheckbox.html
index f969505c..3d524700 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/LinkedCheckbox.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/LinkedCheckbox.html
@@ -5,12 +5,14 @@
- {formvh:translateElementProperty(element: element, property: 'label') -> f:format.raw()} {formvh:translateElementProperty(element: element, property: 'linkText')}
+
+ {formvh:translateElementProperty(element: element, property: 'label') -> f:format.raw()} {formvh:translateElementProperty(element: element, property: 'linkText')}
+
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/MultiCheckbox.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/MultiCheckbox.html
index 1dc52a03..36858487 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/MultiCheckbox.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/MultiCheckbox.html
@@ -10,7 +10,7 @@
multiple="1"
id="{element.uniqueIdentifier}-{idIterator.index}"
value="{value}"
- class="border-gray-400 focus:border-gray-800 h-6 w-6"
+ class="form-checkbox"
additionalAttributes="{formvh:translateElementProperty(element: element, property: 'fluidAdditionalAttributes')}"
/>
{formvh:translateElementProperty(element: element, property: '{0: \'options\', 1: value}')}
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/MultiSelect.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/MultiSelect.html
index 15388af8..4d1440db 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/MultiSelect.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/MultiSelect.html
@@ -6,10 +6,10 @@
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Number.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Number.html
index 38357d52..f3237391 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Number.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Number.html
@@ -5,8 +5,8 @@
type="number"
property="{element.identifier}"
id="{element.uniqueIdentifier}"
- class="border-gray-400 focus:border-gray-800 mt-1 block w-full"
- errorClass="{element.properties.elementErrorClassAttribute}"
+ class="form-field"
+ errorClass="form-field--has-error"
additionalAttributes="{formvh:translateElementProperty(element: element, property: 'fluidAdditionalAttributes')}"
/>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/RadioButton.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/RadioButton.html
index d7483e31..c5d69ce8 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/RadioButton.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/RadioButton.html
@@ -9,8 +9,8 @@
property="{element.identifier}"
id="{element.uniqueIdentifier}-{idIterator.index}"
value="{value}"
- class="border-gray-400 focus:border-gray-800"
- errorClass="form-radio-error"
+ class="form-radio"
+ errorClass="form-radio--has-error"
additionalAttributes="{formvh:translateElementProperty(element: element, property: 'fluidAdditionalAttributes')}"
/>
{formvh:translateElementProperty(element: element, property: '{0: \'options\', 1: value}')}
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/SingleSelect.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/SingleSelect.html
index 0758a994..4e1da4ad 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/SingleSelect.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/SingleSelect.html
@@ -7,8 +7,8 @@
property="{element.identifier}"
id="{element.uniqueIdentifier}"
options="{formvh:translateElementProperty(element: element, property: 'options')}"
- class="{element.properties.elementClassAttribute} border-gray-400 focus:border-gray-800 w-full mt-1"
- errorClass="form-select-error"
+ class="form-field"
+ errorClass="form-field--has-error"
additionalAttributes="{formvh:translateElementProperty(element: element, property: 'fluidAdditionalAttributes')}"
prependOptionLabel="{formvh:translateElementProperty(element: element, property: 'prependOptionLabel')}"
prependOptionValue="{formvh:translateElementProperty(element: element, property: 'prependOptionValue')}"
@@ -19,8 +19,8 @@
property="{element.identifier}"
id="{element.uniqueIdentifier}"
options="{formvh:translateElementProperty(element: element, property: 'options')}"
- class="{element.properties.elementClassAttribute} border-gray-400 focus:border-gray-800 w-full mt-1"
- errorClass="form-select-error"
+ class="form-field"
+ errorClass="form-field--has-error"
additionalAttributes="{formvh:translateElementProperty(element: element, property: 'fluidAdditionalAttributes')}"
/>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Telephone.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Telephone.html
index 0b55857a..aed976cb 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Telephone.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Telephone.html
@@ -5,8 +5,8 @@
type="tel"
property="{element.identifier}"
id="{element.uniqueIdentifier}"
- class="border-gray-400 focus:border-gray-800 mt-1 block w-full"
- errorClass="{element.properties.elementErrorClassAttribute}"
+ class="form-field"
+ errorClass="form-field--has-error"
additionalAttributes="{formvh:translateElementProperty(element: element, property: 'fluidAdditionalAttributes')}"
/>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Text.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Text.html
index 33124a5f..9d78acdd 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Text.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Text.html
@@ -4,8 +4,8 @@
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Textarea.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Textarea.html
index d5c705af..b6e522de 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Textarea.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Textarea.html
@@ -4,10 +4,10 @@