Single fields
The simplest example of a JSON Schema contains only a single field. The field type is determined by the type
parameter.
Field types
The base field types in JSON Schema include:
string
number
integer
boolean
null
Here is an example of a string field:
const schema = {
type: "string"
};
render((
<Form schema={schema} />
), document.getElementById("app"));
Titles and descriptions
Fields can have titles and descriptions specified by the title
keyword in the schema and description
keyword in the schema, respectively. These two can also be overriden by the ui:title
and ui:description
keywords in the uiSchema.
const schema = {
title: "My form",
description: "My description",
type: "string"
};
render((
<Form schema={schema} />
), document.getElementById("app"));
Enumerated values
All base schema types support the enum
attribute, which restricts the user to select among a list of options. For example:
const schema = {
type: "string",
enum: ["one", "two", "three"]
};
render((
<Form schema={schema} />
), document.getElementById("app"));
Custom labels for enum
fields
This library supports a custom enumNames
property for enum
fields, which, however is not JSON-Schema compliant (see below for a compliant approach). The enumNames
property allows defining custom labels for each option of an enum
:
const schema = {
type: "number",
enum: [1, 2, 3],
enumNames: ["one", "two", "three"]
};
render((
<Form schema={schema} />
), document.getElementById("app"));
Alternative JSON-Schema compliant approach
JSON Schema has an alternative approach to enumerations using anyOf
; react-jsonschema-form supports it as well.
const schema = {
"type": "number",
"anyOf": [
{
"type": "number",
"title": "one",
"enum": [
1
]
},
{
"type": "number",
"title": "two",
"enum": [
2
]
},
{
"type": "number",
"title": "three",
"enum": [
3
]
}
]
};
render((
<Form schema={schema} />
), document.getElementById("app"));
Disabled attribute for enum
fields
To disable an option, use the ui:enumDisabled
property in the uiSchema.
const schema = {
type: "boolean",
enum: [true, false]
};
const uiSchema={
"ui:enumDisabled": [true],
};
render((
<Form schema={schema} uiSchema={uiSchema} />
), document.getElementById("app"));
Nullable types
JSON Schema supports specifying multiple types in an array; however, react-jsonschema-form only supports a restricted subset of this -- nullable types, in which an element is either a given type or equal to null.
const schema = {
type: ["string", "null"]
};
render((
<Form schema={schema} />
), document.getElementById("app"));