{"id":16885222,"url":"https://github.com/thclark/react-jsonschema-form","last_synced_at":"2026-04-17T15:03:17.456Z","repository":{"id":69697341,"uuid":"142770747","full_name":"thclark/react-jsonschema-form","owner":"thclark","description":"DUPE of a work in progress over at mozilla-services, because they broke my install.","archived":false,"fork":false,"pushed_at":"2018-07-29T15:09:37.000Z","size":424,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-25T07:24:49.169Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thclark.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-07-29T15:05:05.000Z","updated_at":"2018-07-29T15:09:39.000Z","dependencies_parsed_at":null,"dependency_job_id":"6fa287c3-649a-4ac5-92ad-cdbc4441234d","html_url":"https://github.com/thclark/react-jsonschema-form","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thclark%2Freact-jsonschema-form","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thclark%2Freact-jsonschema-form/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thclark%2Freact-jsonschema-form/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thclark%2Freact-jsonschema-form/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thclark","download_url":"https://codeload.github.com/thclark/react-jsonschema-form/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244560373,"owners_count":20472218,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-13T16:34:12.575Z","updated_at":"2026-04-17T15:03:17.142Z","avatar_url":"https://github.com/thclark.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# WIP\n\n## TODOs:\n- add the topic about templates\n  - FieldTemplate\n  - ArrayFieldTemplate\n  - ObjectFieldTemplate\n  - SubmitTemplate\n  - ErrorListTemplate\n  - TitleTemplate\n  - DescriptionTemplate\n- add the topic about themes\n  - `Form.props.theme`\n  - avalaible theme packages\n- add migration guide\n\n\nreact-jsonschema-form\n=====================\n\n[![Build Status](https://travis-ci.org/mozilla-services/react-jsonschema-form.svg)](https://travis-ci.org/mozilla-services/react-jsonschema-form)\n\nA simple [React](http://facebook.github.io/react/) component capable of building HTML forms out of a [JSON schema](http://json-schema.org/) ~and using [Bootstrap](http://getbootstrap.com/) semantics by default.~\n\nA [live playground](https://mozilla-services.github.io/react-jsonschema-form/) is hosted on gh-pages.\n\n![](http://i.imgur.com/M8ZCES5.gif)\n\n## Table of Contents\n\n  - [Philosophy](#philosophy)\n  - [Installation](#installation)\n     - [As a npm-based project dependency](#as-a-npm-based-project-dependency)\n     - [As a script served from a CDN](#as-a-script-served-from-a-cdn)\n  - [Usage](#usage)\n     - [Form initialization](#form-initialization)\n     - [Form event handlers](#form-event-handlers)\n        - [Form submission](#form-submission)\n        - [Form error event handler](#form-error-event-handler)\n        - [Form data changes](#form-data-changes)\n        - [Form field blur events](#form-field-blur-events)\n        - [Form field focus events](#form-field-focus-events)\n  - [Form customization](#form-customization)\n     - [The uiSchema object](#the-uischema-object)\n     - [Alternative widgets](#alternative-widgets)\n        - [For boolean fields](#for-boolean-fields)\n        - [For string fields](#for-string-fields)\n           - [String formats](#string-formats)\n        - [For number and integer fields](#for-number-and-integer-fields)\n        - [Disabled fields](#disabled-fields)\n        - [Read-only fields](#read-only-fields)\n        - [Hidden widgets](#hidden-widgets)\n        - [File widgets](#file-widgets)\n           - [Multiple files](#multiple-files)\n           - [File widget input ref](#file-widget-input-ref)\n     - [Object fields ordering](#object-fields-ordering)\n     - [Array item options](#array-item-options)\n        - [orderable option](#orderable-option)\n        - [addable option](#addable-option)\n        - [removable option](#removable-option)\n     - [Custom CSS class names](#custom-css-class-names)\n     - [Custom labels for enum fields](#custom-labels-for-enum-fields)\n        - [Alternative JSON-Schema compliant approach](#alternative-json-schema-compliant-approach)\n     - [Disabled attribute for enum fields](#disabled-attribute-for-enum-fields)\n     - [Multiple choices list](#multiple-choices-list)\n     - [Autogenerated widget ids](#autogenerated-widget-ids)\n     - [Form action buttons](#form-action-buttons)\n     - [Help texts](#help-texts)\n     - [Title texts](#title-texts)\n     - [Description texts](#description-texts)\n     - [Auto focus](#auto-focus)\n     - [Textarea rows option](#textarea-rows-option)\n     - [Placeholders](#placeholders)\n     - [Field labels](#field-labels)\n     - [HTML5 Input Types](#html5-input-types)\n     - [Form attributes](#form-attributes)\n  - [Advanced customization](#advanced-customization)\n     - [Field template](#field-template)\n     - [Array Field Template](#array-field-template)\n     - [Object Field Template](#object-field-template)\n     - [Error List template](#error-list-template)\n     - [Id prefix](#id-prefix)\n     - [Custom widgets and fields](#custom-widgets-and-fields)\n     - [Custom widget components](#custom-widget-components)\n        - [Custom component registration](#custom-component-registration)\n        - [Custom widget options](#custom-widget-options)\n        - [Customizing widgets text input](#customizing-widgets-text-input)\n     - [Custom field components](#custom-field-components)\n        - [Field props](#field-props)\n        - [The registry object](#the-registry-object)\n        - [The formContext object](#the-formcontext-object)\n     - [Custom array field buttons](#custom-array-field-buttons)\n     - [Custom SchemaField](#custom-schemafield)\n     - [Customizing the default fields and widgets](#customizing-the-default-fields-and-widgets)\n     - [Custom titles](#custom-titles)\n     - [Custom descriptions](#custom-descriptions)\n  - [Form data validation](#form-data-validation)\n     - [Live validation](#live-validation)\n     - [HTML5 Validation](#html5-validation)\n     - [Custom validation](#custom-validation)\n     - [Custom error messages](#custom-error-messages)\n     - [Error List Display](#error-list-display)\n     - [The case of empty strings](#the-case-of-empty-strings)\n  - [Styling your forms](#styling-your-forms)\n  - [Schema definitions and references](#schema-definitions-and-references)\n  - [Property dependencies](#property-dependencies)\n     - [Unidirectional](#unidirectional)\n     - [Bidirectional](#bidirectional)\n  - [Schema dependencies](#schema-dependencies)\n     - [Conditional](#conditional)\n     - [Dynamic](#dynamic)\n  - [JSON Schema supporting status](#json-schema-supporting-status)\n  - [Tips and tricks](#tips-and-tricks)\n  - [Contributing](#contributing)\n     - [Coding style](#coding-style)\n     - [Development server](#development-server)\n     - [Tests](#tests)\n        - [TDD](#tdd)\n     - [Releasing](#releasing)\n  - [FAQ](#faq)\n     - [Q: Does rjsf support oneOf, anyOf, multiple types in an array, etc.?](#q-does-rjsf-support-oneof-anyof-multiple-types-in-an-array-etc)\n     - [Q: Will react-jsonschema-form support Material, Ant-Design, Foundation, or [some other specific widget library or frontend style]?](#q-will-react-jsonschema-form-support-material-ant-design-foundation-or-some-other-specific-widget-library-or-frontend-style)\n  - [License](#license)\n\n---\n\n## Philosophy\n\nreact-jsonschema-form is meant to automatically generate a React form based on a [JSON Schema](http://json-schema.org/). It is a major component in the [kinto-admin](https://github.com/Kinto/kinto-admin/). If you want to generate a form for any data, sight unseen, simply given a JSON schema, react-jsonschema-form may be for you. If you have _a priori_ knowledge of your data and want a toolkit for generating forms for it, you might look elsewhere.\n\nreact-jsonschema-form validates that the data conforms to the given schema, but doesn't prevent the user from inputing data that doesn't fit (for example, stripping non-numbers from a number field, or not letting the user add values to an array that is already \"full\".\n\n## Installation\n\nRequires React 15.0.0+.\n\n\u003e Note: The `master` branch of the repository reflects ongoing development. Releases are published as [tags](https://github.com/mozilla-services/react-jsonschema-form/releases).\n\u003e\n\u003e You should never blindly install from `master`, but rather check what the available stable releases are.\n\n\n### As a npm-based project dependency\n\n```\n$ npm install react-jsonschema-form --save\n```\n\n\u003e Note: While the library renders [Bootstrap](http://getbootstrap.com/) HTML semantics, you have to build/load the Bootstrap styles on your own.\n\n### As a script served from a CDN\n\n```html\n  \u003cscript src=\"https://unpkg.com/react-jsonschema-form/dist/react-jsonschema-form.js\"\u003e\u003c/script\u003e\n```\n\nSource maps are available at [this url](https://unpkg.com/react-jsonschema-form/dist/react-jsonschema-form.js.map).\n\n\u003e Note: The CDN version **does not** embed *react* nor *react-dom*.\n\u003e\n\u003e You'll also need to alias the default export property to use the Form component:\n\n```jsx\nconst Form = JSONSchemaForm.default;\n// or\nconst {default: Form} = JSONSchemaForm;\n```\n\n## Usage\n\n```jsx\nimport React, { Component } from \"react\";\nimport { render } from \"react-dom\";\n\nimport Form from \"react-jsonschema-form\";\n\nconst schema = {\n  title: \"Todo\",\n  type: \"object\",\n  required: [\"title\"],\n  properties: {\n    title: {type: \"string\", title: \"Title\", default: \"A new task\"},\n    done: {type: \"boolean\", title: \"Done?\", default: false}\n  }\n};\n\nconst log = (type) =\u003e console.log.bind(console, type);\n\nrender((\n  \u003cForm schema={schema}\n        onChange={log(\"changed\")}\n        onSubmit={log(\"submitted\")}\n        onError={log(\"errors\")} /\u003e\n), document.getElementById(\"app\"));\n```\n\nThat should give something like this (if you took care of loading the standard [Bootstrap](http://getbootstrap.com/) stylesheet):\n\n![](http://i.imgur.com/DZQYPyu.png)\n\n### Form initialization\n\nOften you'll want to prefill a form with existing data; this is done by passing a `formData` prop object matching the schema:\n\n```jsx\nconst formData = {\n  title: \"First task\",\n  done: true\n};\n\nrender((\n  \u003cForm schema={schema}\n        formData={formData} /\u003e\n), document.getElementById(\"app\"));\n```\n\nNOTE: If your form have a single field, pass a single value to `formData`. ex: `formData='Charlie'`\n\nWARNING: If you have situations where your parent component can re-render, make sure you listen to the `onChange` event and update the data you pass to the `formData` attribute.\n\n### Form event handlers\n\n#### Form submission\n\nYou can pass a function as the `onSubmit` prop of your `Form` component to listen to when the form is submitted and its data are valid. It will be passed a result object having a `formData` attribute, which is the valid form data you're usually after:\n\n```js\nconst onSubmit = ({formData}) =\u003e console.log(\"Data submitted: \",  formData);\n\nrender((\n  \u003cForm schema={schema}\n        onSubmit={onSubmit} /\u003e\n), document.getElementById(\"app\"));\n```\n\n#### Form error event handler\n\nTo react to when submitted form data are invalid, pass an `onError` handler, which is passed the list of encountered errors:\n\n```js\nconst onError = (errors) =\u003e console.log(\"I have\", errors.length, \"errors to fix\");\n\nrender((\n  \u003cForm schema={schema}\n        onError={onError} /\u003e\n), document.getElementById(\"app\"));\n```\n\n#### Form data changes\n\nIf you plan on being notified every time the form data are updated, you can pass an `onChange` handler, which will receive the same args as `onSubmit` any time a value is updated in the form.\n\n#### Form field blur events\n\nSometimes you may want to trigger events or modify external state when a field has been touched, so you can pass an `onBlur` handler, which will receive the id of the input that was blurred and the field value.\n\n#### Form field focus events\n\nSometimes you may want to trigger events or modify external state when a field has been focused, so you can pass an `onFocus` handler, which will receive the id of the input that is focused and the field value.\n\n## Form customization\n\n### The `uiSchema` object\n\nJSONSchema is limited for describing how a given data type should be rendered as a form input component, that's why this lib introduces the concept of *UI schema*.\n\nA UI schema is basically an object literal providing information on **how** the form should be rendered, while the JSON schema tells **what**.\n\nThe uiSchema object follows the tree structure of the form field hierarchy, and for each allows to define how it should be rendered:\n\n```js\nconst schema = {\n  type: \"object\",\n  properties: {\n    foo: {\n      type: \"object\",\n      properties: {\n        bar: {type: \"string\"}\n      }\n    },\n    baz: {\n      type: \"array\",\n      items: {\n        type: \"object\",\n        properties: {\n          description: {\n            \"type\": \"string\"\n          }\n        }\n      }\n    }\n  }\n}\n\nconst uiSchema = {\n  foo: {\n    bar: {\n      \"ui:widget\": \"textarea\"\n    },\n  },\n  baz: {\n    // note the \"items\" for an array\n    items: {\n      description: {\n        \"ui:widget\": \"textarea\"\n      }\n    }\n  }\n}\n\nrender((\n  \u003cForm schema={schema}\n        uiSchema={uiSchema} /\u003e\n), document.getElementById(\"app\"));\n```\n\n### Alternative widgets\n\nThe uiSchema `ui:widget` property tells the form which UI widget should be used to render a certain field:\n\nExample:\n\n```jsx\nconst uiSchema =  {\n  done: {\n    \"ui:widget\": \"radio\" // could also be \"select\"\n  }\n};\n\nrender((\n  \u003cForm schema={schema}\n        uiSchema={uiSchema}\n        formData={formData} /\u003e\n), document.getElementById(\"app\"));\n```\n\nHere's a list of supported alternative widgets for different JSONSchema data types:\n\n#### For `boolean` fields\n\n  * `radio`: a radio button group with `true` and `false` as selectable values;\n  * `select`: a select box with `true` and `false` as options;\n  * by default, a checkbox is used\n\n\u003e Note: To set the labels for a boolean field, instead of using `true` and `false` you can set `enumNames` in your schema. Note that `enumNames` belongs in your `schema`, not the `uiSchema`, and the order is always `[true, false]`.\n\n#### For `string` fields\n\n  * `textarea`: a `textarea` element is used;\n  * `password`: an `input[type=password]` element is used;\n  * `color`: an `input[type=color]` element is used;\n  * by default, a regular `input[type=text]` element is used.\n\n##### String formats\n\nThe built-in string field also supports the JSONSchema `format` property, and will render an appropriate widget by default for the following string formats:\n\n- `email`: An `input[type=email]` element is used;\n- `uri`: An `input[type=url]` element is used;\n- `data-url`: By default, an `input[type=file]` element is used; in case the string is part of an array, multiple files will be handled automatically (see [File widgets](#file-widgets)).\n- `date`: By default, an `input[type=date]` element is used;\n- `date-time`: By default, an `input[type=datetime-local]` element is used.\n\n![](http://i.imgur.com/xqu6Lcp.png)\n\nPlease note that while standardized, `datetime-local` and `date` input elements are not yet supported by Firefox and IE. If you plan on targeting these platforms, two alternative widgets are available:\n\n- `alt-datetime`: Six `select` elements are used to select the year, the month, the day, the hour, the minute and the second;\n- `alt-date`: Three `select` elements are used to select the year, month and the day.\n\n![](http://i.imgur.com/VF5tY60.png)\n\nYou can customize the list of years displayed in the *year* select by providing a ``yearsRange`` property to ``ui:options`` in your uiSchema:\n\n```jsx\nuiSchema: {\n  a_date: {\n    \"alt-datetime\": {\n      \"ui:widget\": \"alt-datetime\",\n      \"ui:options\": {\n        yearsRange: [1980, 2030],\n      },\n    },\n  },\n},\n```\n\n#### For `number` and `integer` fields\n\n  * `updown`: an `input[type=number]` updown selector;\n  * `range`: an `input[type=range]` slider;\n  * `radio`: a radio button group with enum values. **can only be used when `enum` values are specified for this input**\n  * by default, a regular `input[type=text]` element is used.\n\n\u003e Note: for numbers, `min`, `max` and `step` input attributes values will be handled according to JSONSchema's `minimum`, `maximum` and `multipleOf` values when they're defined.\n\n#### Disabled fields\n\nThe `ui:disabled` uiSchema directive will disable all child widgets from a given field.\n\n#### Read-only fields\n\nThe `ui:readonly` uiSchema directive will mark all child widgets from a given field as read-only.\n\n\u003e Note: if you're about the difference between a *disabled* field and a *readonly* one: marking a field as read-only will render it greyed but its text value will be selectable; disabling it will prevent its value to be selected at all.\n\n#### Hidden widgets\n\nIt's possible to use a hidden widget for a given field by setting the `ui:widget` uiSchema directive to `hidden` for this field:\n\n```js\nconst schema = {\n  type: \"object\",\n  properties: {\n    foo: {type: \"boolean\"}\n  }\n};\n\nconst uiSchema = {\n  foo: {\"ui:widget\": \"hidden\"}\n};\n```\n\n\u003e Notes\n\u003e\n\u003e - Hiding widgets is only supported for `boolean`, `string`, `number` and `integer` schema types;\n\u003e - A hidden widget takes its value from the `formData` prop.\n\n#### File widgets\n\nThis library supports a limited form of `input[type=file]` widgets, in the sense that it will propagate file contents to form data state as [data-url](http://dataurl.net/#about)s.\n\nThere are two ways to use file widgets:\n\n**By declaring a `string` json schema type along a `data-url` [format](#string-formats):**\n\n```js\nconst schema = {\n  type: \"string\",\n  format: \"data-url\",\n};\n```\n\n**By specifying a `ui:widget` field uiSchema directive as `file`:**\n\n```js\nconst schema = {\n  type: \"string\",\n};\n\nconst uiSchema = {\n  \"ui:widget\": \"file\",\n};\n```\n\n##### Multiple files\n\nMultiple files selectors are supported by defining an array of strings having `data-url` as a format:\n\n```js\nconst schema = {\n  type: \"array\",\n  items: {\n    type: \"string\",\n    format: \"data-url\",\n  }\n};\n```\n\n\u003e Note that storing large dataURIs into form state might slow rendering.\n\n##### File widget input ref\n\nThe included `FileWidget` exposes a reference to the `\u003cinput type=\"file\" /\u003e` element node as an `inputRef` component property.\n\nThis allows you to programmatically trigger the browser's file selector which can be used in a custom file widget.\n\n### Object fields ordering\n\nSince the order of object properties in Javascript and JSON is not guaranteed, the `uiSchema` object spec allows you to define the order in which properties are rendered using the `ui:order` property:\n\n```jsx\nconst schema = {\n  type: \"object\",\n  properties: {\n    foo: {type: \"string\"},\n    bar: {type: \"string\"}\n  }\n};\n\nconst uiSchema = {\n  \"ui:order\": [\"bar\", \"foo\"]\n};\n\nrender((\n  \u003cForm schema={schema}\n        uiSchema={uiSchema} /\u003e\n), document.getElementById(\"app\"));\n```\n\nIf a guaranteed fixed order is only important for some fields, you can insert a wildcard `\"*\"` item in your `ui:order` definition. All fields that are not referenced explicitly anywhere in the list will be rendered at that point:\n\n```js\nconst uiSchema = {\n  \"ui:order\": [\"bar\", \"*\"]\n};\n```\n\n### Array item options\n\n#### `orderable` option\n\nArray items are orderable by default, and react-jsonschema-form renders move up/down buttons alongside them. The `uiSchema` object spec allows you to disable ordering:\n\n```jsx\nconst schema = {\n  type: \"array\",\n  items: {\n    type: \"string\"\n  }\n};\n\nconst uiSchema = {\n  \"ui:options\":  {\n    orderable: false\n  }\n};\n```\n\n#### `addable` option\n\nIf either `items` or `additionalItems` contains a schema object, an add button for new items is shown by default. You can turn this off with the `addable` option in `uiSchema`:\n\n```jsx\nconst uiSchema = {\n  \"ui:options\":  {\n    addable: false\n  }\n};\n```\n\n#### `removable` option\n\nA remove button is shown by default for an item if `items` contains a schema object, or the item is an `additionalItems` instance. You can turn this off with the `removable` option in `uiSchema`:\n\n```jsx\nconst uiSchema = {\n  \"ui:options\":  {\n    removable: false\n  }\n};\n```\n\n### Custom CSS class names\n\nThe uiSchema object accepts a `classNames` property for each field of the schema:\n\n```jsx\nconst uiSchema = {\n  title: {\n    classNames: \"task-title foo-bar\"\n  }\n};\n```\n\nWill result in:\n\n```html\n\u003cdiv class=\"field field-string task-title foo-bar\" \u003e\n  \u003clabel\u003e\n    \u003cspan\u003eTitle*\u003c/span\u003e\n    \u003cinput value=\"My task\" required=\"\" type=\"text\"\u003e\n  \u003c/label\u003e\n\u003c/div\u003e\n```\n\n### Custom labels for `enum` fields\n\nThis library supports the [`enumNames`](https://github.com/json-schema/json-schema/wiki/enumNames-%28v5-proposal%29) property for `enum` fields, which allows defining custom labels for each option of an `enum`:\n\n```js\nconst schema = {\n  type: \"number\",\n  enum: [1, 2, 3],\n  enumNames: [\"one\", \"two\", \"three\"]\n};\n```\n\nThis will be rendered using a select box that way:\n\n```html\n\u003cselect\u003e\n  \u003coption value=\"1\"\u003eone\u003c/option\u003e\n  \u003coption value=\"2\"\u003etwo\u003c/option\u003e\n  \u003coption value=\"3\"\u003ethree\u003c/option\u003e\n\u003c/select\u003e\n```\n\nNote that string representations of numbers will be cast back and reflected as actual numbers into form state.\n\n#### Alternative JSON-Schema compliant approach\n\nThe JSON Schema team concluded an alternative approach instead of enumNames and react-jsonschema-form supports it as well.\n\n```js\nconst schema = {\n  \"type\": \"number\",\n  \"anyOf\": [\n    {\n      \"type\": \"number\",\n      \"title\": \"one\",\n      \"enum\": [\n        1\n      ]\n    },\n    {\n      \"type\": \"number\",\n      \"title\": \"two\",\n      \"enum\": [\n        2\n      ]\n    },\n    {\n      \"type\": \"number\",\n      \"title\": \"three\",\n      \"enum\": [\n        3\n      ]\n    }\n  ]\n};\n```\n\nAs above this will be rendered using a select box as so:\n\n```html\n\u003cselect\u003e\n  \u003coption value=\"1\"\u003eone\u003c/option\u003e\n  \u003coption value=\"2\"\u003etwo\u003c/option\u003e\n  \u003coption value=\"3\"\u003ethree\u003c/option\u003e\n\u003c/select\u003e\n```\n\nA live example of both approaches side-by-side can be found in the **Alternatives** playground preset.\n\n### Disabled attribute for `enum` fields\n\nThis library supports the 'disabled' attribute for `enum` options. Enum disabled allows disabling options for 'enum' fields.This attribute can be added as a part of uiSchema.\n\n```js\nconst schema = {\n  type: \"string\",\n  enum: [\"one\", \"two\", \"three\"],\n};\n\nconst uiSchema={\n  \"ui:enumDisabled\": ['two'],\n}\n```\n\nThis will be rendered using a select box that way:\n\n```html\n\u003cselect\u003e\n  \u003coption value=\"1\"\u003eone\u003c/option\u003e\n  \u003coption value=\"2\" disabled\u003etwo\u003c/option\u003e\n  \u003coption value=\"3\"\u003ethree\u003c/option\u003e\n\u003c/select\u003e\n```\n\n### Multiple choices list\n\nThe default behavior for array fields is a list of text inputs with add/remove buttons. Though there are two alternative simpler widgets for common situations like picking elements against a list of choices; typically this maps to a schema having:\n\n- an `enum` list for the `items` property of an `array` field\n- with the `uniqueItems` property set to `true`\n\nExample:\n\n```js\nconst schema = {\n  type: \"array\",\n  title: \"A multiple choices list\",\n  items: {\n    type: \"string\",\n    enum: [\"foo\", \"bar\", \"fuzz\", \"qux\"],\n  },\n  uniqueItems: true\n};\n```\n\nBy default, this will automatically render a multiple select box. If you prefer a list of checkboxes, just set the uiSchema `ui:widget` directive to `\"checkboxes\"` for that field:\n\n```js\nconst uiSchema = {\n  \"ui:widget\": \"checkboxes\"\n};\n```\n\nCare should be taken when using the `required` property with arrays.  An empty array is sufficient to pass that validation check.  If you wish to ensure the user populates the array, you can specify the minimum number of items the user must select with the `minItems` property.\n\nExample:\n\n```js\nconst schema = {\n  type: \"array\",\n  minItems: 2,\n  title: \"A multiple choices list\",\n  items: {\n    type: \"string\",\n    enum: [\"foo\", \"bar\", \"fuzz\", \"qux\"],\n  },\n  uniqueItems: true\n};\n```\n\nBy default, checkboxes are stacked but if you prefer them inline:\n\n```js\nconst uiSchema = {\n  \"ui:widget\": \"checkboxes\",\n  \"ui:options\": {\n    inline: true\n  }\n};\n```\n\nSee the \"Arrays\" section of the playground for cool demos.\n\n### Autogenerated widget ids\n\nBy default, the lib will generate ids unique to the form for all rendered widgets. But if you plan on using multiple instances of the `Form` component in a same page, it's wise to declare a root prefix for these, using the `ui:rootFieldId` uiSchema directive:\n\n```js\nconst uiSchema = {\n  \"ui:rootFieldId\": \"myform\"\n};\n```\n\nSo all widgets will have an id prefixed with `myform`.\n\n### Form action buttons\n\nYou can provide custom buttons to your form via the `Form` component's `children`. A default submit button will be rendered if you don't provide children to the `Form` component.\n\n```jsx\nrender((\n  \u003cForm schema={schema}\u003e\n    \u003cdiv\u003e\n      \u003cbutton type=\"submit\"\u003eSubmit\u003c/button\u003e\n      \u003cbutton type=\"button\"\u003eCancel\u003c/button\u003e\n    \u003c/div\u003e\n  \u003c/Form\u003e\n), document.getElementById(\"app\"));\n```\n\n**Warning:** there should be a button or an input with `type=\"submit\"` to trigger the form submission (and then the form validation).\n\n### Help texts\n\nSometimes it's convenient to add some text next to a field to guide the end user filling it; this is the purpose of the `ui:help` uiSchema directive:\n\n```js\nconst schema = {type: \"string\"};\nconst uiSchema = {\n  \"ui:widget\": \"password\",\n  \"ui:help\": \"Hint: Make it strong!\"\n};\n```\n\n![](http://i.imgur.com/scJUuZo.png)\n\nHelp texts work for any kind of field at any level, and will always be rendered immediately below the field component widget(s), but after contextualized errors, if any.\n\n### Title texts\n\nSometimes it's convenient to change title a field; this is the purpose of the `ui:title` uiSchema directive:\n\n```js\nconst schema = {type: \"string\"};\nconst uiSchema = {\n  \"ui:widget\": \"password\",\n  \"ui:title\": \"Your password\"\n};\n```\n\n### Description texts\n\nSometimes it's convenient to change description a field; this is the purpose of the `ui:description` uiSchema directive:\n\n```js\nconst schema = {type: \"string\"};\nconst uiSchema = {\n  \"ui:widget\": \"password\",\n  \"ui:description\": \"The best password\"\n};\n```\n\n### Auto focus\n\nIf you want to focus on a text input or textarea input/on a widget automatically, just set `ui:autofocus` uiSchema directive to `true`.\n\n```js\nconst schema = {type: \"string\"};\nconst uiSchema = {\n  \"ui:widget\": \"textarea\",\n  \"ui:autofocus\": true\n}\n```\n\n### Textarea `rows` option\n\nYou can set initial height of a textarea widget by specifying `rows` option.\n\n```js\nconst schema = {type: \"string\"};\nconst uiSchema = {\n  \"ui:widget\": \"textarea\",\n  \"ui:options\": {\n    rows: 15\n  }\n}\n```\n\n### Placeholders\n\nText fields can benefit from placeholders by using the `ui:placeholder` uiSchema directive:\n\n```jsx\nconst schema = {type: \"string\", format: \"uri\"};\nconst uiSchema = {\n  \"ui:placeholder\": \"http://\"\n};\n```\n\n![](http://i.imgur.com/MbHypKg.png)\n\nFields using `enum` can also use `ui:placeholder`. The value will be used as the text for the empty option in the select widget.\n\n```jsx\nconst schema = {type: \"string\", enum: [\"First\", \"Second\"]};\nconst uiSchema = {\n  \"ui:placeholder\": \"Choose an option\"\n};\n```\n\n### Field labels\n\nField labels are rendered by default. Labels may be omitted by setting the `label` option to `false` from `ui:options` uiSchema directive.\n\n```jsx\nconst schema = {type: \"string\"};\nconst uiSchema = {\n  \"ui:options\": {\n    label: false\n  }\n};\n```\n\n### HTML5 Input Types\n\nIf all you need to do is change the input type (for using things like input type=\"tel\") you can specify the `inputType` from `ui:options` uiSchema directive.\n\n```jsx\nconst schema = {type: \"string\"};\nconst uiSchema = {\n  \"ui:options\": {\n    inputType: 'tel'\n  }\n};\n```\n\n### Form attributes\n\nForm component supports the following html attributes:\n\n```jsx\n\u003cForm\n  id=\"edit-form\"\n  className=\"form form-wide\"\n  name=\"awesomeForm\"\n  method=\"post\"\n  target=\"_blank\"\n  action=\"/users/list\"\n  autocomplete=\"off\"\n  enctype=\"multipart/form-data\"\n  acceptcharset=\"ISO-8859-1\"\n  schema={} /\u003e\n```\n\n## Advanced customization\n\n### Field template __TODO__\n\nTo take control over the inner organization of each field (each form row), you can define a *field template* for your form.\n\nA field template is basically a React stateless component being passed field-related props so you can structure your form row as you like:\n\n```jsx\nfunction CustomFieldTemplate(props) {\n  const {id, classNames, label, help, required, description, errors, children} = props;\n  return (\n    \u003cdiv className={classNames}\u003e\n      \u003clabel htmlFor={id}\u003e{label}{required ? \"*\" : null}\u003c/label\u003e\n      {description}\n      {children}\n      {errors}\n      {help}\n    \u003c/div\u003e\n  );\n}\n\nrender((\n  \u003cForm schema={schema}\n        FieldTemplate={CustomFieldTemplate} /\u003e,\n), document.getElementById(\"app\"));\n```\n\nIf you want to handle the rendering of each element yourself, you can use the props `rawHelp`, `rawDescription` and `rawErrors`.\n\nThe following props are passed to a custom field template component:\n\n- `id`: The id of the field in the hierarchy. You can use it to render a label targeting the wrapped widget.\n- `classNames`: A string containing the base bootstrap CSS classes merged with any [custom ones](#custom-css-class-names) defined in your uiSchema.\n- `label`: The computed label for this field, as a string.\n- `description`: A component instance rendering the field description, if any defined (this will use any [custom `DescriptionField`](#custom-descriptions) defined).\n- `rawDescription`: A string containing any `ui:description` uiSchema directive defined.\n- `children`: The field or widget component instance for this field row.\n- `errors`: A component instance listing any encountered errors for this field.\n- `rawErrors`: An array of strings listing all generated error messages from encountered errors for this field.\n- `help`: A component instance rendering any `ui:help` uiSchema directive defined.\n- `rawHelp`: A string containing any `ui:help` uiSchema directive defined. **NOTE:** `rawHelp` will be `undefined` if passed `ui:help` is a React component instead of a string.\n- `hidden`: A boolean value stating if the field should be hidden.\n- `required`: A boolean value stating if the field is required.\n- `readonly`: A boolean value stating if the field is read-only.\n- `disabled`: A boolean value stating if the field is disabled.\n- `displayLabel`: A boolean value stating if the label should be rendered or not. This is useful for nested fields in arrays where you don't want to clutter the UI.\n- `fields`: An array containing all Form's fields including your [custom fields](#custom-field-components) and the built-in fields.\n- `schema`: The schema object for this field.\n- `uiSchema`: The uiSchema object for this field.\n- `formContext`: The `formContext` object that you passed to Form.\n\n\u003e Note: you can only define a single field template for a form. If you need many, it's probably time to look at [custom fields](#custom-field-components) instead.\n\n### Array Field Template __TODO__\n\nSimilarly to the `FieldTemplate` you can use an `ArrayFieldTemplate` to customize how your\narrays are rendered. This allows you to customize your array, and each element in the array.\n\n```jsx\nfunction ArrayFieldTemplate(props) {\n  return (\n    \u003cdiv\u003e\n      {props.items.map(element =\u003e element.children)}\n      {props.canAdd \u0026\u0026 \u003cbutton type=\"button\" onClick={props.onAddClick}\u003e\u003c/button\u003e}\n    \u003c/div\u003e\n  );\n}\n\nrender((\n  \u003cForm schema={schema}\n        ArrayFieldTemplate={ArrayFieldTemplate} /\u003e,\n), document.getElementById(\"app\"));\n```\n\nPlease see [customArray.js](https://github.com/mozilla-services/react-jsonschema-form/blob/master/playground/samples/customArray.js) for a better example.\n\nThe following props are passed to each `ArrayFieldTemplate`:\n\n- `DescriptionField`: The `DescriptionField` from the registry (in case you wanted to utilize it)\n- `TitleField`: The `TitleField` from the registry (in case you wanted to utilize it).\n- `canAdd`: A boolean value stating whether new elements can be added to the array.\n- `className`: The className string.\n- `disabled`: A boolean value stating if the array is disabled.\n- `idSchema`: Object\n- `items`: An array of objects representing the items in the array. Each of the items represent a child with properties described below.\n- `onAddClick: (event) =\u003e void`: A function that adds a new item to the array.\n- `readonly`: A boolean value stating if the array is read-only.\n- `required`: A boolean value stating if the array is required.\n- `schema`: The schema object for this array.\n- `uiSchema`: The uiSchema object for this array field.\n- `title`: A string value containing the title for the array.\n- `formContext`: The `formContext` object that you passed to Form.\n- `formData`: The formData for this array.\n\nThe following props are part of each element in `items`:\n\n- `children`: The html for the item's content.\n- `className`: The className string.\n- `disabled`: A boolean value stating if the array item is disabled.\n- `hasMoveDown`: A boolean value stating whether the array item can be moved down.\n- `hasMoveUp`: A boolean value stating whether the array item can be moved up.\n- `hasRemove`: A boolean value stating whether the array item can be removed.\n- `hasToolbar`: A boolean value stating whether the array item has a toolbar.\n- `index`: A number stating the index the array item occurs in `items`.\n- `onDropIndexClick: (index) =\u003e (event) =\u003e void`: Returns a function that removes the item at `index`.\n- `onReorderClick: (index, newIndex) =\u003e (event) =\u003e void`: Returns a function that swaps the items at `index` with `newIndex`.\n- `readonly`: A boolean value stating if the array item is read-only.\n\n### Object Field Template __TODO__\n\nSimilarly to the `FieldTemplate` you can use an `ObjectFieldTemplate` to customize how your\nobjects are rendered.\n\n```jsx\nfunction ObjectFieldTemplate(props) {\n  return (\n    \u003cdiv\u003e\n      {props.title}\n      {props.description}\n      {props.properties.map(element =\u003e \u003cdiv className=\"property-wrapper\"\u003e{element.children}\u003c/div\u003e)}\n    \u003c/div\u003e\n  );\n}\n\nrender((\n  \u003cForm schema={schema}\n        ObjectFieldTemplate={ObjectFieldTemplate} /\u003e,\n), document.getElementById(\"app\"));\n```\n\nPlease see [customObject.js](https://github.com/mozilla-services/react-jsonschema-form/blob/master/playground/samples/customObject.js) for a better example.\n\nThe following props are passed to each `ObjectFieldTemplate`:\n\n- `DescriptionField`: The `DescriptionField` from the registry (in case you wanted to utilize it)\n- `TitleField`: The `TitleField` from the registry (in case you wanted to utilize it).\n- `title`: A string value containing the title for the object.\n- `description`: A string value containing the description for the object.\n- `properties`: An array of object representing the properties in the array. Each of the properties represent a child with properties described below.\n- `required`: A boolean value stating if the object is required.\n- `schema`: The schema object for this object.\n- `uiSchema`: The uiSchema object for this object field.\n- `idSchema`: An object containing the id for this object \u0026 ids for it's properties.\n- `formData`: The form data for the object.\n- `formContext`: The `formContext` object that you passed to Form.\n\nThe following props are part of each element in `properties`:\n\n- `content`: The html for the property's content.\n- `name`: A string representing the property name.\n- `disabled`: A boolean value stating if the object property is disabled.\n- `readonly`: A boolean value stating if the property is read-only.\n\n### Error List template __TODO__\n\nTo take control over how the form errors are displayed, you can define an *error list template* for your form. This list is the form global error list that appears at the top of your forms.\n\nAn error list template is basically a React stateless component being passed errors as props so you can render them as you like:\n\n```jsx\nfunction ErrorListTemplate(props) {\n  const {errors} = props;\n  return (\n    \u003cdiv\u003e\n      {errors.map((error, i) =\u003e {\n        return (\n          \u003cli key={i}\u003e\n            {error.stack}\n          \u003c/li\u003e\n        );\n      })}\n    \u003c/div\u003e\n  );\n}\n\nrender((\n  \u003cForm schema={schema}\n        showErrorList={true}\n        ErrorList={ErrorListTemplate} /\u003e,\n), document.getElementById(\"app\"));\n```\n\n\u003e Note: Your custom `ErrorList` template will only render when `showErrorList` is `true`.\n\nThe following props are passed to `ErrorList`\n\n- `errors`: An array of the errors.\n- `errorSchema`: The errorSchema constructed by `Form`.\n- `schema`: The schema that was passed to `Form`.\n- `uiSchema`: The uiSchema that was passed to `Form`.\n- `formContext`: The `formContext` object that you passed to Form.\n\n### Id prefix\n\nTo avoid collisions with existing ids in the DOM, it is possible to change the prefix used for ids (the default is `root`).\n\n```jsx\nrender((\n  \u003cForm schema={schema}\n        idPrefix={\"rjsf_prefix\"}/\u003e,\n), document.getElementById(\"app\"));\n```\n\nThis will render `\u003cinput id=\"rjsf_prefix_key\"\u003e` instead of `\u003cinput id=\"root_key\"\u003e`\n\n### Custom widgets and fields\n\nThe API allows to specify your own custom *widget* and *field* components:\n\n- A *widget* represents a HTML tag for the user to enter data, eg. `input`, `select`, etc.\n- A *field* usually wraps one or more widgets and most often handles internal field state; think of a field as a form row, including the labels.\n\n### Custom widget components\n\nYou can provide your own custom widgets to a uiSchema for the following json data types:\n\n- `string`\n- `number`\n- `integer`\n- `boolean`\n\n```jsx\nconst schema = {\n  type: \"string\"\n};\n\nconst uiSchema = {\n  \"ui:widget\": (props) =\u003e {\n    return (\n      \u003cinput type=\"text\"\n        className=\"custom\"\n        value={props.value}\n        required={props.required}\n        onChange={(event) =\u003e props.onChange(event.target.value)} /\u003e\n    );\n  }\n};\n\nrender((\n  \u003cForm schema={schema}\n        uiSchema={uiSchema} /\u003e,\n), document.getElementById(\"app\"));\n```\n\nThe following props are passed to custom widget components:\n\n- `id`: The generated id for this field;\n- `schema`: The JSONSchema subschema object for this field;\n- `value`: The current value for this field;\n- `required`: The required status of this field;\n- `disabled`: `true` if the widget is disabled;\n- `readonly`: `true` if the widget is read-only;\n- `onChange`: The value change event handler; call it with the new value everytime it changes;\n- `onBlur`: The input blur event handler; call it with the the widget id and value;\n- `onFocus`: The input focus event handler; call it with the the widget id and value;\n- `options`: A map of options passed as a prop to the component (see [Custom widget options](#custom-widget-options)).\n- `formContext`: The `formContext` object that you passed to Form.\n\n\u003e Note: Prior to v0.35.0, the `options` prop contained the list of options (`label` and `value`) for `enum` fields. Since v0.35.0, it now exposes this list as the `enumOptions` property within the `options` object.\n\n#### Custom component registration\n\nAlternatively, you can register them all at once by passing the `widgets` prop to the `Form` component, and reference their identifier from the `uiSchema`:\n\n```jsx\nconst MyCustomWidget = (props) =\u003e {\n  return (\n    \u003cinput type=\"text\"\n      className=\"custom\"\n      value={props.value}\n      required={props.required}\n      onChange={(event) =\u003e props.onChange(event.target.value)} /\u003e\n  );\n};\n\nconst widgets = {\n  myCustomWidget: MyCustomWidget\n};\n\nconst uiSchema = {\n  \"ui:widget\": \"myCustomWidget\"\n}\n\nrender((\n  \u003cForm\n    schema={schema}\n    uiSchema={uiSchema}\n    widgets={widgets} /\u003e\n), document.getElementById(\"app\"));\n```\n\nThis is useful if you expose the `uiSchema` as pure JSON, which can't carry functions.\n\n\u003e Note: Until 0.40.0 it was possible to register a widget as object with shape `{ component: MyCustomWidget, options: {...} }`. This undocumented API has been removed. Instead, you can register a custom widget with a React `defaultProps` property. `defaultProps.options` can be an object containing your custom options.\n\n#### Custom widget options\n\nIf you need to pass options to your custom widget, you can add a `ui:options` object containing those properties. If the widget has `defaultProps`, the options will be merged with the (optional) options object from `defaultProps`:\n\n```jsx\nconst schema = {\n  type: \"string\"\n};\n\nfunction MyCustomWidget(props) {\n  const {options} = props;\n  const {color, backgroundColor} = options;\n  return \u003cinput style={{color, backgroundColor}} /\u003e;\n}\n\nMyCustomWidget.defaultProps = {\n  options: {\n    color: \"red\"\n  }\n};\n\nconst uiSchema = {\n  \"ui:widget\": MyCustomWidget,\n  \"ui:options\": {\n    backgroundColor: \"yellow\"\n  }\n};\n\n// renders red on yellow input\nrender((\n  \u003cForm schema={schema}\n        uiSchema={uiSchema} /\u003e\n), document.getElementById(\"app\"));\n```\n\n\u003e Note: This also applies to [registered custom components](#custom-component-registration).\n\n\u003e Note: Since v0.41.0, the `ui:widget` object API, where a widget and options were specified with `\"ui:widget\": {component, options}` shape, is deprecated. It will be removed in a future release.\n\n#### Customizing widgets text input\n\nAll the widgets that render a text input use the `BaseInput` component internally. If you need to customize all text inputs without customizing all widgets individially, you can provide a `BaseInput` component in the `widgets` property of `Form` (see [Custom component registration](#custom-component-registration).\n\n### Custom field components\n\nYou can provide your own field components to a uiSchema for basically any json schema data type, by specifying a `ui:field` property.\n\nFor example, let's create and register a dumb `geo` component handling a *latitude* and a *longitude*:\n\n```jsx\nconst schema = {\n  type: \"object\",\n  required: [\"lat\", \"lon\"],\n  properties: {\n    lat: {type: \"number\"},\n    lon: {type: \"number\"}\n  }\n};\n\n// Define a custom component for handling the root position object\nclass GeoPosition extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {...props.formData};\n  }\n\n  onChange(name) {\n    return (event) =\u003e {\n      this.setState({\n        [name]: parseFloat(event.target.value)\n      }, () =\u003e this.props.onChange(this.state));\n    };\n  }\n\n  render() {\n    const {lat, lon} = this.state;\n    return (\n      \u003cdiv\u003e\n        \u003cinput type=\"number\" value={lat} onChange={this.onChange(\"lat\")} /\u003e\n        \u003cinput type=\"number\" value={lon} onChange={this.onChange(\"lon\")} /\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n\n// Define the custom field component to use for the root object\nconst uiSchema = {\"ui:field\": \"geo\"};\n\n// Define the custom field components to register; here our \"geo\"\n// custom field component\nconst fields = {geo: GeoPosition};\n\n// Render the form with all the properties we just defined passed\n// as props\nrender((\n  \u003cForm\n    schema={schema}\n    uiSchema={uiSchema}\n    fields={fields} /\u003e\n), document.getElementById(\"app\"));\n```\n\n\u003e Note: Registered fields can be reused across the entire schema.\n\n#### Field props\n\nA field component will always be passed the following props:\n\n - `schema`: The JSON schema for this field;\n - `uiSchema`: The [uiSchema](#the-uischema-object) for this field;\n - `idSchema`: The tree of unique ids for every child field;\n - `formData`: The data for this field;\n - `errorSchema`: The tree of errors for this field and its children;\n - `registry`: A [registry](#the-registry-object) object (read next).\n - `formContext`: A [formContext](#the-formcontext-object) object (read next next).\n\n#### The `registry` object\n\nThe `registry` is an object containing the registered custom fields and widgets as well as root schema definitions.\n\n - `fields`: The [custom registered fields](#custom-field-components). By default this object contains the standard `SchemaField`, `TitleField` and `DescriptionField` components;\n - `widgets`: The [custom registered widgets](#custom-widget-components), if any;\n - `definitions`: The root schema [definitions](#schema-definitions-and-references), if any.\n - `formContext`: The [formContext](#the-formcontext-object) object.\n\nThe registry is passed down the component tree, so you can access it from your custom field and `SchemaField` components.\n\n#### The `formContext` object\n\nYou can provide a `formContext` object to the Form, which is passed down to all fields and widgets (including [TitleField](#custom-titles) and [DescriptionField](#custom-descriptions)). Useful for implementing context aware fields and widgets.\n\n### Custom array field buttons\n\nThe `ArrayField` component provides a UI to add, remove and reorder array items, and these buttons use [Bootstrap glyphicons](http://getbootstrap.com/components/#glyphicons). If you don't use glyphicons but still want to provide your own icons or texts for these buttons, you can easily do so using CSS:\n\n```css\ni.glyphicon { display: none; }\n.btn-add::after { content: 'Add'; }\n.array-item-move-up::after { content: 'Move Up'; }\n.array-item-move-down::after { content: 'Move Down'; }\n.array-item-remove::after { content: 'Remove'; }\n```\n\n### Custom SchemaField\n\n**Warning:** This is a powerful feature as you can override the whole form behavior and easily mess it up. Handle with care.\n\nYou can provide your own implementation of the `SchemaField` base React component for rendering any JSONSchema field type, including objects and arrays. This is useful when you want to augment a given field type with supplementary powers.\n\nTo proceed so, pass a `fields` object having a `SchemaField` property to your `Form` component; here's a rather silly example wrapping the standard `SchemaField` lib component:\n\n```jsx\nimport SchemaField from \"react-jsonschema-form/lib/components/fields/SchemaField\";\n\nconst CustomSchemaField = function(props) {\n  return (\n    \u003cdiv id=\"custom\"\u003e\n      \u003cp\u003eYeah, I'm pretty dumb.\u003c/p\u003e\n      \u003cSchemaField {...props} /\u003e\n    \u003c/div\u003e\n  );\n};\n\nconst fields = {\n  SchemaField: CustomSchemaField\n};\n\nrender((\n  \u003cForm schema={schema}\n        uiSchema={uiSchema}\n        formData={formData}\n        fields={fields} /\u003e\n), document.getElementById(\"app\"));\n```\n\nIf you're curious how this could ever be useful, have a look at the [Kinto formbuilder](https://github.com/Kinto/formbuilder) repository to see how it's used to provide editing capabilities to any form field.\n\nProps passed to a custom SchemaField are the same as [the ones passed to a custom field](#field-props).\n\n### Customizing the default fields and widgets\n\nYou can override any default field and widget, including the internal widgets like the `CheckboxWidget` that `ObjectField` renders for boolean values. You can override any field and widget just by providing the customized fields/widgets in the `fields` and `widgets` props:\n\n```jsx\n\nconst CustomCheckbox = function(props) {\n  return (\n    \u003cbutton id=\"custom\" className={props.value ? \"checked\" : \"unchecked\"} onClick={() =\u003e props.onChange(!props.value)}\u003e\n    \t{props.value}\n    \u003c/button\u003e\n  );\n};\n\nconst widgets = {\n  CheckboxWidget: CustomCheckbox\n};\n\nrender((\n  \u003cForm schema={schema}\n        uiSchema={uiSchema}\n        formData={formData}\n        widgets={widgets} /\u003e\n), document.getElementById(\"app\"));\n```\n\nThis allows you to create a reusable customized form class with your custom fields and widgets:\n\n```jsx\nconst customFields = {StringField: CustomString};\nconst customWidgets = {CheckboxWidget: CustomCheckbox};\n\nfunction MyForm(props) {\n  return \u003cForm fields={customFields} widgets={customWidgets} {...props} /\u003e;\n}\n\nrender((\n  \u003cMyForm schema={schema}\n    uiSchema={uiSchema}\n    formData={formData} /\u003e\n), document.getElementById(\"app\"));\n```\n\n### Custom titles\n\nYou can provide your own implementation of the `TitleField` base React component for rendering any title. This is useful when you want to augment how titles are handled.\n\nSimply pass a `fields` object having a `TitleField` property to your `Form` component:\n\n```jsx\n\nconst CustomTitleField = ({title, required}) =\u003e {\n  const legend = required ? title + '*' : title;\n  return \u003cdiv id=\"custom\"\u003e{legend}\u003c/div\u003e;\n};\n\nconst fields = {\n  TitleField: CustomTitleField\n};\n\nrender((\n  \u003cForm schema={schema}\n        uiSchema={uiSchema}\n        formData={formData}\n        fields={fields} /\u003e\n), document.getElementById(\"app\"));\n```\n\n### Custom descriptions\n\nYou can provide your own implementation of the `DescriptionField` base React component for rendering any description.\n\nSimply pass a `fields` object having a `DescriptionField` property to your `Form` component:\n\n```jsx\n\nconst CustomDescriptionField = ({id, description}) =\u003e {\n  return \u003cdiv id={id}\u003e{description}\u003c/div\u003e;\n};\n\nconst fields = {\n  DescriptionField: CustomDescriptionField\n};\n\nrender((\n  \u003cForm schema={schema}\n        uiSchema={uiSchema}\n        formData={formData}\n        fields={fields} /\u003e\n), document.getElementById(\"app\"));\n```\n\n## Form data validation\n\n### Live validation\n\nBy default, form data are only validated when the form is submitted or when a new `formData` prop is passed to the `Form` component.\n\nYou can enable live form data validation by passing a `liveValidate` prop to the `Form` component, and set it to `true`. Then, everytime a value changes within the form data tree (eg. the user entering a character in a field), a validation operation is performed, and the validation results are reflected into the form state.\n\nBe warned that this is an expensive strategy, with possibly strong impact on performances.\n\nTo disable validation entirely, you can set Form's `noValidate` prop to `true`.\n\n### HTML5 Validation\n\nBy default, required field errors will cause the browser to display its standard HTML5 `required` attribute error messages and prevent form submission. If you would like to turn this off, you can set Form's `noHtml5Validate` prop to `true`, which will set `noValidate` on the `form` element.\n\n### Custom validation\n\nForm data is always validated against the JSON schema.\n\nBut it is possible to define your own custom validation rules. This is especially useful when the validation depends on several interdependent fields.\n\n```js\nfunction validate(formData, errors) {\n  if (formData.pass1 !== formData.pass2) {\n    errors.pass2.addError(\"Passwords don't match\");\n  }\n  return errors;\n}\n\nconst schema = {\n  type: \"object\",\n  properties: {\n    pass1: {type: \"string\", minLength: 3},\n    pass2: {type: \"string\", minLength: 3},\n  }\n};\n\nrender((\n  \u003cForm schema={schema}\n        validate={validate} /\u003e\n), document.getElementById(\"app\"));\n```\n\n\u003e Notes:\n\u003e - The `validate()` function must **always** return the `errors` object\n\u003e   received as second argument.\n\u003e - The `validate()` function is called **after** the JSON schema validation.\n\n### Custom error messages\n\nValidation error messages are provided by the JSON Schema validation by default. If you need to change these messages or make any other modifications to the errors from the JSON Schema validation, you can define a transform function that receives the list of JSON Schema errors and returns a new list.\n\n```js\nfunction transformErrors(errors) {\n  return errors.map(error =\u003e {\n    if (error.name === \"pattern\") {\n      error.message = \"Only digits are allowed\"\n    }\n    return error;\n  });\n}\n\nconst schema = {\n  type: \"object\",\n  properties: {\n    onlyNumbersString: {type: \"string\", pattern: \"^\\\\d*$\"},\n  }\n};\n\nrender((\n  \u003cForm schema={schema}\n        transformErrors={transformErrors} /\u003e\n), document.getElementById(\"app\"));\n```\n\n\u003e Notes:\n\u003e - The `transformErrors()` function must return the list of errors. Modifying the list in place without returning it will result in an error.\n\n### Error List Display\n\nTo disable rendering of the error list at the top of the form, you can set the `showErrorList` prop to `false`. Doing so will still validate the form, but only the inline display will show.\n\n```js\nrender((\n  \u003cForm schema={schema}\n        showErrorList={false} /\u003e\n), document.getElementById(\"app\"));\n```\n\n\u003e Note: you can also use your own [ErrorList](#error-list-template)\n\n### The case of empty strings\n\nWhen a text input is empty, the field in form data is set to `undefined`. String fields that use `enum` and a `select` widget will have an empty option at the top of the options list that when selected will result in the field being `undefined`.\n\nOne consequence of this is that if you have an empty string in your `enum` array, selecting that option in the `select` input will cause the field to be set to `undefined`, not an empty string.\n\nIf you want to have the field set to a default value when empty you can provide a `ui:emptyValue` field in the `uiSchema` object.\n\n## Styling your forms\n\nThis library renders form fields and widgets leveraging the [Bootstrap](http://getbootstrap.com/) semantics. That means your forms will be beautiful by default if you're loading its stylesheet in your page.\n\nYou're not necessarily forced to use Bootstrap; while it uses its semantics, it also provides a bunch of other class names so you can bring new styles or override default ones quite easily in your own personalized stylesheet. That's just HTML after all :)\n\nIf you're okay with using styles from the Bootstrap ecosystem though, then the good news is that you have access to many themes for it, which are compatible with our generated forms!\n\nHere are some examples from the [playground](http://mozilla-services.github.io/react-jsonschema-form/), using some of the [Bootswatch](http://bootswatch.com/) free themes:\n\n![](http://i.imgur.com/1Z5oUK3.png)\n![](http://i.imgur.com/IMFqMwK.png)\n![](http://i.imgur.com/HOACwt5.png)\n\nLast, if you really really want to override the semantics generated by the lib, you can always create and use your own custom [widget](#custom-widget-components), [field](#custom-field-components) and/or [schema field](#custom-schemafield) components.\n\n## Schema definitions and references\n\nThis library partially supports [inline schema definition dereferencing]( http://json-schema.org/latest/json-schema-core.html#rfc.section.7.2.3), which is Barbarian for *avoiding to copy and paste commonly used field schemas*:\n\n```json\n{\n  \"definitions\": {\n    \"address\": {\n      \"type\": \"object\",\n      \"properties\": {\n        \"street_address\": { \"type\": \"string\" },\n        \"city\":           { \"type\": \"string\" },\n        \"state\":          { \"type\": \"string\" }\n      },\n      \"required\": [\"street_address\", \"city\", \"state\"]\n    }\n  },\n  \"type\": \"object\",\n  \"properties\": {\n    \"billing_address\": { \"$ref\": \"#/definitions/address\" },\n    \"shipping_address\": { \"$ref\": \"#/definitions/address\" }\n  }\n}\n```\n\n*(Sample schema courtesy of the [Space Telescope Science Institute](http://spacetelescope.github.io/understanding-json-schema/structuring.html))*\n\nNote that it only supports local definition referencing, we do not plan on fetching foreign schemas over HTTP anytime soon. Basically, you can only reference a definition from the very schema object defining it.\n\n## Property dependencies\n\nThis library supports conditionally making fields required based on the presence of other fields.\n\n### Unidirectional\n\nIn the following example the `billing_address` field will be required if `credit_card` is defined.\n\n```json\n{\n  \"type\": \"object\",\n\n  \"properties\": {\n    \"name\": { \"type\": \"string\" },\n    \"credit_card\": { \"type\": \"number\" },\n    \"billing_address\": { \"type\": \"string\" }\n  },\n\n  \"required\": [\"name\"],\n\n  \"dependencies\": {\n    \"credit_card\": [\"billing_address\"]\n  }\n}\n```\n\n### Bidirectional\n\nIn the following example the `billing_address` field will be required if `credit_card` is defined and the `credit_card`\nfield will be required if `billing_address` is defined making them both required if either is defined.\n\n```json\n{\n  \"type\": \"object\",\n\n  \"properties\": {\n    \"name\": { \"type\": \"string\" },\n    \"credit_card\": { \"type\": \"number\" },\n    \"billing_address\": { \"type\": \"string\" }\n  },\n\n  \"required\": [\"name\"],\n\n  \"dependencies\": {\n    \"credit_card\": [\"billing_address\"],\n    \"billing_address\": [\"credit_card\"]\n  }\n}\n```\n\n*(Sample schemas courtesy of the [Space Telescope Science Institute](https://spacetelescope.github.io/understanding-json-schema/reference/object.html#property-dependencies))*\n\n## Schema dependencies\n\nThis library also supports modifying portions of a schema based on form data.\n\n### Conditional\n\n```json\n{\n  \"type\": \"object\",\n\n  \"properties\": {\n    \"name\": { \"type\": \"string\" },\n    \"credit_card\": { \"type\": \"number\" }\n  },\n\n  \"required\": [\"name\"],\n\n  \"dependencies\": {\n    \"credit_card\": {\n      \"properties\": {\n        \"billing_address\": { \"type\": \"string\" }\n      },\n      \"required\": [\"billing_address\"]\n    }\n  }\n}\n```\n\nIn this example the `billing_address` field will be displayed in the form if `credit_card` is defined.\n\n*(Sample schemas courtesy of the [Space Telescope Science Institute](https://spacetelescope.github.io/understanding-json-schema/reference/object.html#schema-dependencies))*\n\n### Dynamic\n\nThe JSON Schema standard says that the dependency is triggered if the property is present. However, sometimes it's useful to have more sophisticated rules guiding the application of the dependency. For example, maybe you have three possible values for a field, and each one should lead to adding a different question. For this, we support a very restricted use of the `oneOf` keyword.\n\n```json\n{\n  \"title\": \"Person\",\n  \"type\": \"object\",\n  \"properties\": {\n    \"Do you have any pets?\": {\n      \"type\": \"string\",\n      \"enum\": [\n        \"No\",\n        \"Yes: One\",\n        \"Yes: More than one\"\n      ],\n      \"default\": \"No\"\n    }\n  },\n  \"required\": [\n    \"Do you have any pets?\"\n  ],\n  \"dependencies\": {\n    \"Do you have any pets?\": {\n      \"oneOf\": [\n        {\n          \"properties\": {\n            \"Do you have any pets?\": {\n              \"enum\": [\n                \"No\"\n              ]\n            }\n          }\n        },\n        {\n          \"properties\": {\n            \"Do you have any pets?\": {\n              \"enum\": [\n                \"Yes: One\"\n              ]\n            },\n            \"How old is your pet?\": {\n              \"type\": \"number\"\n            }\n          },\n          \"required\": [\n            \"How old is your pet?\"\n          ]\n        },\n        {\n          \"properties\": {\n            \"Do you have any pets?\": {\n              \"enum\": [\n                \"Yes: More than one\"\n              ]\n            },\n            \"Do you want to get rid of any?\": {\n              \"type\": \"boolean\"\n            }\n          },\n          \"required\": [\n            \"Do you want to get rid of any?\"\n          ]\n        }\n      ]\n    }\n  }\n}\n```\n\nIn this example the user is prompted with different follow-up questions dynamically based on their answer to the first question.\n\nNote that this is quite far from complete `oneOf` support!\n\nIn these examples, the \"Do you have any pets?\" question is validated against the corresponding property in each schema in the `oneOf` array. If exactly one matches, the rest of that schema is merged with the existing schema.\n\n## JSON Schema supporting status\n\nThis component follows [JSON Schema](http://json-schema.org/documentation.html) specs. Due to the limitation of form widgets, there are some exceptions as follows:\n\n* `additionalItems` keyword for arrays\n    This keyword works when `items` is an array. `additionalItems: true` is not supported because there's no widget to represent an item of any type. In this case it will be treated as no additional items allowed. `additionalItems` being a valid schema is supported.\n* `anyOf`, `allOf`, and `oneOf`, or multiple `types` (i.e. `\"type\": [\"string\", \"array\"]`\n    Nobody yet has come up with a PR that adds this feature with a simple and easy-to-understand UX.\n    You can use `oneOf` with [schema dependencies](#schema-dependencies) to dynamically add schema properties based on input data but this feature does not bring general support for `oneOf` elsewhere in a schema.\n\n## Tips and tricks\n\n - Custom field template: https://jsfiddle.net/hdp1kgn6/1/\n - Multi-step wizard: https://jsfiddle.net/sn4bnw9h/1/\n - Using classNames with uiSchema: https://jsfiddle.net/gfwp25we/1/\n - Conditional fields: https://jsfiddle.net/69z2wepo/88541/\n - Advanced conditional fields: https://jsfiddle.net/cowbellerina/zbfh96b1/\n - Use radio list for enums: https://jsfiddle.net/f2y3fq7L/2/\n - Reading file input data: https://jsfiddle.net/f9vcb6pL/1/\n - Custom errors messages with transformErrors : https://jsfiddle.net/revolunet/5r3swnr4/\n - 2 columns form with CSS and FieldTemplate : https://jsfiddle.net/n1k0/bw0ffnz4/1/\n - Validate and submit form from external control : https://jsfiddle.net/spacebaboon/g5a1re63/\n\n## Contributing\n\n### Coding style\n\nAll the JavaScript code in this project conforms to the [prettier](https://github.com/prettier/prettier) coding style. A command is provided to ensure your code is always formatted accordingly:\n\n```\n$ npm run cs-format\n```\n\nThe `cs-check` command ensures all files conform to that style:\n\n```\n$ npm run cs-check\n```\n\n### Development server\n\n```\n$ npm start\n```\n\nA live development server showcasing components with hot reload enabled is available at [localhost:8080](http://localhost:8080).\n\nIf you want the development server to listen on another host or port, you can use the RJSF_DEV_SERVER env variable:\n\n```\n$ RJSF_DEV_SERVER=0.0.0.0:8000 npm start\n```\n\n### Tests\n\n```\n$ npm test\n```\n\n#### TDD\n\n```\n$ npm run tdd\n```\n\n### Releasing\n\n```\n$ edit package.json # update version number\n$ git commit -m \"Bump version $VERSION\"\n$ git tag v$VERSION\n$ npm run dist\n$ npm publish\n$ git push --tags origin\n```\n\n## FAQ\n\n### Q: Does rjsf support `oneOf`, `anyOf`, multiple types in an array, etc.?\n\nA: Not yet (except for a special case where you can use `oneOf` in [schema dependencies](#schema-dependencies)), but perhaps you will be the person whose PR will finally add the feature in a way that gets merged. For inspiration, see [#329](https://github.com/mozilla-services/react-jsonschema-form/pull/329) or [#417](https://github.com/mozilla-services/react-jsonschema-form/pull/417). See also: [#52](https://github.com/mozilla-services/react-jsonschema-form/issues/52), [#151](https://github.com/mozilla-services/react-jsonschema-form/issues/151), [#171](https://github.com/mozilla-services/react-jsonschema-form/issues/171), [#200](https://github.com/mozilla-services/react-jsonschema-form/issues/200), [#282](https://github.com/mozilla-services/react-jsonschema-form/issues/282), [#302](https://github.com/mozilla-services/react-jsonschema-form/pull/302), [#330](https://github.com/mozilla-services/react-jsonschema-form/issues/330), [#430](https://github.com/mozilla-services/react-jsonschema-form/issues/430), [#522](https://github.com/mozilla-services/react-jsonschema-form/issues/522), [#538](https://github.com/mozilla-services/react-jsonschema-form/issues/538), [#551](https://github.com/mozilla-services/react-jsonschema-form/issues/551), [#552](https://github.com/mozilla-services/react-jsonschema-form/issues/552), or [#648](https://github.com/mozilla-services/react-jsonschema-form/issues/648).\n\n### Q: Will react-jsonschema-form support Material, Ant-Design, Foundation, or [some other specific widget library or frontend style]?\n\nA: Probably not. We use Bootstrap v3 and it works fine for our needs. We would like for react-jsonschema-form to support other frameworks, we just don't want to support them ourselves. Ideally, these frontend styles could be added to react-jsonschema-form with a third-party library. If there is a technical limitation preventing this, please consider opening a PR. See also: [#91](https://github.com/mozilla-services/react-jsonschema-form/issues/91), [#99](https://github.com/mozilla-services/react-jsonschema-form/issues/99), [#125](https://github.com/mozilla-services/react-jsonschema-form/issues/125), [#237](https://github.com/mozilla-services/react-jsonschema-form/issues/237), [#287](https://github.com/mozilla-services/react-jsonschema-form/issues/287), [#299](https://github.com/mozilla-services/react-jsonschema-form/issues/299), [#440](https://github.com/mozilla-services/react-jsonschema-form/issues/440), [#461](https://github.com/mozilla-services/react-jsonschema-form/issues/461), [#546](https://github.com/mozilla-services/react-jsonschema-form/issues/546), [#555](https://github.com/mozilla-services/react-jsonschema-form/issues/555), [#626](https://github.com/mozilla-services/react-jsonschema-form/issues/626), and [#623](https://github.com/mozilla-services/react-jsonschema-form/pull/623).\n\n### Q: Is there a way to \"collapse\" fields, for instance to show/hide individual fields?\n\nA: There's no specific built-in way to do this, but you can write your own FieldTemplate that supports hiding/showing fields according to user input. We don't yet have an example of this use, but if you write one, please add it to the \"tips and tricks\" section, above. See also: [#268](https://github.com/mozilla-services/react-jsonschema-form/issues/268), [#304](https://github.com/mozilla-services/react-jsonschema-form/pull/304), [#598](https://github.com/mozilla-services/react-jsonschema-form/issues/598), [#920](https://github.com/mozilla-services/react-jsonschema-form/issues/920).\n\n## License\n\nApache 2\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthclark%2Freact-jsonschema-form","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthclark%2Freact-jsonschema-form","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthclark%2Freact-jsonschema-form/lists"}