--- title: Textarea layout: documentation doc-tab: form doc-subtab: textarea --- {% capture textarea_example %} {% endcapture %} {% capture textarea_rows_example %} {% endcapture %} {% capture colors_example %}

{% endcapture %} {% capture sizes_example %}

{% endcapture %} {% capture normal_example %}

{% endcapture %} {% capture hover_example %}

{% endcapture %} {% capture focus_example %}

{% endcapture %} {% capture loading_example %}

{% endcapture %} {% capture loading_sizes_example %}

{% endcapture %} {% capture disabled_example %}

{% endcapture %} {% capture readonly_example %}

This content is readonly

{% endcapture %} {% include subnav-form.html %}

Textarea

The multiline textarea and its variations

{% include meta.html colors=true sizes=true variables=false %}

{% include snippet.html content=textarea_example %}

You can set the height of the textarea using the `rows` HTML attribute.

{% include snippet.html content=textarea_rows_example %} {% include anchor.html name="Colors" %} {% include snippet.html content=colors_example %} {% include anchor.html name="Sizes" %} {% include snippet.html content=sizes_example %} {% include anchor.html name="States" %}

Normal

{% include snippet.html content=normal_example %}

Hover

{% include snippet.html content=hover_example %}

Focus

{% include snippet.html content=focus_example %}

Loading

{% include snippet.html content=loading_example %} {% if site.vernum >= 43 %}

You can resize the loading spinner by appending is-small, is-medium or is-large to the control container.

{% highlight html %}{{loading_sizes_example}}{% endhighlight %}

{% endif %}

Disabled

{% include snippet.html content=disabled_example %}

Readonly

New 0.5.3

If you use the readonly HTML attribute, the textarea will look similar to a normal one, but is not editable and has no shadow.

{% include snippet.html content=readonly_example %}