Show navigationHide navigation

String

Single-line text input. Use for short content like titles, names, labels, and tags.

Usage#

typescript
title: { label: 'Title', format: 'string', required: true },

Options#

OptionTypeDefaultDescription
requiredbooleanfalseMust be non-empty after trimming
listbooleanfalseTag-style multi-value input (see below)
entryTitlebooleanfalseUse as entry display name in the sidebar
hintstringHelper text below the field

String list (list: true)#

Set list: true for tag-style multi-value input. The editor shows a text field with pills — type and press Enter to add, drag to reorder, click x to remove.

typescript
tags: { label: 'Tags', format: 'string', list: true },

Stored as a native JSON array:

json
{ "tags": ["design", "cms", "typescript"] }

A required string list must have at least one non-empty item.

Example: Product catalog#

Schema — a product with name and category tags:

typescript
// cms/octocms.config.ts
product: {
  label: 'Product',
  hasMany: true,
  fields: {
    name: { label: 'Name', format: 'string', entryTitle: true, required: true },
    sku: { label: 'SKU', format: 'string', required: true },
    tags: { label: 'Tags', format: 'string', list: true },
  },
},

Query + render:

tsx
// src/app/products/page.tsx
import { query } from 'cms/__generated__/query';

export default async function ProductsPage() {
  const products = await query('product').sort('name', 'asc').toArray();

  return (
    <ul>
      {products.map((p) => (
        <li key={p.sys.id}>
          <strong>{p.fields.name}</strong> ({p.fields.sku})
          {p.fields.tags?.map((tag) => (
            <span key={tag} className="tag">{tag}</span>
          ))}
        </li>
      ))}
    </ul>
  );
}

Storage#

Plain string in the entry JSON. With list: true, a native string[] array.

json
{ "name": "Widget Pro", "tags": ["hardware", "bestseller"] }

Query result#

Returned as-is — string (or string[] for lists).