packages/docs/versioned_docs/version-5.24.10/00-introduction.mdx
A simple React component capable of building HTML forms out of a JSON schema.
A live playground is hosted on GitHub Pages:
<a target='_blank' href='https://rjsf-team.github.io/react-jsonschema-form/'> </a>react-jsonschema-form is meant to automatically generate a React form based on a JSON Schema. 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.
react-jsonschema-form also comes with tools such as uiSchema and other form props to customize the look and feel of the form beyond the default themes.
First install the dependencies from npm, along with a validator implementation (such as @rjsf/validator-ajv8):
$ npm install @rjsf/core @rjsf/utils @rjsf/validator-ajv8 --save
Then import the dependencies as follows:
import Form from '@rjsf/core';
import validator from '@rjsf/validator-ajv8';
Our latest version requires React 16+.
import Form from '@rjsf/core';
import { RJSFSchema } from '@rjsf/utils';
import validator from '@rjsf/validator-ajv8';
const schema: RJSFSchema = {
title: 'Todo',
type: 'object',
required: ['title'],
properties: {
title: { type: 'string', title: 'Title', default: 'A new task' },
done: { type: 'boolean', title: 'Done?', default: false },
},
};
const log = (type) => console.log.bind(console, type);
render(
<Form
schema={schema}
validator={validator}
onChange={log('changed')}
onSubmit={log('submitted')}
onError={log('errors')}
/>,
document.getElementById('app')
);
For more information on what themes we support, see Using Themes.
<!-- disabled until https://github.com/rjsf-team/react-jsonschema-form/issues/1584 is resolved ## Useful samples - Custom field template: <https://jsfiddle.net/hdp1kgn6/1/> - Multi-step wizard: <https://jsfiddle.net/sn4bnw9h/1/> - Using classNames with uiSchema: <https://jsfiddle.net/gfwp25we/1/> - Conditional fields: <https://jsfiddle.net/69z2wepo/88541/> - Advanced conditional fields: <https://jsfiddle.net/cowbellerina/zbfh96b1/> - Use radio list for enums: <https://jsfiddle.net/f2y3fq7L/2/> - Reading file input data: <https://jsfiddle.net/f9vcb6pL/1/> - Custom errors messages with transformErrors: <https://jsfiddle.net/revolunet/5r3swnr4/> - 2 columns form with CSS and FieldTemplate: <https://jsfiddle.net/n1k0/bw0ffnz4/1/> - Validate and submit form from external control: <https://jsfiddle.net/spacebaboon/g5a1re63/> - Custom component for Help text with `ui:help`: <https://codesandbox.io/s/14pqx97xl7/> - Collapsing / Showing and Hiding individual fields: <https://codesandbox.io/s/examplereactjsonschemaformcollapsefieldtemplate-t41dn> -->Apache 2
</th>
<td>
This project initially started as a <a href="https://github.com/mozilla-services">mozilla-services</a> project.
</td>
</tr>
<tr>
<th>
</th>
<td>
Testing is powered by <a href="https://www.browserstack.com/" >BrowserStack</a>.
</td>
</tr>
<tr>
<th>
</th>
<td>
Deploy Previews are provided by <a href="https://www.netlify.com">Netlify</a>.
</td>
</tr>
Add your own company / organization by making a pull request.