{"pageProps":{"error":null,"preview":false,"file":{"fileRelativePath":"content/docs/plugins/fields.md","data":{"frontmatter":{"title":"Field Plugins","prev":"/docs/plugins/forms","next":"/docs/plugins/content-creators"},"excerpt":" Fields are added to forms via the fields array and create the editing interface of a form. Field Config All field plugins share a common config: Default Field Plugins These are the default field&hellip;","markdownBody":"\nFields are added to forms via the `fields` array and create the editing interface of a form.\n\n## Field Config\n\nAll field plugins share a common config:\n\n```typescript\ninterface FieldConfig {\n  name: string\n  component: string | ReactComponent\n  label?: string\n  parse?(value: any, name: string, field: Field): any\n  format?(value: any, name: string, field: Field): any\n  validate?(\n    value: any,\n    allValues: any,\n    meta: any,\n    field: Field\n  ): string | object | undefined\n}\n```\n\n| key         | description                                                                                    |\n| ----------- | ---------------------------------------------------------------------------------------------- |\n| `name`      | Equivalent of an input's `name` attribute.                                                     |\n| `component` | Either a string denoting a field already registered with the CMS, or a custom field component. |\n| `label`     | _Optional:_ A label to render above the field input.                                           |\n| `parse`     | _Optional:_ Prepare the data for usage in the field component.                                 |\n| `format`    | _Optional:_ Prepare the data for saving.                                                       |\n| `validate`  | _Optional:_ Return undefined when valid. Return a string or an object when there are errors.   |\n\n## Default Field Plugins\n\nThese are the default field plugins available through the CMS:\n\n- [Text](/docs/plugins/fields/text)\n- [Textarea](/docs/plugins/fields/textarea)\n- [Number](/docs/plugins/fields/number)\n- [Image](/docs/plugins/fields/image)\n- [Color](/docs/plugins/fields/color) _May be external soon_\n- [Toggle](/docs/plugins/fields/toggle)\n- [Select](/docs/plugins/fields/select)\n- [Tags](/docs/plugins/fields/tags)\n- [List](/docs/plugins/fields/list)\n- [Group](/docs/plugins/fields/group)\n- [Group List](/docs/plugins/fields/group-list)\n- [Blocks](/docs/plugins/fields/blocks)\n\n## External Field Plugins\n\nThese are plugins that must be installed through separate packages:\n\n- [Date & Time](/docs/plugins/fields/date)\n- [Markdown](/docs/plugins/fields/markdown)\n- [HTML](/docs/plugins/fields/html)\n\n## Field Definition\n\nYou can add fields to a form through the `fields` array in the [form configuration](/docs/plugins/forms#form-configuration). The Field definition at minimum needs a `name` and `component`. This is an example of a simple [`text`](/docs/plugins/fields/text) field definition.\n\n**Example form configuration**\n\n```js\nconst formOptions = {\n  id: 'lynel-hoofs',\n  label: 'Edit This Page',\n  fields: [\n    {\n      name: 'tagline',\n      component: 'text',\n    },\n  ],\n}\n```\n\n> Refer to individual field plugin docs for additional examples.\n\n### _name_\n\nThe `name` property connects the field with the source data by providing the path to that content from the root of the source data.\n\nFor example, say we had a JSON object:\n\n```json\n{\n  \"headline\": \"Banana Pancakes\"\n}\n```\n\nOur field definition to edit `headline` would be:\n\n```js\n{\n  fields: [\n    {\n      name: 'headline',\n      component: 'text',\n    },\n  ],\n}\n```\n\nIf the data structure looked a little different:\n\n```json\n{\n  \"hero\": {\n    \"headline\": \"Banana Pancakes\"\n  }\n}\n```\n\nThe `name` property should be updated to reflect the different path:\n\n```js\n{\n  fields: [\n    {\n      name: 'hero.headline',\n      component: 'text',\n    },\n  ],\n}\n```\n\n### _component_\n\nThe `component` field property can either be the name of a field plugin (a string), or a React Component.\n\nAll of the previous examples show the `component` being set with a string:\n\n```js\n{\n  fields: [\n    {\n      name: 'background_color',\n      component: 'color',\n    },\n  ],\n}\n```\n\n`'color'` is referring to the `name` of the Color [Field Plugin](/docs/plugins/fields/custom-fields#2-creating-field-plugins) that is hooked up to the CMS by default.\n\nYou can also define components inline to render in place of a default field:\n\n**Example**\n\n```js\nconst formOptions = {\n  label: 'My Page',\n  fields: [\n    {\n      label: \"Athlete's Name\",\n      name: 'name',\n      component: 'text',\n    },\n    // The custom inline field\n    {\n      name: '_',\n      component: () => <h4>Best Scores</h4>,\n    },\n    {\n      name: 'scores',\n      component: 'list',\n      field: 'number',\n    },\n  ],\n}\n```\n\nIn the example above, the custom inline field component isn't being used to edit data, but rather as a method of customizing the sidebar organization.\n\n## Additional Reading\n\n- Read these blogs on creating custom [field components](/blog/custom-field-components) and [field plugins](/blog/custom-field-plugins)\n- There are also [fields for Inline Editing](/docs/ui/inline-editing#using-pre-configured-inline-fields)\n"}},"tocItems":"- [Field Config](#field-config)\n- [Default Field Plugins](#default-field-plugins)\n- [External Field Plugins](#external-field-plugins)\n- [Field Definition](#field-definition)\n  * [_name_](#name)\n  * [_component_](#component)\n- [Additional Reading](#additional-reading)","docsNav":[{"title":"Getting Started","id":"getting-started","items":[{"id":"/docs/getting-started/introduction","slug":"/docs/getting-started/introduction","title":"Introduction"}]},{"title":"CMS","id":"the-cms","items":[{"id":"/docs/cms","slug":"/docs/cms","title":"Overview"}]},{"title":"User Interface","id":"user-interface","items":[{"id":"/docs/ui","title":"Sidebar & Toolbar","slug":"/docs/ui"},{"title":"Inline Editing","id":"inline-editing","slug":"/docs/ui/inline-editing","items":[{"id":"/docs/ui/inline-editing/inline-text","title":"Inline Text","slug":"/docs/ui/inline-editing/inline-text"},{"id":"/docs/ui/inline-editing/inline-textarea","title":"Inline Textarea","slug":"/docs/ui/inline-editing/inline-textarea"},{"id":"/docs/ui/inline-editing/inline-wysiwyg","title":"Inline Wysiwyg","slug":"/docs/ui/inline-editing/inline-wysiwyg"},{"id":"/docs/ui/inline-editing/inline-image","title":"Inline Image","slug":"/docs/ui/inline-editing/inline-image"},{"id":"/docs/ui/inline-editing/inline-group","title":"Inline Group","slug":"/docs/ui/inline-editing/inline-group"},{"id":"/docs/ui/inline-editing/inline-blocks","title":"Inline Blocks","slug":"/docs/ui/inline-editing/inline-blocks"}]},{"id":"/docs/ui/alerts","title":"Alerts","slug":"/docs/ui/alerts"},{"id":"/docs/ui/styles","title":"Custom Styles","slug":"/docs/ui/styles"}]},{"id":"plugins","title":"Plugins","items":[{"title":"About Plugins","id":"forms","slug":"/docs/plugins"},{"title":"Forms","id":"forms","slug":"/docs/plugins/forms"},{"title":"Fields","id":"fields","slug":"/docs/plugins/fields","items":[{"id":"/docs/plugins/fields/text","slug":"/docs/plugins/fields/text","title":"Text"},{"id":"/docs/plugins/fields/textarea","slug":"/docs/plugins/fields/textarea","title":"Text Area"},{"id":"/docs/plugins/fields/number","slug":"/docs/plugins/fields/number","title":"Number"},{"id":"/docs/plugins/fields/image","slug":"/docs/plugins/fields/image","title":"Image"},{"id":"/docs/plugins/fields/color","slug":"/docs/plugins/fields/color","title":"Color"},{"id":"/docs/plugins/fields/toggle","slug":"/docs/plugins/fields/toggle","title":"Toggle"},{"id":"/docs/plugins/fields/select","slug":"/docs/plugins/fields/select","title":"Select"},{"id":"/docs/plugins/fields/tags","slug":"/docs/plugins/fields/tags","title":"Tags"},{"id":"/docs/plugins/fields/list","slug":"/docs/plugins/fields/list","title":"List"},{"id":"/docs/plugins/fields/group","slug":"/docs/plugins/fields/group","title":"Group"},{"id":"/docs/plugins/fields/group-list","slug":"/docs/plugins/fields/group-list","title":"Group List"},{"id":"/docs/plugins/fields/blocks","slug":"/docs/plugins/fields/blocks","title":"Blocks"},{"id":"/docs/plugins/fields/date","slug":"/docs/plugins/fields/date","title":"Date & Time"},{"id":"/docs/plugins/fields/markdown","slug":"/docs/plugins/fields/markdown","title":"Markdown"},{"id":"/docs/plugins/fields/html","slug":"/docs/plugins/fields/html","title":"HTML"},{"id":"/docs/plugins/fields/custom-fields","slug":"/docs/plugins/fields/custom-fields","title":"Custom Fields"}]},{"title":"Content Creators","id":"content-creator","slug":"/docs/plugins/content-creators"},{"title":"Screens","id":"screens","slug":"/docs/plugins/screens"},{"title":"Toolbar Widgets","id":"toolbar:widget","slug":"/docs/plugins/toolbar-widgets"}]},{"id":"events","title":"Events","items":[{"id":"/docs/events","slug":"/docs/events","title":"About Events"}]},{"title":"Media","id":"media","items":[{"id":"/docs/media","slug":"/docs/media","title":"About Media"}]},{"id":"apis","title":"External APIs","items":[{"id":"/docs/api","slug":"/docs/apis","title":"About APIs"}]},{"title":"Integrations","id":"nextjs","items":[{"id":"/docs/integrations/nextjs","slug":"/docs/integrations/nextjs","title":"Next.js"},{"id":"/docs/integrations/gatsby","slug":"/docs/integrations/gatsby","title":"Gatsby"}]},{"title":"Release Notes","id":"releases","items":[{"id":"/docs/releases","href":"/docs/releases","title":"All Releases"}]},{"title":"Packages","id":"packages","items":[{"id":"/packages/react-tinacms-date","slug":"/packages/react-tinacms-date","title":"react-tinacms-date"},{"id":"/packages/react-tinacms-editor","slug":"/packages/react-tinacms-editor","title":"react-tinacms-editor"},{"id":"/packages/react-tinacms-github","slug":"/packages/react-tinacms-github","title":"react-tinacms-github"},{"id":"/packages/react-tinacms-inline","slug":"/packages/react-tinacms-inline","title":"react-tinacms-inline"},{"id":"/packages/react-tinacms-strapi","slug":"/packages/react-tinacms-strapi","title":"react-tinacms-strapi"},{"id":"/packages/next-tinacms-github","slug":"/packages/next-tinacms-github","title":"next-tinacms-github"},{"id":"/packages/next-tinacms-json","slug":"/packages/next-tinacms-json","title":"next-tinacms-json"},{"id":"/packages/next-tinacms-markdown","slug":"/packages/next-tinacms-markdown","title":"next-tinacms-markdown"},{"id":"/packages/gatsby-plugin-tinacms","slug":"/packages/gatsby-plugin-tinacms","title":"gatsby-plugin-tinacms"},{"id":"/packages/gatsby-tinacms-git","slug":"/packages/gatsby-tinacms-git","title":"gatsby-tinacms-git"},{"id":"/packages/gatsby-tinacms-json","slug":"/packages/gatsby-tinacms-json","title":"gatsby-tinacms-json"},{"id":"/packages/gatsby-tinacms-remark","slug":"/packages/gatsby-tinacms-remark","title":"gatsby-tinacms-remark"}]}],"nextPage":{"slug":"/docs/plugins/content-creators","title":"Content Creator Plugins"},"prevPage":{"slug":"/docs/plugins/forms","title":"Forms"}},"__N_SSG":true}