Search code examples
vuejs3formkit

FormKit vue 3, textarea input, doesnt reflect rows prop


Im using Formkit, and i want to determine how big is the textarea throw the rows prop, but for some reason is not working:

<FormKit
type="textarea"
name="notes"
:rows="2"
:value="datigenerali?.notes"
label="Data Giornale"
:classes="formKitClasses" />

https://formkit.link/0765f45004e1e2951fc7c7011a6c30f1 i tried to do to they playground and the result is still the same, the prop rows, is not reflected, it gets passed to the component, but it doesnt reflect the changes


Solution

  • Formkit is applying h-24 to the textarea preventing it from taking the rows height,

    as a workaround, you can overwrite the height using inline style

      <FormKit
        type="textarea"
        rows="10"
        //Setting height to auto
        style="height: auto;"  
        label="FormKit Input"
        help="edit me to get started"
      />