Skip to main content
Version: 3.x

Section field types

Reference of the field types available in a section's schema, the editor control each one renders, and how to configure it.

Each editable field in a section's schema has a type that selects its editor control in the properties sidebar. This page lists every available type and how to configure it. See Create custom sections for how a schema fits into a section.

Every key in a section's schema mirrors a key in its defaultProps; your component then receives the edited values as props.

checkbox​

A boolean on/off toggle.

{ type: "checkbox", label: "Show divider", default_value: false }

color​

A color picker from the themed palette.

{ type: "color", label: "Text color", default_value: "#111827" }

image​

An image picker storing a source URL and alt text. It opens the built-in media library, where the content manager browses folders and picks or uploads an asset.

{ type: "image", label: "Illustration", default_value: { src: "", alt: "" } }

The same input as url, for internal or external links.

{ type: "link", label: "Button link", default_value: "/contact", attributes: { placeholder: "https://…" } }

margin​

A spacing editor for the four margins (unit + lock to edit all sides at once).

{
  type: "margin",
  label: "Margin",
  default_value: { top: 0, right: 0, bottom: 0, left: 0, unit: "px", locked: true },
}

media​

A media picker storing the selected file's URL as a plain string (no alt text). It opens the same media library as image.

{ type: "media", label: "Attachment", default_value: "", attributes: { placeholder: "https://…" } }

number​

A numeric slider.

{ type: "number", label: "Columns", default_value: 3, attributes: { min: 1, max: 6, step: 1 } }

padding​

The same spacing editor as margin, for paddings.

{
  type: "padding",
  label: "Padding",
  default_value: { top: 16, right: 16, bottom: 16, left: 16, unit: "px", locked: true },
}

range​

The same slider as number, for a bounded range.

{ type: "range", label: "Opacity", default_value: 100, attributes: { min: 0, max: 100, step: 1 } }

rich_text​

A rich-text editor. The value is a TipTap document (JSONContent), not a plain string.

{ type: "rich_text", label: "Body", default_value: "" }

Render it in your section with the TiptapContent theme component — the same one the built-in sections use:

import TiptapContent from "theme/modules/CmsPage/sections/tiptapRenderer";

// `body` is the `rich_text` prop your section receives
<TiptapContent content={body} />;

It renders the document with the theme's own atoms (headings, paragraphs, links). Two ways to customise it:

  • per usage — pass its componentsMap prop to override how individual nodes or marks render (entries you omit fall back to DEFAULT_TIPTAP_COMPONENTS);
  • globally — override it like any theme component by shadowing theme/modules/CmsPage/sections/tiptapRenderer in your own theme, which also changes how the built-in sections render rich text.

select​

A single choice among the options you provide.

{
  type: "select",
  label: "Alignment",
  default_value: "center",
  options: [
    { label: "Left", value: "left" },
    { label: "Center", value: "center" },
    { label: "Right", value: "right" },
  ],
}

text​

A single-line text input.

{ type: "text", label: "Heading", default_value: "Welcome", attributes: { placeholder: "Enter a heading" } }

textarea​

A multi-line text input.

{ type: "textarea", label: "Summary", default_value: "", attributes: { placeholder: "Short summary…", rows: 4 } }

title​

A structured heading editor (text, level, size, weight, alignment).

{
  type: "title",
  label: "Title",
  default_value: { text: "Section title", level: "h2", size: "text-4xl", weight: "font-bold", alignment: "center" },
}

url​

A URL input.

{ type: "url", label: "Video URL", default_value: "", attributes: { placeholder: "https://…" } }