Error message and description above input

[timpulver]

Placing the error message and input description above the input provides various accessibility benefits, one of them being that the information does not get hidden by an overlaying on-screen keyboard on mobile devices.

It would be great if this was possible with FormKit / FormKit Pro, probably using an extra prop.

Great recent talk by Vitaly Friedman (founder of Smashing Magazine) where this is discussed:
Inclusive Design Patterns for 2025: https://www.youtube.com/live/xEtKkLdAnvI?si=JAhTuU9LpOQaFwfR&t=5135

[sashamilenkovic]

@timpulver Hey there! When it comes to moving FormKit schema around (such as placing help and messages above the input), the easiest way is via. the exports CLI. https://formkit.com/guides/export-and-restructure-inputs. I'd recommend checking that guide out.

Unfortunately, the exports CLI is still not available for the pro inputs. That being said, moving sections schema can still be done by using a plugin. Here's an example of moving the help and messages sections above the autocomplete and datepicker inputs: https://formkit.link/f0df07273e48e94804551d8832c93cec

Let us know if you have anymore questions!

Edit: Oh, in addition, at the form level (so not specific inputs), there is documentation here https://formkit.com/inputs/form#moving-validation-and-error-messages on how to move validation form messages.

[timpulver]

Thanks a lot @sashamilenkovic! I will have a look at the exports CLI.