How to transform the value of a input and set it as the value of another input?

[Youhan]

I would like to create 2 inputs, one as the title and the other as the slug. I would like to auto-transform and fill the slug field based on title. This is a common pattern and probably you have seen it before where you type This is the title in and the slug field is auto-generated as this-is-the-title.

Maybe it is already in the docs somewhere but I could not find it after half an hour. I thought I'd better ask.

[andrew-boyd]

Hey there! We actually just worked up an example for someone in the Discord yesterday! Here's a playground that should get you pointed in the right direction.

In this solution we have 2 distinct plugins — one that's responsible for forwarding a value to a target field, and another that's responsible for converting an input into a "slugified" string.

https://formkit.link/908495d520f9c7d33bd812e1d1ac821e

[Youhan]

Thank you @andrew-boyd

[andrew-boyd]

Everyone's tinkering in our internal FormKit Discord about ways to do this because we'll probably add it as an example somewhere in our docs — so expect a couple more answers incoming 😆

[Youhan]

Would there be a solution to do this in a schema? I really like to define a schema object and just use <FormKitSchema> component.

[Youhan]

Worth mentioning that it gets more complicated when the 2 fields are children of a repeater!

[andrew-boyd]

You can pass plugins to schema with a plugins key — same as you would for components. You can either include your plugin function in the data object you pass to schema or you can globally register the plugin and then perform some sort of opt-in behavior via the existence of a prop.

Here is an example of opting in to a global plugin: https://formkit.link/a313d6ad579afcb8cd4b9085a23e7950

For a repeater, you have access to the $index so just include that in your IDs that you target with to support multiple instances.

[sashamilenkovic]

@Youhan I gotchu https://formkit.link/49bd283b4c2cf75d34e93b1e61feab26

[fenilli]

You can do it a with a single plugin like so by listening to the commit and hooking into the value of the target node.

https://formkit.link/b67e4efb99aaa65812196a2d8ffe6283

[Youhan]

I created this for a repeater field based on your solution https://formkit.link/d72143c58417e6492075419c62c659ca

[justin-schroeder]

This is fun. here’s my take: https://formkit.link/eb92ce5d190fa4152f4353d204c4e2ea

[Youhan]

This has the least code so far! 😃

[Youhan]

Here is an example that has validation and is using a repeater field.

Thank you for your super awesome support team. ❤️

https://formkit.link/ba67d2f13e7921e367093a1b5ac131e8