Custom fields

Puck supports custom fields using the custom field type and render method.

In this example, we optionally add the <FieldLabel> component to add a label:

import { FieldLabel } from "@measured/puck";
 
export const MyComponent: ComponentConfig = {
  fields: {
    myField: {
      type: "custom",
      render: ({ field, name, onChange, value }) => {
        return (
          <FieldLabel label={field.label || name}>
            <input
              placeholder="Enter text..."
              type="text"
              name={name}
              defaultValue={value}
              onChange={(e) => onChange(e.currentTarget.value)}
            ></input>
          </FieldLabel>
        );
      },
    },
  },
};

Editing Your Components Creating Nested Layouts