Feature Showcase: Custom Form Elements in the Admin Dashboard

Vendure’s Custom Form Elements let you replace standard dashboard inputs with custom React components tailored to your data model and workflows. Components integrate with React Hook Form and the dashboard’s design system.

This guide provides an overview of the system's capabilities and directs you to the relevant documentation for implementation details.

Capabilities

The Dashboard architecture allows you to integrate custom components in several key areas:

• Inputs for Custom Fields: Use custom components for custom fields, such as a visual color picker or a markdown editor.
• Replacing Core Form Inputs: Target and replace any default input on a detail page, such as swapping the standard product description editor for a custom one.
• Interfaces for Dynamic Settings: Create UIs for parts of your system configured at runtime, such as setting rules for promotions or defining shipping rate calculations.
• Searchable Inputs for Linking Resources: Build components for selecting and associating data, such as linking a product to a collection, with features like live search and pagination.
• Validation integration: via React Hook Form and zod.

Implementation Details

The documentation provides step-by-step instructions and code examples, covering the following topics:

Vendure Documentation: Custom Form Elements

• Implementing the DashboardFormComponent type to integrate your components with Vendure's form handling.
• Registering your components within a UI plugin, making them available for custom fields and configurable operations.
• Targeting and replacing specific inputs on detail pages using pageId, blockId, and field.
• Using the useFormContext hook from react-hook-form to access form state and validation.

• Constructing type-safe, GraphQL-powered relation selectors.

  
  Further Reading

  • Getting Started with the Dashboard
  • Form component examples
  • Relation selectors
  • Configurable Operations