API ReferenceComponents<AutoField>

<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

PropExampleTypeStatus
field{ type: "text" }FieldRequired
onChangeonChange("Goodbye, world")FunctionRequired
value"Hello, world"AnyRequired
id"my-input"String-
readOnlytrueBoolean-

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.

Further reading