
Grab your gear: The official Sanity swag store
Read Grab your gear: The official Sanity swag storeThe 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:
part: imports - Import directly from sanity and @sanity/uiset() and unset() directly from the sanity packageelementProps, onChange, value directlycomponents.input property instead of inputComponentFor 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.
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.
Content operations
Content backend


The only platform powering content operations
By Industry


Tecovas strengthens their customer connections
Build and Share

Grab your gear: The official Sanity swag store
Read Grab your gear: The official Sanity swag store