[UTextarea] Proposal: Add `fixedRows` prop to limit input to fixed number of rows

[yeonjulee1005]

Environment

---

• Operating System: Darwin
• Node Version: v24.5.0
• Nuxt Version: 4.1.3
• CLI Version: 3.30.0
• Nitro Version: 2.12.9
• Package Manager: bun@1.3.3
• Builder: -
• User Config: modules, imports, devtools, app, css, colorMode, mdc, ui, runtimeConfig, build, sourcemap, compatibilityDate, nitro, vite, typescript, eslint, image, mongoose, pinia, stylelint, supabase, vueuse
• Runtime Modules: @nuxt/eslint@1.9.0, @nuxtjs/supabase@1.6.2, @nuxtjs/mdc@0.18.2, @vueuse/nuxt@13.9.0, @nuxt/image@1.11.0, @nuxt/scripts@0.11.13, @nuxt/test-utils@3.19.2, @nuxtjs/stylelint-module@5.2.1, @nuxtjs/color-mode@3.5.2, @nuxt/ui@4.1.0, nuxt-mongoose@1.0.6, @vueuse/nuxt@13.9.0, @pinia/nuxt@0.11.3, pinia-plugin-persistedstate/nuxt@4.7.1
• Build Modules: -

---

Is this bug related to Nuxt or Vue?

Nuxt

Package

v4.x

Version

v4.1.0

Reproduction

https://ui.nuxt.com/docs/components/textarea#autoresize

Description

Currently, the maxrows prop only works when autoresize is enabled, limiting the maximum number of rows a textarea can grow to. However, there's no way to set a fixed number of rows that should always be displayed and prevent input beyond that number of lines.

Add a new fixedRows prop that:

• Always displays exactly the specified number of rows
• Automatically prevents input beyond the specified number of lines
• Works independently of autoresize
• Automatically applies overflow-hidden and resize-none styles to prevent scrolling and resizing

This feature would be useful when:

• You need consistent vertical spacing in forms where multiple textareas should always occupy the same space
• You want to limit input to a specific number of lines
• UI design requires fixed-height textareas

Example Usage

<!-- Always show 5 rows and prevent input beyond 5 lines -->
<UTextarea fixedRows="5" v-model="value" />

<!-- Current behavior: can grow up to 5 rows with autoresize -->
<UTextarea autoresize maxrows="5" v-model="value" />

I'll try to submit a PR (fix) for this sometime this week! 🤗

default.mov

2026-01-15.10.42.48.mov

Additional context

No response

Logs

[caiotarifa]

@yeonjulee1005 rows prop (without autoresize) already keeps the textarea height fixed, and maxlength can limit the text size. Wouldn’t :rows="N" + maxlength (optionally with resize-none class) cover the use case, instead of introducing a new prop?

https://ui.nuxt.com/docs/components/textarea#props

[yeonjulee1005]

@caiotarifa

Thank you for the suggestion!
I actually tested using rows + maxlength, but unfortunately, when maxlength is set to a large value, it doesn't effectively limit the number of line breaks.

The issue is that maxlength restricts characters, not lines, so users can still create many line breaks within the character limit.🥲

I tried to find an alternative solution, but I believe introducing fixedRows is the best approach to properly limit the number of lines while allowing users to input text naturally.🥹

[caiotarifa]

@yeonjulee1005 Even if we try to “limit lines”, that becomes a very app-specific rule and gets tricky with responsive wrapping (what is a “line” varies by width). For this case, just limit explicit newlines (\n) in userland by clamping the modelValue and truncating extra line breaks. That keeps UTextarea simple for all.

<script setup lang="ts">
const maxLines = 3
const text = ref('')

function clampNewlines(value: string) {
  const normalized = value.replace(/\r\n/g, '\n')
  const lines = normalized.split('\n')

  return lines.length <= maxLines
    ? normalized
    : lines.slice(0, maxLines).join('\n')
}

function onUpdate(value: string) {
  text.value = clampNewlines(value)
}
</script>

<template>
  <UTextarea
    :model-value="text"
    @update:model-value="onUpdate"
    :rows="maxLines"
    :ui="{ base: 'resize-none' }"
  />
</template>

(I didn't tested the code, it's just a start...)

[yeonjulee1005]

@caiotarifa
Oh.. I'll think more and try your mention ways!! Thank you my friend!!!! 🥹