rjsf-material-design

1.0.1 • Public • Published

rjsf-material-design

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

Widgets

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"
        }
    }
}

Readme

Keywords

none

Package Sidebar

Install

npm i rjsf-material-design

Weekly Downloads

0

Version

1.0.1

License

Apache-2.0

Last publish

Collaborators

  • frassinier