uiSchema Options for Chakra-UI

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


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.


  • 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.