Field Builder

Overview

The Field Builder provides a fluent API for defining fields in content models. Each field type has specific methods for configuration and validation. Fields are created using the registry methods (e.g., text(), number(), etc.) and configured using chainable methods.

Common Methods

All field types share these common configuration methods:

label(text: string) - Sets the field label displayed in the UI.

description(text: string) - Sets description text shown below the field label.

note(text: string) - Sets a note shown below the field.

help(text: string) - Sets help text shown in the tooltip next to the field label.

placeholder(text: string) - Sets placeholder text for input fields.

fieldId(id: string) - Sets the field identifier. Auto-generated from label if not specified.

storageId(id: string) - Sets the storage identifier. Auto-generated if not specified.

defaultValue(value: any) - Sets the default value for the field.

list() - Marks the field as supporting multiple values.

tags(tags: string[]) - Adds tags to the field for categorization.

renderer(name: string, settings?: Record<string, any>) - Sets the field renderer. See Field Renderers for available renderers.

settings(settings: Record<string, any>) - Sets additional field settings.

predefinedValues(values: Array<{label: string, value: any, selected?: boolean}>) - Defines predefined values for the field (enables select boxes, radio buttons, or checkboxes).

List Validators

When a field is marked with .list(), these validators become available:

listMinLength(value: number, message?: string) - Minimum number of items required in the list.

listMaxLength(value: number, message?: string) - Maximum number of items allowed in the list.

Boolean Field

Registry Method: boolean()

Boolean fields represent true/false values.

Methods

defaultValue(value: boolean) - Sets the default boolean value.

Example

Text Field

Registry Method: text()

Text fields store short text values.

Validators

required(message?: string) - Makes the field required.

minLength(value: number, message?: string) - Minimum text length.

maxLength(value: number, message?: string) - Maximum text length.

pattern(regex: string, flags?: string, message?: string) - Custom regex pattern validation.

email(message?: string) - Validates as email address.

url(message?: string) - Validates as URL.

lowerCase(message?: string) - Allows only lowercase characters.

upperCase(message?: string) - Allows only uppercase characters.

lowerCaseSpace(message?: string) - Allows only lowercase characters and spaces.

upperCaseSpace(message?: string) - Allows only uppercase characters and spaces.

unique(message?: string) - Ensures the value is unique across all entries.

Example

Number Field

Registry Method: number()

Number fields store numeric values.

Validators

required(message?: string) - Makes the field required.

gte(value: number, message?: string) - Greater than or equal to validation.

lte(value: number, message?: string) - Less than or equal to validation.

Example

Long Text Field

Registry Method: longText()

Long text fields store larger amounts of text.

Validators

Same validators as Text Field: required, minLength, maxLength, pattern, email, url, lowerCase, upperCase, lowerCaseSpace, upperCaseSpace.

Example

Rich Text Field

Registry Method: richText()

Rich text fields store formatted content using the Lexical editor.

Validators

required(message?: string) - Makes the field required.

Example

DateTime Field

Registry Method: datetime()

DateTime fields store date and time values in various formats.

Methods

dateTimeType(type: DateTimeType) - Sets the datetime type. Types: "date", "time", "dateTimeWithTimezone", "dateTimeWithoutTimezone".

dateOnly() - Shortcut for date-only fields.

timeOnly() - Shortcut for time-only fields.

withTimezone() - Shortcut for datetime with timezone.

withoutTimezone() - Shortcut for datetime without timezone.

Validators

required(message?: string) - Makes the field required.

dateGte(value: string, message?: string) - Date must be greater than or equal to the specified date.

dateLte(value: string, message?: string) - Date must be less than or equal to the specified date.

Example

Reference Field

Registry Method: ref()

Reference fields create relationships between content entries.

Methods

models(models: Array<{modelId: string}>) - Specifies which models can be referenced.

Validators

required(message?: string) - Makes the field required.

listMinLength(value: number, message?: string) - For multiple references, minimum number required.

listMaxLength(value: number, message?: string) - For multiple references, maximum number allowed.

Example

Object Field

Registry Method: object()

Object fields contain nested field structures.

Methods

fields(builder: (registry) => Record<string, FieldBuilder>) - Defines nested fields.

layout(layout: string[][] | (builder) => void) - Defines the layout of nested fields.

Validators

required(message?: string) - Makes the field required.

Example

Dynamic Zone Field

Registry Method: dynamicZone()

Dynamic zone fields allow selecting from predefined templates.

Methods

template(id: string, config: TemplateConfig) - Adds a template option.

Template config properties:

• name: string - Template display name
• gqlTypeName: string - GraphQL type name for the template
• icon?: CmsIcon - Icon for the template
• description?: string - Template description
• fields: (registry) => Record<string, FieldBuilder> - Template fields
• layout?: string[][] - Template field layout

Validators

required(message?: string) - Makes the field required.

Example

Field Renderers

Field renderers determine how fields are displayed in the UI. To specify a renderer:

For a complete list of available renderers and which fields they support, see the Field Renderers documentation.