KeyValueInputs - Showcase

[didoo]

📌 Summary

This is a follow-up of #2911, where we add the showcase pages for the KeyValueInput and re-create functional demos of UX flows that we've spotted in production.

🛠️ Detailed description

In this PR I have:

• cherry-picked showcase related changes from KeyValueInputs - Component implementation #2911 (branch hds-4903/key-value-component)
• added a11y acceptance and percy tests
• improved some of the existing demos
• created fully-functional demos of KeyValueInputs within an <Hds::Form>
  • with validation and limit
  • with dynamic inputs
  • as filter for a table

Previews:

• showcase page: https://hds-showcase-git-hds-4903-key-value-component-aa2f70-hashicorp.vercel.app/components/form/key-value-inputs
• demos of UX flows: https://hds-showcase-git-hds-4903-key-value-component-aa2f70-hashicorp.vercel.app/components/form/key-value-inputs/frameless/demo-flows

🔗 External links

Jira ticket: https://hashicorp.atlassian.net/browse/HDS-5069

---

👀 Component checklist

• Percy was checked for any visual regression

💬 Please consider using conventional comments when reviewing this PR.

📋 PCI review checklist

• If applicable, I've documented a plan to revert these changes if they require more than reverting the pull request.
• If applicable, I've worked with GRC to document the impact of any changes to security controls.
  Examples of changes to controls include access controls, encryption, logging, etc.
• If applicable, I've worked with GRC to ensure compliance due to a significant change to the in-scope PCI environment.
  Examples include changes to operating systems, ports, protocols, services, cryptography-related components, PII processing code, etc.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
hds-showcase	✅ Ready (Inspect)	Visit Preview	Jul 4, 2025 8:05pm
hds-website	✅ Ready (Inspect)	Visit Preview	Jul 4, 2025 8:05pm

[dchyun]

The new demo is a great walkthrough of the expected pattern! I went through all the listed steps, and some of my own attempting to break it and it is working smoothly for all of those cases.

My one suggestion is on the expected behavior for how the delete button acts on the first row when no other rows are present.

In the current demo:

• With the toggle off, a delete button is never present when there is only one row. Any delete button in the first row is removed if the number of rows is changed from 2 to 1.
• With the toggle on, a delete button is always present in the first row, even if it is clicked to clear the input values.

Based on the design guidance on delete behavior the expected interaction is slightly different.

• The presence of the delete button in the first row is based only on if the user has entered any data into those fields.
• It is only removed if those fields are empty.
• Clicking it clears the fields and removes the button
• Ex: If two rows are present and one is deleted, the delete button in the remaining row is still shown if that row is not empty.

[shleewhite]

Just a quick initial review, will circle back to look more thoroughly after the long weekend.