Static CMS
Star StaticJsCMS/static-cms on GitHubSponsor
v2.4.3DocsCommunitySponsor

Overview

Widgets define the data type and interface for entry fields. Static CMS comes with several built-in widgets. Click the widget names in the sidebar to jump to specific widget details. You can also create your own!

Widgets are specified as collection fields in the Static CMS config file. Note that YAML syntax allows lists and objects to be written in block or inline style, and the code samples below include a mix of both.

To see working examples of all of the built-in widgets, try making a 'Kitchen Sink' collection item on the CMS demo site. (No login required: click the login button and Static CMS will open.) You can refer to the demo configuration code to see how each field was configured.

Available Widgets

NameDescription
BooleanThe boolean widget translates a toggle switch input to a true or false value
CodeThe code widget provides a code editor (powered by Codemirror) with optional syntax awareness
ColorThe color widget translates a color picker to a color string
DatetimeThe datetime widget translates a datetime picker to a datetime string
FileThe file widget allows editors to upload a file or select an existing one from the media library
HiddenHidden widgets do not display in the UI
ImageThe file widget allows editors to upload a file or select an existing one from the media library
ListThe list widget allows you to create a repeatable item in the UI which saves as a list of widget values
MapThe map widget allows you to edit spatial data using an interactive map
MarkdownThe markdown widget provides a full fledged text editor allowing users to format text with features such as headings and blockquotes
NumberThe number widget uses an HTML number input
ObjectThe object widget allows you to group multiple widgets together, nested under a single field
RelationThe relation widget allows you to reference items from another collection
SelectThe select widget allows you to pick a string value from a dropdown menu
StringThe string widget translates a basic text input to a string value
TextThe text widget takes a multiline text field and saves it as a string
TextThe uuid widget generates a unique id (uuid) and saves it as a string

Common widget options

The following options are available on all fields:

NameTypeDefaultDescription
namestringThe name of the field
widgetstring'string'Optional. The type of widget to render for the field
labelstringnameOptional. The display name of the field
requiredbooleantrueOptional. Specify as false to make a field optional
hintstringOptional. Adds helper text directly below a widget. Useful for including instructions. Accepts markdown for bold, italic, strikethrough, and links.
patternlist of stringsOptional. Adds field validation by specifying a list with a regex pattern and an error message; more extensive validation can be achieved with custom widgets
i18nboolean
|'translate'
|'duplicate'
|'none'
Optional.
Beta Feature
  • translate - Allows translation of the field
  • duplicate - Duplicates the value from the default locale
  • true - Accept parent values as default
  • none or false - Exclude field from translations
commentstringOptional. Adds comment before the field (only supported for yaml)

Example

name: title
label: Title
widget: string
pattern: ['.{12,}', 'Must have at least 12 characters']