Add customizable edit-mode placeholder text for KeyValue component Property fields

💬 Feature Requests
1

Problem

When using the KeyValue component with editable fields, all empty fields display "Enter value" as the placeholder text when clicked for editing. This generic placeholder cannot be customized on a per-field basis, which limits the ability to provide contextually appropriate guidance to users.

Use Case

In our workspace summary page, we have a KeyValue component displaying workspace details including an "Enabled Services (Workspace Add-Ons)" field with format "tags". When users click to edit this field:

  • Current behavior: Shows "Enter value" as placeholder

  • Desired behavior: Show "Select value" as placeholder (since users are selecting from options, not entering free text)

Different field types and contexts benefit from different placeholder text:

  • Selection fields: "Select value" or "Choose option"

  • Text fields: "Enter description" or specific guidance

  • Numeric fields: "Enter amount" or "Enter number"

Requested Feature

Add support for customizable placeholder text in edit mode for KeyValue component Property configurations.

Suggested Implementation:
Add a placeholder property to the editableOptions object for each Property, similar to how standard input components work

<Property
  id="addons"
  editable={true}
  editableOptions={{ 
    placeholder: "Select value"  // <-- New property
  }}
  format="tags"
  label="Enabled Services (Workspace Add-Ons)"
/>

Alternatively, allow the existing placeholder property (currently used for view mode) to also apply to edit mode.

Benefits

  • Improved UX: Context-specific guidance for users

  • Consistency: Matches behavior available in standalone input components

  • Flexibility: Allows developers to tailor messaging per field type

  • Accessibility: Clearer instructions for all users

Current Workaround

Currently, there's no workaround for customizing this text without replacing the KeyValue component with separate input components, which loses the benefits of KeyValue's automatic layout and save/cancel functionality.

Additional Context:
This feature request emerged from working with the KeyValue component's editable fields where the default "Enter value" placeholder doesn't accurately describe the user action for selection-based fields (tags, select, etc.).

1 Like
3

Hi @Sandra_Bhalla!

Thank you for the detailed write up and examples. I can make this feature request for you.

I was curious, you mentioned " Alternatively, allow the existing placeholder property (currently used for view mode) to also apply to edit mode." I am trying to find that existing property and I am not sure where to look :sweat_smile:

Are you referring to view mode for the app, being where this property can be found?