FormFieldWrapper

@vendure/dashboard Sourcev3.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

Tsx

<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

parameterFormFieldWrapperProps<TFieldValues, TName>

@vendure/dashboard Sourcev3.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;}