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 (
<div>
<Label htmlFor={path} label={label} required={required} />
{value} // Changes for all inputs
<input
type='range'
min='0'
max='1'
step='0.01'
onChange={e => setValue(e.currentTarget.value)}
/>
</div>
);
};
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;
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
@Marťafiixek ahhh! Thank you! 🙂
Star
Discord
online
Get help straight from the Payload team with an Enterprise License.