<AutoField>

Render a Puck field based on a Field object. Use this when building custom fields that need to use Puck-style fields internally.

Interactive Demo

Example

Hello, world

import { Autofield } from "@measured/puck";
 
const CustomField = ({ onChange, value }) => (
  <AutoField field={{ type: "text" }} onChange={onChange} value={value} />
);
 
const config = {
  components: {
    Example: {
      fields: {
        title: {
          type: "custom",
          render: MyCustomField,
        },
      },
    },
  },
};

Props

Prop	Example	Type	Status
`field`	`{ type: "text" }`	Field	Required
`onChange`	`onChange("Goodbye, world")`	Function	Required
`value`	`"Hello, world"`	Any	Required
`id`	`"my-input"`	String	-
`readOnly`	`true`	Boolean	-

Required Props

`field`

An object containing the user defined Field configuration.

`onChange`

A callback that triggers when the value changes.

`value`

The current value for the field.

Optional Props

`id`

An optional ID for this field. Will be generated if not specified.

`readOnly`

A boolean describing whether or not this field is readOnly.

<AutoField>

Props

Required Props

field

onChange

value