FormFieldWrapper

FormFieldWrapper

@vendure/dashboardform-field-wrapper.tsx

v3.4.0

This is a wrapper that can be used in all forms to wrap the actual form control, and provide a label, description and error message.

Use this instead of the default Shadcn FormField (etc.) components, as it also supports overridden form components.

Example

<PageBlock column="main" blockId="main-form">
    <DetailFormGrid>
        <FormFieldWrapper
            control={form.control}
            name="description"
            label={<Trans>Description</Trans>}
            render={({ field }) => <Input {...field} />}
        />
        <FormFieldWrapper
            control={form.control}
            name="code"
            label={<Trans>Code</Trans>}
            render={({ field }) => <Input {...field} />}
        />
    </DetailFormGrid>
</PageBlock>

If you are dealing with translatable fields, use the TranslatableFormFieldWrapper component instead.

Signature

function FormFieldWrapper<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>(props: FormFieldWrapperProps<TFieldValues, TName>): void

Parameters

props

parameter

FormFieldWrapperProps<TFieldValues, TName>

FormFieldWrapperProps

@vendure/dashboardform-field-wrapper.tsx

v3.4.0

The props for the FormFieldWrapper component.

Signature

type FormFieldWrapperProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = React.ComponentProps<typeof FormField<TFieldValues, TName>> & {
    /**
     * @description
     * The label for the form field.
     */
    label?: React.ReactNode;
    /**
     * @description
     * The description for the form field.
     */
    description?: React.ReactNode;
    /**
     * @description
     * Whether to render the form control.
     * If false, the form control will not be rendered.
     * This is useful when you want to render the form control in a custom way, e.g. for <Select/> components,
     * where the FormControl needs to nested in the root component.
     *
     * @default true
     */
    renderFormControl?: boolean;
}