Skip to main content
Version: v5

Chakra-UI Customization

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 field components at a theme level. And, uiSchema allows for the use of a "chakra" "ui:option" to customize the styling of the form widgets.

{
  "yourField": {
    "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.