Conditional Fields without rewriting them from scratch, say, a Reference Field

Hi! I want to show/hide a Reference Field conditionally, say, depending on a select box above it.

I followed the tutorial and JSON-Editor based code sample but there the form is rewritten almost from scratch. Without reusing Contentful’s components (not only visual ones), we lose behaviors like:

  • active field highlight
  • embedded preview for Link fields
  • accessibility and possibly useful data attributes
  • native validation
  • creation/linking of entries for reference fields

Is it possible to make a Reference Field conditional without having to rewrite it from scratch? I see the Entity List presentation component in F36’s Storybook but is it possible to import and reuse also the logic to support it?

Here’s my experiment so far btw https://github.com/davilima6/contentful-ui-conditional-fields Maybe it serves as reference, specially src/renderWidget.js

1 Like

Hey Davi!

Sorry for the slow response, but I just wanted to let you know that we’ve recently released the field editors that are used on Contentful as open source React components. You can check out the documentation here. https://contentful-field-editors.netlify.app/

Hopefully it should make it a lot easier for you implement conditional fields !

1 Like