Home
initial page
Last updated
Copy of Web-Dev-Hub-Docs
initial page
Last updated
WEBSITE ⇄ Portfolio ⇄ Collaborate ⇄ Other-Websites ⇄ Recent Work
A passionate Web Developer, Electrical Engineer, Musician & Producer
Widgets define the data type and interface for entry fields. Netlify CMS comes with several built-in widgets. Click the widget names in the sidebar to jump to specific widget details. We’re always adding new widgets, and you can also create your own!
Widgets are specified as collection fields in the Netlify CMS config.yml 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 the CMS will open.) You can refer to the demo configuration code to see how each field was configured.
The following options are available on all fields:
required: specify as false to make a field optional; defaults to true
hint: optionally add helper text directly below a widget. Useful for including instructions. Accepts markdown for bold, italic, strikethrough, and links.
pattern: add field validation by specifying a list with a regex pattern and an error message; more extensive validation can be achieved with custom widgets
Example: yaml - label: "Title" name: "title" widget: "string" pattern: ['.{12,}', "Must have at least 12 characters"]
BooleanCodeColorDateDateTimeFileHiddenImageListMapMarkdownNumberObjectRelationSelectStringText
The boolean widget translates a toggle switch input to a true/false value.
Name: boolean
UI: toggle switch
Data type: boolean
Options:
default: accepts true or false; defaults to false when required is set to false
Example:
- {label: "Draft", name: "draft", widget: "boolean", default: true}
