Docs
Fields
Editing Your Components

Field

A Field represents a user input field shown in the Puck interface.

  • type (text | textarea | number | select | radio | external | array | custom): The input type to render
  • label (text [optional]): A label for the input. Will use the key if not provided.
  • arrayFields (object): Object describing sub-fields for items in an array input
    • [fieldName] (Field): The Field objects describing the input data for each item
  • getItemSummary ((object, number) => string [optional]): Function to get the name of each item when using the array or external field types
  • defaultItemProps (object [optional]): Default props to pass to each new item added, when using a array field type
  • options (object[]): array of items to render for select or radio inputs
    • label (string)
    • value (string | number | boolean)
  • adaptor (Adaptor): Content adaptor if using the external input type
  • adaptorParams (object): Paramaters passed to the adaptor
  • render (Component): Render a custom field. Receives the props:
    • field (Field): Field configuration
    • name (string): Name of the field
    • value (any): Value for the field
    • onChange ((value: any) => void): Callback to change the value
    • readOnly (boolean | undefined): Whether or not the field should be in readOnly mode