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
Name | Description |
---|---|
Boolean | The boolean widget translates a toggle switch input to a true or false value |
Code | The code widget provides a code editor (powered by Codemirror) with optional syntax awareness |
Color | The color widget translates a color picker to a color string |
Datetime | The datetime widget translates a datetime picker to a datetime string |
File | The file widget allows editors to upload a file or select an existing one from the media library |
Hidden | Hidden widgets do not display in the UI |
Image | The file widget allows editors to upload a file or select an existing one from the media library |
List | The list widget allows you to create a repeatable item in the UI which saves as a list of widget values |
Map | The map widget allows you to edit spatial data using an interactive map |
Markdown | The markdown widget provides a full fledged text editor allowing users to format text with features such as headings and blockquotes |
Number | The number widget uses an HTML number input |
Object | The object widget allows you to group multiple widgets together, nested under a single field |
Relation | The relation widget allows you to reference items from another collection |
Select | The select widget allows you to pick a string value from a dropdown menu |
String | The string widget translates a basic text input to a string value |
Text | The text widget takes a multiline text field and saves it as a string |
Text | The uuid widget generates a unique id (uuid) and saves it as a string |
Common widget options
The following options are available on all fields:
Name | Type | Default | Description |
---|---|---|---|
name | string | The name of the field | |
widget | string | 'string' | Optional. The type of widget to render for the field |
label | string | name | Optional. The display name of the field |
required | boolean | true | Optional. Specify as false to make a field optional |
hint | string | Optional. Adds helper text directly below a widget. Useful for including instructions. Accepts markdown for bold, italic, strikethrough, and links. | |
pattern | list of strings | Optional. Adds field validation by specifying a list with a regex pattern and an error message; more extensive validation can be achieved with custom widgets | |
i18n | boolean |'translate' |'duplicate' |'none' | Optional. Beta Feature
| |
comment | string | Optional. Adds comment before the field (only supported for yaml) |
Example
name: title
label: Title
widget: string
pattern: ['.{12,}', 'Must have at least 12 characters']