@rjsf/chakra-ui

@rjsf/chakra-ui

Chakra UI theme, fields and widgets for react-jsonschema-form.
Explore the docs »

View Playground · Report Bug · Request Feature

Table of Contents

• 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

• react-jsonschema-form
• Chakra UI
• TypeScript

Getting Started

Prerequisites

• @chakra-ui/react >= 1.7.0
• chakra-react-select >= 3.3.8
• react >= 17.0.0
• framer-motion >= 5.0.0
• @rjsf/core >= 2.0.0

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

---

Installation

yarn add @chakra-ui/react@^1.7 @emotion/react@^11 @emotion/styled@^11 framer-motion@^5

yarn add @rjsf/chakra-ui @rjsf/core

Usage

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

or

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

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