TranslatableFormFieldWrapper

TranslatableFormFieldWrapper

@vendure/dashboardtranslatable-form-field.tsx

v3.4.0

This is the equivalent of the FormFieldWrapper component, but for translatable fields.

Example

<PageBlock column="main" blockId="main-form">
    <DetailFormGrid>
        <TranslatableFormFieldWrapper
            control={form.control}
            name="name"
            label={<Trans>Product name</Trans>}
            render={({ field }) => <Input {...field} />}
        />
        <TranslatableFormFieldWrapper
            control={form.control}
            name="slug"
            label={<Trans>Slug</Trans>}
            render={({ field }) => <Input {...field} />}
        />
    </DetailFormGrid>

    <TranslatableFormFieldWrapper
        control={form.control}
        name="description"
        label={<Trans>Description</Trans>}
        render={({ field }) => <RichTextInput {...field} />}
    />
</PageBlock>

TranslatableFormFieldProps

@vendure/dashboardtranslatable-form-field.tsx

v3.4.0

The props for the TranslatableFormField component.

Signature

type TranslatableFormFieldProps<TFieldValues extends TranslatableEntity | TranslatableEntity[]> = Omit<
    ControllerProps<TFieldValues>,
    'name'
> & {
    /**
     * @description
     * The label for the form field.
     */
    label?: React.ReactNode;
    /**
     * @description
     * The name of the form field.
     */
    name: TFieldValues extends TranslatableEntity
        ? keyof Omit<NonNullable<TFieldValues['translations']>[number], 'languageCode'>
        : TFieldValues extends TranslatableEntity[]
          ? keyof Omit<NonNullable<TFieldValues[number]['translations']>[number], 'languageCode'>
          : never;
}