ObjectField

ObjectField renders a list of key/value pair inputs. The user can add new pairs with an "Add item" button, edit both the key and value of each pair as free-form text, and delete any pair with a trash icon. The component emits a Record<string, any> object via onChange whenever the pairs change.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | value | Record<string, any> | Yes | — | Current object. Each own-property becomes a key-value row. | | onChange | (newValue: Record<string, any>) => void | Yes | — | Called with the updated object whenever any pair is added, edited, or removed. | | label | string | No | — | Label rendered in the field header. | | description | string | No | — | Helper text rendered below the field. | | containerStyle | React.CSSProperties | No | — | Styles applied to the outer FieldContainer. | | headerStyle | React.CSSProperties | No | — | Styles applied to the field header area. | | bodyStyle | React.CSSProperties | No | — | Styles applied to the field body area. | | labelStyle | React.CSSProperties | No | — | Styles applied to the label element. | | descriptionStyle | React.CSSProperties | No | — | Styles applied to the description paragraph. | | className | string | No | — | CSS class name applied to the outer container. |

Usage

Basic

import React, { useState } from 'react';
import ObjectField from '@/components/fields/ObjectField';

export default function Example() {
  const [meta, setMeta] = useState<Record<string, any>>({});

  return (
    <ObjectField
      label="Metadata"
      value={meta}
      onChange={setMeta}
    />
  );
}

Pre-populated with existing data

<ObjectField
  label="Custom attributes"
  value={{ color: 'red', size: 'M', weight: '200' }}
  onChange={setAttributes}
  description="Add any additional product attributes as key-value pairs."
/>