Create new field

Why?

Allows to integrate any controlled component into a Formiz form.

How?

Create your component File

In the src/components directory, create an index.tsx file in a new folder named after the controlled component, prefixed by Field.

- - index.tsx
- - index.tsx

Define your Field

We recommend using this structure to define a Field. This file can include some other stuff if your component has some specificity.

src/components/FieldMyComponent/index.tsx

import { MyComponent, MyComponentProps } from "@/components/MyComponent";
 
type Value = MyComponentProps["value"];
 
type UsualMyComponentProps = "usualProp1" | "usualProp2"
 
type FieldMyComponentProps<FormattedValue = Value> = FieldProps<
  Value,
  FormattedValue
> &
  FormGroupProps & Pick<MyComponentProps, UsualMyComponentProps> &
  { myComponentProps?: Omit<MyComponentProps, UsualMyComponentProps> };
 
export const FieldMyComponent = <FormattedValue = Value>(
  props: FieldMyComponentProps<FormattedValue>
) => {
  const field = useField(props);
 
  const { myComponentProps, children, usualProp1, usualProp2, ...rest } = field.otherProps;
 
  const formGroupProps = {
    ...rest,
    errorMessage: field.errorMessage,
    id: field.id,
    isRequired: field.isRequired,
    showError: field.shouldDisplayError,
  } satifies FormGroupProps;
 
  return (
    <FormGroup {...formGroupProps}>
      <MyComponent
        {...myComponentProps}
        usualProp1={usualProp1}
        usualProp2={usualProp2}
        value={field.value}
        onChange={field.setValue}
        onFocus={(e) => {
          field.setIsTouched(false);
          myComponentProps?.onFocus?.(e);
          }
        }
        onBlur={(e) => {
          field.setIsTouched(true);
          myComponentProps?.onBlur?.(e);
          }
        }
      />
      {children}
    </FormGroup>
  );
};

Use your new Field in a form

<Formiz connect={form}>
  <FieldMyComponent
    name="myComponent"
    label="My component"
    usualProp1="myProp"
    myComponentProps={{ unusualProp: "myProp" }}
  />
</Formiz>

Create a new page Storybook component documentation