reactjsnext.jsreact-forms

How to make input with Dimensions(width, height and length) and stacking it up(useField array)


I am building a form where I'd like to create an input field that accepts three values (width, height, and length) and stacking it up using react use field array, similar to what you see in the GIF below:

enter image description here

btw I'm using nextjs 13


Solution

  • This is probably best achieved if you encapsulate three separate text input HTML fields within something like a div and add the styling necessary with some CSS.
    There is no such input that can do the above out of the box. You will need to retrieve the data from all three inputs separately and handle them accordingly.