Page cover

Home

initial page

This Space:

Navigationchevron-right

Table of contents

Tools

Programming Languages

Python

JavaScript

Web Development Frameworks & Libraries

Productivity

Misc

Links

Websites

Backend

Networking

Resources

General Knowledge

Finance

Science & Tech (Innovation)

Reading

Social Media & Trends

Docs

Code Editors & Tools

Cool Stuff

Server-Side

WEB_DEV_TOOLS

GIT REPO FOR THIS WEBSITE:

Main Blog:

Website Navigation (my websites)
Website Navigation (my websites)

Table of contents

Tools

Programming Languages

Python

JavaScript

Web Development Frameworks & Libraries

Productivity

Misc

Websites

Backend

Networking

Resources

General Knowledge

Finance

Science & Tech (Innovation)

Reading

Docs

Code Editors & Tools

Cool Stuff

Server-Side

WEB_DEV_TOOLS

DS_ALGOS_BRAINTEASERS

Free-Stuff

General Comp Sci

Blockchain & Crypto

WEBSITE ⇄ Portfolio ⇄ Collaborate ⇄ Other-Websites ⇄ Recent Work

Profile viewsarrow-up-rightGitterarrow-up-righthackmd-github-sync-badgearrow-up-rightGitHub followersarrow-up-right

A passionate Web Developer, Electrical Engineer, Musician & Producer

code
code
statistics
statistics

Portfolioarrow-up-right Resume PDFarrow-up-right Bryan's emailenvelope Blogarrow-up-right Linkedinarrow-up-right AngelListarrow-up-right GitHub bgoonzarrow-up-right

emailenvelopefacebookarrow-up-righttwitterarrow-up-rightyoutubearrow-up-rightinstagramarrow-up-rightlinkedinarrow-up-right mediumarrow-up-rightspotifyarrow-up-right

Bryans github activity graph
Bryans github activity graph

Languages and Tools:

arduino arrow-up-rightaws arrow-up-rightazure arrow-up-rightbabel arrow-up-rightbash arrow-up-rightbootstrap arrow-up-rightcplusplus arrow-up-rightcss3 arrow-up-rightd3js arrow-up-rightdocker arrow-up-rightelasticsearch arrow-up-rightember arrow-up-rightexpress arrow-up-rightfirebase arrow-up-rightgatsby arrow-up-rightgcp arrow-up-rightgit arrow-up-rightheroku arrow-up-righthtml5 arrow-up-rightjavascript arrow-up-rightjekyll arrow-up-rightlinux arrow-up-rightmocha arrow-up-rightmongodb arrow-up-rightnextjs arrow-up-rightnodejs arrow-up-rightphotoshop arrow-up-rightpostman arrow-up-rightpug arrow-up-rightpuppeteer arrow-up-rightpython arrow-up-rightreact arrow-up-rightreactnative arrow-up-righttypescript arrow-up-rightvagrant arrow-up-rightwebpack arrow-up-rightxd arrow-up-rightzapierarrow-up-right

postgresql
postgresql

bgoonzarrow-up-rightbgoonzarrow-up-right

ReadMe Cardarrow-up-right ReadMe Cardarrow-up-right ReadMe Cardarrow-up-rightReadMe Cardarrow-up-right

trophy
trophy
Top Langs
Top Langs

Python Website:

Widgets

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 ownarrow-up-right!

Widgets are specified as collection fields in the Netlify CMS config.yml file. Note that YAML syntaxarrow-up-right 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 sitearrow-up-right. (No login required: click the login button and the CMS will open.) You can refer to the demo configuration codearrow-up-right to see how each field was configured.

Common widget options

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 patternarrow-up-right and an error message; more extensive validation can be achieved with custom widgetsarrow-up-right

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

Default widgets

BooleanCodeColorDateDateTimeFileHiddenImageListMapMarkdownNumberObjectRelationSelectStringText

Boolean

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:

Last updated