Lion Logo Lion Guides Components Docs Blog Toggle darkmode

Textarea: Features

Prefilled

You can prefill the textarea. If you want to prefill on multiline, you will have to add newline characters '\n'.

Disabled

The textarea can be disabled with the disabled attribute.

Readonly

readonly attribute indicate that you can't change the content. Compared with disabled attribute, the readonly attribute doesn't prevent clicking or selecting the element.

Stop growing

Use the max-rows attribute to make it stop growing after a certain amount of lines.

Non-growing

To have a fixed size provide rows and max-rows with the same value.

Intersection Observer

It could be that your textarea is inside a hidden container, for example for a dialog or accordion or tabs. When it is hidden, the resizing is calculated based on the visible space of the text. Therefore, an Intersection Observer observes visibility changes of the textarea relative to the viewport, and resizes the textarea when a visibility change happens.

For old browsers like old Edge or IE11, a polyfill is required to be added on the application level for this to work. For most cases, the optimized default will suffice.

In the demo below you can see that the textarea is correctly calculated to 4 maximum rows, whereas without the observer, it would be on 2 rows and only resize on user input.