Field Widgets

Sometimes you may want to override the default field widgets that are used for editing content. You can do this in the _schema.json file for your content type or component. All field widget overrides use the following format (replace "myfield" with the JSON key from your content source):

{
"myfield": {
"type": "",
"options": []
}
}

Here's a list of widget types that ship with the CMS by default:

text
number
boolean
date
time
wysiwyg (to be renamed rich_text)
select
checkbox
radio
reference / references
references
id
media
component
list_text

Examples

text

A multiline plain-text editor. Options: disabled (read-only) and hidden (not rendered in the form).

{
"mytext": {
"type": "text",
"options": [
"disabled"
]
}
}

number

A numeric input. Takes no options.

{
"mynumber": {
"type": "number"
}
}

boolean

A single true/false checkbox. Takes no options.

{
"myboolean": {
"type": "boolean"
}
}

date

A date picker. Options: today prefills the field with the current date; today+N / today-N prefill with a date offset by N days (e.g. today+7 for one week from now).

{
"mydate": {
"type": "date",
"options": [
"today+7"
]
}
}

time

A time picker (hours/minutes, plus seconds when the value includes them). Takes no options.

{
"mytime": {
"type": "time"
}
}

wysiwyg

A rich text editor. Options control which toolbar buttons appear: bold, italic, underline, bullets, numbers, link, unlink, heading1, heading2, heading3, heading4, clear — or all for every button.

{
"mywysiwyg": {
"type": "wysiwyg",
"options": [
"bold",
"italic",
"bullets",
"link"
]
}
}

select

A dropdown. The field value is a single string picked from the options list.

{
"myselect": {
"type": "select",
"options": [
"small",
"medium",
"large"
]
}
}

checkbox

A group of checkboxes. The field value is an array of the checked options.

{
"mycheckbox": {
"type": "checkbox",
"options": [
"newsletter",
"events",
"offers"
]
}
}

radio

A radio button group. The field value is the single selected option.

{
"myradio": {
"type": "radio",
"options": [
"draft",
"published"
]
}
}

reference / references

Search-and-select a single piece of content. Each option describes a searchable content type: type is the content type name, search lists the fields to search within, and result is what gets saved in the field — a dotted path like fields.title, or * for the whole content item.

{
"myreference": {
"type": "reference",
"options": [
{
"type": "blog",
"search": [
"title"
],
"result": "path"
}
]
}
}

Same as reference, but adding an s to make plural allows selecting multiple items. The field value is an array.

{
"myreferences": {
"type": "references",
"options": [
{
"type": "blog",
"search": [
"title"
],
"result": "fields.title"
}
]
}
}

id

A read-only field that auto-generates a UUID when empty. Useful as a stable identifier for content items. Takes no options.

{
"myid": {
"type": "id"
}
}

media

An image/document picker wired to the Media Library. When image options are given, uploads and selections are processed against them (cropped, scaled, and/or converted) in the upload review modal before being saved. Option keys: width / height (exact output dimensions in pixels — providing both also locks the crop aspect ratio), crop (default true; set false to skip cropping), scale (default true; set false to keep original dimensions), convert (output format: jpg, png, or webp; omit to keep the source format), quality (0–1 or 0–100, default 0.82), aspectRatio (e.g. 16:9), lockAspectRatio, minWidth / minHeight, and background (fill color for letterboxing, e.g. #ffffff). If a selected image already meets the spec, it is referenced as-is without making a derivative copy.

{
"mymedia": {
"type": "media",
"options": [
{
"width": 500,
"height": 300,
"crop": true,
"convert": "webp"
}
]
}
}

component

A reorderable list of components. Options list the component names (from layouts/components/) the editor is allowed to add.

{
"mycomponents": {
"type": "component",
"options": [
"cta",
"faq"
]
}
}

list_text

A list of plain-text strings with add/remove controls. The field value is an array of strings. Takes no options.

{
"mylist": {
"type": "list_text"
}
}