uiSchema Options for Chakra-UI¶

When using @rjsf/chakra-ui there are a couple of ways to customize the feel of the form.

Styling¶

You can use ChakraProvider, where you can 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.

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

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

Limitations¶

• The chakra option is only available for the Chakra-UI theme.
• The props are given to the parent component in the individual widget. To pass styles to the inner components, use the sx prop.