rjsf-material-design

rjsf-material-design

Material-UI widget set on top of react-jsonschema-form (RJSF).

Widgets

• Checkbox
• Radio
• Toggle
• Text Field
  • Default
  • Number
  • Color
  • Email
  • Password
  • URL
  • Textarea
• Select Field

Checkbox

Checkboxes are supported for boolean and array types.

{
    "schema": {
        "type": "object",
        "properties": {
            "checkboxInputName": { "type": "boolean" }
        }
    }
}

Radio

{
    "schema": {
        "type": "object",
        "properties": {
            "radioInputName": { "type": "boolean" }
        }
    },
    "uiSchema": {
        "radioInputName": {
            "ui:widget": "radio"
        }
    }
}

Toggle

{
    "schema": {
        "type": "object",
        "properties": {
            "toggleInputName": { "type": "boolean" }
        }
    },
    "uiSchema": {
        "toggleInputName": {
            "ui:widget": "toggle"
        }
    }
}

TextField

Default

Default widget is <input type=["text"]>

{
    "schema": {
        "type": "object",
        "properties": {
            "inputName": { "type": "string" }
        }
    }
}

Number

Widget is <input type=["number"]>

{
    "schema": {
        "type": "object",
        "properties": {
            "inputName": { "type": "integer" }
        }
    },
    "uiSchema": {
        "inputName": {
            "ui:widget": "updown"
        }
    }
}

Color

Widget is <input type=["color"]>

{
    "schema": {
        "type": "object",
        "properties": {
            "inputName": { "type": "string" }
        }
    },
    "uiSchema": {
        "inputName": {
            "ui:widget": "color"
        }
    }
}

Email

Widget is <input type=["email"]>

{
    "schema": {
        "type": "object",
        "properties": {
            "inputName": { "type": "string" }
        }
    },
    "uiSchema": {
        "inputName": {
            "ui:widget": "email"
        }
    }
}

Password

Widget is <input type=["password"]>

{
    "schema": {
        "type": "object",
        "properties": {
            "inputName": { "type": "string" }
        }
    },
    "uiSchema": {
        "inputName": {
            "ui:widget": "password"
        }
    }
}

URL

Widget is <input type=["url"]>

{
    "schema": {
        "type": "object",
        "properties": {
            "inputName": { "type": "string" }
        }
    },
    "uiSchema": {
        "inputName": {
            "ui:widget": "url"
        }
    }
}

Textara

Widget is <textarea></textarea>

{
    "schema": {
        "type": "object",
        "properties": {
            "inputName": { "type": "string" }
        }
    },
    "uiSchema": {
        "inputName": {
            "ui:widget": "textarea"
        }
    }
}

SelectField

Widget looks like <select></select>

{
    "schema": {
        "type": "object",
        "properties": {
            "selectName": {
                "type": "string",
                "enum": ["foo", "bar"],
                "enumNames": ["Foo", "Bar"],
            }
        }
    },
    "uiSchema": {
        "selectName": {
            "ui:widget": "select"
        }
    }
}