README

<p align="center"> <a href="https://github.com/rjsf-team/react-jsonschema-form"> </a> <h3 align="center">@rjsf/chakra-ui</h3> <p align="center"> Chakra UI theme, fields and widgets for <a href="https://github.com/rjsf-team/react-jsonschema-form/"><code>react-jsonschema-form</code></a>.

<a href="https://rjsf-team.github.io/react-jsonschema-form/docs/"><strong>Explore the docs »</strong></a>




<a href="https://rjsf-team.github.io/react-jsonschema-form/">View Playground</a>
·
<a href="https://github.com/rjsf-team/react-jsonschema-form/issues">Report Bug</a>
·
<a href="https://github.com/rjsf-team/react-jsonschema-form/issues">Request Feature</a>

</p> </p>

Table of Contents
About The Project
- Built With
Getting Started
- Prerequisites
- Installation
Usage
Optional Chakra UI Theme properties
- Custom Chakra uiSchema Chakra Property
Roadmap
Contributing
Contact

About The Project

Exports chakra-ui theme, fields and widgets for react-jsonschema-form.

Built With

Getting Started

Prerequisites

@chakra-ui/react >= 3
chakra-react-select >= 6
@rjsf/core >= 6
@rjsf/utils >= 6
@rjsf/validator-ajv8 >= 6

Refer to the rjsf installation guide and chakra-ui installation guide and for more details.

Installation

bash

yarn add @chakra-ui/react chakra-react-select @rjsf/core @rjsf/utils @rjsf/validator-ajv8

Usage

bash

yarn add @rjsf/chakra-ui

import Form from '@rjsf/chakra-ui';

import { withTheme } from '@rjsf/core';
import { Theme as ChakraUITheme } from '@rjsf/chakra-ui';

// Make modifications to the theme with your own fields and widgets

const Form = withTheme(ChakraUITheme);

Optional Chakra UI Theme properties

To pass additional properties to widgets, see this guide.

You can use ChakraProvider, to customize the components at a theme level.
And, uiSchema allows for the use of a "chakra" "ui:option" to customize the styling of the form widgets.

Custom Chakra uiSchema Chakra Property

json

{
  "ui:options": {
    "chakra": {
      "p": "1rem",
      "color": "blue.200",
      "sx": {
        "margin": "0 auto"
      }
    }
  }
}

It accepts the theme accessible style props provided by Chakra and Emotion.

Roadmap

See the open issues for a list of proposed features (and known issues).

Contributing

Read our contributors' guide to get started.

Contact

rjsf team: https://github.com/orgs/rjsf-team/people

GitHub repository: https://github.com/rjsf-team/react-jsonschema-form

Table of Contents