Custom input field component: Using the correct path?

default discord avatar
2 months ago

I am trying to build a custom input component. I tried to use the path to get the correct value from the field. But in my group, all inputs are receiving the same path/value. What i am missing here?

Simple range slider component:

import React from 'react';
import { useField } from 'payload/components/forms';
import { Label } from 'payload/components/forms';
import { Props } from 'payload/components/fields/Number';

const RangeSelect: React.FC<Props> = (props) => {
    const { path, label, required } = props;
    const { value = 0.5, setValue } = useField({ path });
    return (
            <Label htmlFor={path} label={label} required={required} />
            {value} // Changes for all inputs
                onChange={e => setValue(e.currentTarget.value)}

export default RangeSelect;

import { Field } from 'payload/types';
import RangeSelect from '../components/RangeSelect';

const Classification: Field = {
    name: 'classification',
    type: 'group',
    label: 'Classification',
    fields: [
            name: 'option1',
            type: 'ui',
            label: 'Option1',
            admin: {
                components: {
                    Field: RangeSelect
            name: 'option2',
            type: 'ui',
            label: 'Option2',
            admin: {
                components: {
                    Field: RangeSelect

export default Classification;
  • default discord avatar
    last month

    Hi! Sorry to answer late, but better late than never

    Change the type of both fields to number

    UI type is strictly for presentational purposes, therefore it doesn't have any path

    And because both of your fields don't have any path, they act as a one, as path is an empty string for UI fields

  • default discord avatar
    last month

    @Marťafiixek ahhh! Thank you! 🙂

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.