Simple custom component example

default discord avatar
7 months ago

I'm attempting to create a simple custom component for Number input field and add that to collection.

I have created custom UI components, they are simple as they don't required any data to be sent to collection.

I have been through documentation about this:

All the example don't really work in real life, they don't compile (e.g. Property 'path' does not exist on type 'string'.ts and other errors).

Does anybody have a simple custom components they have made for String and or Number fields that work when added to Collection and perhaps a reference to doc where it describes how to add custom input components.

For example, while CustomTextComponent works, CustomNumberComponent doesn't for some reason (just changed "string" with "number").

type Props = { path: number }

const CustomNumberField: React.FC<Props> = ({ path }) => {
  const { value, setValue } = useField<number>({ path })

  return <input onChange={e => setValue(} value={value} />
export default CustomNumberField;

Type 'number' is not assignable to type 'string'.ts

  • default discord avatar
    7 months ago

    is the path key for the field inside the form the field is rendered inside of, it will always be a string

Open the post
Continue the discussion in Discord
Like what we're doing?
Star us on GitHub!


Connect with the Payload Community on Discord



Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.