Moloch v3 Fields provides a collection of custom field components used by @daohaus/form-builder when rendering forms.

These fields include some complex functionality above and beyond the basic fields in the @daohaus/ui package.

Github (opens in a new tab)

*Used for registering custom fields in Form Builder.

NPM (opens in a new tab)



yarn add @daohaus/moloch-v3-fields


How to create and add a custom field to your application

  1. Create a new field component
import React from 'react';
import { Buildable, WrappedInput, Field } from '@daohaus/ui';
export const TestField = (props: Buildable<Field>) => {
  return (
      <WrappedInput {...props} />
      <p>I am some strange new field with a line of text below it!!</p>
  1. Add a fieldConfig.ts file to create a new list of available fields and add your custom field to that
// fieldConfig.ts
import { MolochFields } from '@daohaus/moloch-v3-fields';
import { FieldLegoBase, FormLegoBase } from '@daohaus/utils';
import { TestField } from '..fieldTest';
export const AppFieldLookup = {
  strangeField: TestField,
export type CustomFieldLego = FieldLegoBase<typeof AppFieldLookup>;
export type CustomFormLego = FormLegoBase<typeof AppFieldLookup>;
  1. Pass the new field lookup to the Form Builder component
import { FormBuilder } from "@daohaus/form-builder";
import { MolochFields } from "@daohaus/moloch-v3-fields";
import { AppFieldLookup } from "./fieldConfig";
export const FormTest = () => {
  return (
<!--       ...other props -->
  1. Use in a field lego with the new type
import { MolochFieldLego } from '@daohaus/moloch-v3-fields';
const StrangeFieldLego: MolochFieldLego = {
  id: 'anyId',
  type: 'strangeField',
  label: 'Whaaa???',
  placeholder: 'Enter something!',