Integrating Chakra UI’s Input component with Blitz

Integrating Chakra UI’s Input component with Blitz

Here’s a quick write-up for getting the https://blitzjs.com/ CLI for generating new models to work with Chakra UI.

We need to modify the LabeledTextFieldProps class created by the CLI, to use Chakra’s Input component instead of the stock one.

import { Input } from "@chakra-ui/react"

// Change the interface we extend to look like this
export interface LabeledTextFieldProps extends ComponentPropsWithoutRef<typeof Input>

// Locate the <input> line, and simply make the first character uppercase, like this:
<Input {...input} disabled={submitting} {...props} ref={ref} />

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: