{isHeadlineHtml && safeHeadlineHtml ? (
diff --git a/packages/surveys/src/components/elements/address-element.tsx b/packages/surveys/src/components/elements/address-element.tsx
index 453a6ed45aa5..bd00026d4fca 100644
--- a/packages/surveys/src/components/elements/address-element.tsx
+++ b/packages/surveys/src/components/elements/address-element.tsx
@@ -1,4 +1,5 @@
import { useState } from "preact/hooks";
+import { useTranslation } from "react-i18next";
import { FormField, type FormFieldConfig } from "@formbricks/survey-ui";
import { type TResponseData, type TResponseTtc } from "@formbricks/types/responses";
import type { TSurveyAddressElement } from "@formbricks/types/surveys/elements";
@@ -29,6 +30,7 @@ export function AddressElement({
}: Readonly
) {
const [startTime, setStartTime] = useState(performance.now());
const isCurrent = element.id === currentElementId;
+ const { t } = useTranslation();
useTtc(element.id, ttc, setTtc, startTime, setStartTime, isCurrent);
@@ -118,6 +120,7 @@ export function AddressElement({
value={convertToValueObject(value)}
onChange={handleChange}
required={element.required}
+ requiredLabel={t("common.required")}
dir={dir}
imageUrl={element.imageUrl}
videoUrl={element.videoUrl}
diff --git a/packages/surveys/src/components/elements/consent-element.tsx b/packages/surveys/src/components/elements/consent-element.tsx
index b7f51998b8f8..f484f6e6b9ac 100644
--- a/packages/surveys/src/components/elements/consent-element.tsx
+++ b/packages/surveys/src/components/elements/consent-element.tsx
@@ -66,6 +66,7 @@ export function ConsentElement({
value={value === "accepted"}
onChange={handleChange}
required={element.required}
+ requiredLabel={t("common.required")}
errorMessage={errorMessage}
dir={dir}
imageUrl={element.imageUrl}
diff --git a/packages/surveys/src/components/elements/contact-info-element.tsx b/packages/surveys/src/components/elements/contact-info-element.tsx
index cad44e46da5a..f9f0f4469c3e 100644
--- a/packages/surveys/src/components/elements/contact-info-element.tsx
+++ b/packages/surveys/src/components/elements/contact-info-element.tsx
@@ -1,4 +1,5 @@
import { useState } from "preact/hooks";
+import { useTranslation } from "react-i18next";
import { FormField, type FormFieldConfig } from "@formbricks/survey-ui";
import { type TResponseData, type TResponseTtc } from "@formbricks/types/responses";
import type { TSurveyContactInfoElement } from "@formbricks/types/surveys/elements";
@@ -30,6 +31,7 @@ export function ContactInfoElement({
}: Readonly) {
const [startTime, setStartTime] = useState(performance.now());
const isCurrent = element.id === currentElementId;
+ const { t } = useTranslation();
useTtc(element.id, ttc, setTtc, startTime, setStartTime, isCurrent);
@@ -114,6 +116,7 @@ export function ContactInfoElement({
value={convertToValueObject(value)}
onChange={handleChange}
required={element.required}
+ requiredLabel={t("common.required")}
dir={dir}
imageUrl={element.imageUrl}
videoUrl={element.videoUrl}
diff --git a/packages/surveys/src/components/elements/date-element.tsx b/packages/surveys/src/components/elements/date-element.tsx
index 2f987a7a4bd2..2add00c0d53c 100644
--- a/packages/surveys/src/components/elements/date-element.tsx
+++ b/packages/surveys/src/components/elements/date-element.tsx
@@ -76,6 +76,7 @@ export function DateElement({
minDate={getMinDate()}
maxDate={getMaxDate()}
required={element.required}
+ requiredLabel={t("common.required")}
errorMessage={errorMessage}
locale={languageCode}
imageUrl={element.imageUrl}
diff --git a/packages/surveys/src/components/elements/file-upload-element.tsx b/packages/surveys/src/components/elements/file-upload-element.tsx
index 6abb927c9479..6095e9d58572 100644
--- a/packages/surveys/src/components/elements/file-upload-element.tsx
+++ b/packages/surveys/src/components/elements/file-upload-element.tsx
@@ -354,6 +354,7 @@ export function FileUploadElement({
allowMultiple={element.allowMultipleFiles}
allowedFileExtensions={element.allowedFileExtensions}
required={element.required}
+ requiredLabel={t("common.required")}
errorMessage={errorMessage}
isUploading={isUploading}
imageUrl={element.imageUrl}
diff --git a/packages/surveys/src/components/elements/matrix-element.tsx b/packages/surveys/src/components/elements/matrix-element.tsx
index 2c6e94f6abaa..572217c605ae 100644
--- a/packages/surveys/src/components/elements/matrix-element.tsx
+++ b/packages/surveys/src/components/elements/matrix-element.tsx
@@ -151,6 +151,7 @@ export function MatrixElement({
value={convertValueToIds(value)}
onChange={handleChange}
required={element.required}
+ requiredLabel={t("common.required")}
errorMessage={errorMessage}
imageUrl={element.imageUrl}
videoUrl={element.videoUrl}
diff --git a/packages/surveys/src/components/elements/multiple-choice-multi-element.tsx b/packages/surveys/src/components/elements/multiple-choice-multi-element.tsx
index 4dff6ed99cb2..322753c2e5a9 100644
--- a/packages/surveys/src/components/elements/multiple-choice-multi-element.tsx
+++ b/packages/surveys/src/components/elements/multiple-choice-multi-element.tsx
@@ -263,6 +263,7 @@ export function MultipleChoiceMultiElement({
value={selectedValues}
onChange={handleMultiSelectChange}
required={element.required}
+ requiredLabel={t("common.required")}
errorMessage={errorMessage}
dir={dir}
otherOptionId={otherOption?.id}
diff --git a/packages/surveys/src/components/elements/multiple-choice-single-element.tsx b/packages/surveys/src/components/elements/multiple-choice-single-element.tsx
index 7783c1d6fd91..4adf7480bab6 100644
--- a/packages/surveys/src/components/elements/multiple-choice-single-element.tsx
+++ b/packages/surveys/src/components/elements/multiple-choice-single-element.tsx
@@ -185,6 +185,7 @@ export function MultipleChoiceSingleElement({
value={selectedValue}
onChange={handleChange}
required={element.required}
+ requiredLabel={t("common.required")}
errorMessage={errorMessage}
dir={dir}
otherOptionId={otherOption?.id}
diff --git a/packages/surveys/src/components/elements/nps-element.tsx b/packages/surveys/src/components/elements/nps-element.tsx
index 078920b051c5..70834403b43b 100644
--- a/packages/surveys/src/components/elements/nps-element.tsx
+++ b/packages/surveys/src/components/elements/nps-element.tsx
@@ -71,6 +71,7 @@ export function NPSElement({
upperLabel={getLocalizedValue(element.upperLabel, languageCode)}
colorCoding={element.isColorCodingEnabled}
required={element.required}
+ requiredLabel={t("common.required")}
errorMessage={errorMessage}
dir={dir}
imageUrl={element.imageUrl}
diff --git a/packages/surveys/src/components/elements/open-text-element.tsx b/packages/surveys/src/components/elements/open-text-element.tsx
index 013ab9bc56a8..f15a0f3c45c1 100644
--- a/packages/surveys/src/components/elements/open-text-element.tsx
+++ b/packages/surveys/src/components/elements/open-text-element.tsx
@@ -123,6 +123,7 @@ export function OpenTextElement({
value={value}
onChange={handleChange}
required={element.required}
+ requiredLabel={t("common.required")}
longAnswer={element.longAnswer !== false}
inputType={getInputType()}
charLimit={element.inputType === "text" ? element.charLimit : undefined}
diff --git a/packages/surveys/src/components/elements/picture-selection-element.tsx b/packages/surveys/src/components/elements/picture-selection-element.tsx
index 6d1ba1d0da44..f75b36ede99f 100644
--- a/packages/surveys/src/components/elements/picture-selection-element.tsx
+++ b/packages/surveys/src/components/elements/picture-selection-element.tsx
@@ -95,6 +95,7 @@ export function PictureSelectionElement({
onChange={handleChange}
allowMulti={element.allowMulti}
required={element.required}
+ requiredLabel={t("common.required")}
dir={dir}
errorMessage={errorMessage}
imageUrl={element.imageUrl}
diff --git a/packages/surveys/src/components/elements/ranking-element.tsx b/packages/surveys/src/components/elements/ranking-element.tsx
index f984e77a84e8..6ef3ca00e587 100644
--- a/packages/surveys/src/components/elements/ranking-element.tsx
+++ b/packages/surveys/src/components/elements/ranking-element.tsx
@@ -136,6 +136,7 @@ export function RankingElement({
value={selectedValues}
onChange={handleChange}
required={element.required}
+ requiredLabel={t("common.required")}
errorMessage={errorMessage}
imageUrl={element.imageUrl}
videoUrl={element.videoUrl}
diff --git a/packages/surveys/src/components/elements/rating-element.tsx b/packages/surveys/src/components/elements/rating-element.tsx
index e2fe9633d37b..aca89a4efec1 100644
--- a/packages/surveys/src/components/elements/rating-element.tsx
+++ b/packages/surveys/src/components/elements/rating-element.tsx
@@ -70,6 +70,7 @@ export function RatingElement({
upperLabel={getLocalizedValue(element.upperLabel, languageCode)}
colorCoding={element.isColorCodingEnabled}
required={element.required}
+ requiredLabel={t("common.required")}
dir={dir}
imageUrl={element.imageUrl}
videoUrl={element.videoUrl}
diff --git a/packages/surveys/src/components/i18n/provider.tsx b/packages/surveys/src/components/i18n/provider.tsx
index e25199343a6e..001e1a55fc69 100644
--- a/packages/surveys/src/components/i18n/provider.tsx
+++ b/packages/surveys/src/components/i18n/provider.tsx
@@ -4,8 +4,17 @@ import { I18nextProvider } from "react-i18next";
import i18n from "../../lib/i18n.config";
export const I18nProvider = ({ language, children }: { language: string; children?: ComponentChildren }) => {
- useEffect(() => {
+ // Set language synchronously on initial render so children get the correct translations immediately.
+ // This is safe because all translations are pre-loaded (bundled) in i18n.config.ts.
+ if (i18n.language !== language) {
i18n.changeLanguage(language);
+ }
+
+ // Handle language prop changes after initial render
+ useEffect(() => {
+ if (i18n.language !== language) {
+ i18n.changeLanguage(language);
+ }
}, [language]);
// work around for react-i18next not supporting preact
diff --git a/packages/types/storage.ts b/packages/types/storage.ts
index e7d97af920a3..1ef0cc5f783f 100644
--- a/packages/types/storage.ts
+++ b/packages/types/storage.ts
@@ -22,6 +22,7 @@ export const ZAllowedFileExtension = z.enum([
"avi",
"mkv",
"webm",
+ "mp3",
"zip",
"rar",
"7z",
@@ -50,6 +51,7 @@ export const mimeTypes: Record = {
avi: "video/x-msvideo",
mkv: "video/x-matroska",
webm: "video/webm",
+ mp3: "audio/mpeg",
zip: "application/zip",
rar: "application/vnd.rar",
"7z": "application/x-7z-compressed",