References

Beginner-friendly references for web development, with live, editable examples.

The HTML rows attribute

Attribute All modern browsers Updated
In short

The HTML rows attribute sets the number of visible text lines in a <textarea>, for example rows="5". The default is 2. It only changes the height, so users can still type more lines and scroll, and a CSS height overrides it.

Overview

The HTML rows attribute sets how many lines of text a <textarea> shows at once. It takes a whole number greater than zero, and a textarea without it is 2 lines tall. A value of 0, a negative number or text is treated as missing, so the height falls back to 2 lines.

The height follows the textarea's line height. In our Chrome test, 4 rows at a 20px line height gave an 80px text area plus padding and border, and doubling the line height to 40px doubled it. The number only controls what's visible. People can type as many lines as they like, and the extra lines scroll inside the box.

CSS wins over rows. A CSS height on the textarea, including one from a framework class, replaces the size the attribute asks for, and a min-height taller than that size does too. When a rows value seems to do nothing, look for a CSS height first.

To let a textarea grow with its content, CSS offers field-sizing: content. MDN's compatibility data lists it in Chrome and Edge 123, Firefox 152 and Safari 26.2. In Chrome an empty textarea then shrinks to one line, so give it a min-height.

Syntax

<label for="message">Message</label>
<textarea id="message" name="message" rows="6" cols="40"></textarea>

Values

Value
A positive integer (default 2).

Example

Live example 
<p><label for="short">rows="2", the default</label><br>
<textarea id="short" rows="2">Line one
Line two
Line three scrolls</textarea></p>
<p><label for="tall">rows="5"</label><br>
<textarea id="tall" rows="5">Line one
Line two
Line three fits</textarea></p>

Best practices

  • Choose rows from the expected answer, a few lines for a comment and more for a message or bio.
  • Keep rows even when CSS sets the height, so the field keeps a sensible size without the stylesheet.
  • Add a min-height when using field-sizing: content, because Chrome shrinks an empty textarea to a single line.
  • Let people resize the field vertically with the CSS declaration resize: vertical instead of switching resizing off.

Frequently asked questions

What does the rows attribute do on a textarea?
The rows attribute sets how many lines of text a textarea shows before it scrolls. It changes only the visible height, not how much text the field accepts.
What is the default rows value for a textarea?
A textarea without a rows attribute shows 2 lines. Zero, negative or non-numeric values also fall back to 2.
Why is my textarea ignoring the rows attribute?
A CSS height, or a taller min-height, overrides the rows attribute. MDN adds that rows has no effect on a textarea with field-sizing: content. Remove the rule, or size the field in CSS and keep rows as a fallback.
Does rows limit how many lines a user can type?
No, rows only sets the visible height of the textarea. Extra lines scroll inside the box, and maxlength is the attribute that limits the amount of text.
How do I make a textarea grow as the user types?
Set field-sizing: content in CSS instead of relying on rows. MDN lists support in Chrome 123, Firefox 152 and Safari 26.2, and older browsers keep the rows height.
Should I size a textarea with rows or with CSS?
Use both, with rows as the default height and CSS for exact sizing. Keeping rows gives the field a usable size even if the stylesheet fails to load.
reversed rowspan