--- title: Textarea subtitle: "The multiline textarea and its variations" layout: documentation doc-tab: form doc-subtab: textarea breadcrumb: - home - documentation - form - form-textarea meta: colors: true sizes: true variables: false --- {% 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 %}
{% endcapture %} {% 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 %}

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

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

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 %}