Unlock seamless workflows and faster delivery with our latest releases- get the details

Error creating custom checkbox input component in Sanity V3

13 replies
Last updated: Dec 22, 2022
Trying to create new custom checkbox input component in Sanity V3. But getting error in attached screenshot.import React from “react”;


// Important items to allow form fields to work properly and patch the dataset.
import { PatchEvent, set } from "part:@sanity/form-builder/patch-event";
import FormField from "part:@sanity/components/formfields/default";

// Import the TextInput from UI
import { Checkbox } from "@sanity/ui";

const Checkboxcomponent = React.forwardRef((props, ref) => {
  const { type, onChange } = props;
  return (
    <FormField label={type.title} description={type.description}>
      <Checkbox
        ref={ref}
        placeholder={type.placeholder}
        value={props.value}
        onChange={(event) => {
          console.log(event, "event");
          // onChange(PatchEvent.from(set(event.target.value)));
        }}
      />
    </FormField>
  );
});

export default Checkboxcomponent;
Dec 22, 2022, 12:13 PM
not very aware about vite so……..
Dec 22, 2022, 12:13 PM
https://www.sanity.io/docs/parts Seems outdated? Sanity json won’t be in V3 right?
Dec 22, 2022, 12:21 PM
start here, the new docs for custom components:
https://www.sanity.io/docs/form-components I felt that the docs regarding custom components are still lacking, but probably because a lot is still marked as beta
Dec 22, 2022, 12:24 PM
Yes its very confusing as of now. I hope it becomes easier or with more examples. Anyway thanks for help.
Dec 22, 2022, 12:30 PM
I still get the same error tho :melting_face:
Dec 22, 2022, 12:38 PM
did you change your code?
Dec 22, 2022, 12:41 PM
Yes. I have
Dec 22, 2022, 12:41 PM
how does it look now?
Dec 22, 2022, 12:41 PM
function Checkboxcomponent(props) { return (
&lt;Stack space={3}&gt;
{props.renderDefault(props)}
&lt;Text size={1}&gt;Characters: {props.value?.length || 0}&lt;/Text&gt;
&lt;/Stack&gt;
);
}


….
{
name: “category”,
title: “Category”,
type: “string”,
components: { input: Checkboxcomponent },
},
Dec 22, 2022, 12:42 PM
the dots are rest of schema. It is pretty large.
Dec 22, 2022, 12:42 PM
aah, then there is nothing else I can help with sorry, don't know much about vite myself, just thought it might have something to do with the new way of creating custom components, but it seems you used the example code and if that still doesn't work then maybe its something else
Dec 22, 2022, 12:43 PM
Its just my guess but I think parser config is required for vite
Dec 22, 2022, 12:43 PM
The issue here is that your file is named
checkbox.js
but it contains
jsx
. You'll need to rename the file to
checkbox.jsx
.
Dec 22, 2022, 6:49 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?