Skip to main content
Version: v4

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.