Sanity V3 custom checkbox component error with part: imports

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;
AI Update

The issue you're encountering is because you're using Sanity Studio v2 syntax in what appears to be a v3 project. The imports from part:@sanity/form-builder and part:@sanity/components don't exist in Studio v3 - these were the v2 APIs.

Here's how to create a custom checkbox input component for Sanity Studio v3:

import React from "react";
import { set, unset } from "sanity";
import { Stack, Checkbox } from "@sanity/ui";

const CheckboxComponent = React.forwardRef((props, ref) => {
  const { elementProps, onChange, value = false } = props;
  
  const handleChange = React.useCallback(
    (event) => {
      const isChecked = event.currentTarget.checked;
      onChange(isChecked ? set(isChecked) : unset());
    },
    [onChange]
  );

  return (
    <Stack space={3}>
      <Checkbox
        {...elementProps}
        ref={ref}
        checked={value}
        onChange={handleChange}
      />
    </Stack>
  );
});

export default CheckboxComponent;

Then in your schema, use it like this:

{
  name: 'myCheckboxField',
  type: 'boolean',
  components: {
    input: CheckboxComponent
  }
}

Key differences from v2 to v3:

  1. No more part: imports - Import directly from sanity and @sanity/ui
  2. PatchEvent is gone - Just use set() and unset() directly from the sanity package
  3. No FormField wrapper needed - Studio v3 handles labels/descriptions automatically
  4. Props structure changed - You get elementProps, onChange, value directly
  5. Schema integration - Use components.input property instead of inputComponent

For a complete guide on creating custom input components in v3, check out this official guide. If you're migrating existing v2 components, the migration guide has detailed information on all the API changes.

Show original thread
13 replies
not very aware about vite so……..
https://www.sanity.io/docs/parts Seems outdated? Sanity json won’t be in V3 right?
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
Yes its very confusing as of now. I hope it becomes easier or with more examples. Anyway thanks for help.
I still get the same error tho :melting_face:
did you change your code?
Yes. I have
how does it look now?
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 },
},
the dots are rest of schema. It is pretty large.
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
Its just my guess but I think parser config is required for vite
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
.

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Was this answer helpful?