***

title: "DetailForms"
generated: true
---------------

## DashboardDetailFormInputComponent

<GenerationInfo sourceFile="packages/dashboard/src/lib/framework/extension-api/types/detail-forms.ts" sourceLine="13" packageName="@vendure/dashboard" since="3.4.0" />

Allows you to replace the rendered input for specific native fields in detail forms.
The pageId is already defined in the detail form extension, so only the blockId and field are needed.

```ts title="Signature"
interface DashboardDetailFormInputComponent {
    blockId: string;
    field: string;
    component: DashboardFormComponent;
}
```

<div className="members-wrapper">

### blockId

\<MemberInfo kind="property" type={`string`}   />

The ID of the block where this input component should be used.

### field

\<MemberInfo kind="property" type={`string`}   />

The name of the native field where this input component should be used.

### component

\<MemberInfo kind="property" type={`<a href='/current/core/reference/dashboard/extensions-api/form-components#dashboardformcomponent'>DashboardFormComponent</a>`}   />

The React component that will be rendered as the input.
It should accept `value`, `onChange`, and other standard input props.

</div>
## DashboardDetailFormExtensionDefinition

<GenerationInfo sourceFile="packages/dashboard/src/lib/framework/extension-api/types/detail-forms.ts" sourceLine="41" packageName="@vendure/dashboard" since="3.4.0" />

Allows you to extend existing detail forms (e.g. on the product detail or customer detail pages)
with custom GraphQL queries and native field input overrides.

```ts title="Signature"
interface DashboardDetailFormExtensionDefinition {
    pageId: string;
    extendDetailDocument?: string | DocumentNode | (() => DocumentNode | string);
    inputs?: DashboardDetailFormInputComponent[];
}
```

<div className="members-wrapper">

### pageId

\<MemberInfo kind="property" type={`string`}   />

The ID of the page where the detail form is located, e.g. `'product-detail'`, `'order-detail'`.

### extendDetailDocument

\<MemberInfo kind="property" type={`string | DocumentNode | (() => DocumentNode | string)`}   />

Extends the GraphQL query used to fetch data for the detail page, allowing you to add additional
fields that can be used by page blocks or custom input components.

### inputs

\<MemberInfo kind="property" type={`<a href='/current/core/reference/dashboard/extensions-api/detail-forms#dashboarddetailforminputcomponent'>DashboardDetailFormInputComponent</a>[]`}   />

Input components which replace specific native fields in the detail form.

</div>