Like what we’re doing? Star us on GitHub!

Simple custom component example

4 weeks 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

  • Jarrod
    Payload Team
    3 weeks 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
Can't find what you're looking for?
Get help straight from the Payload team with an Enterprise License.Learn More