--- 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 %} {% include subnav-form.html %}

Textarea

The multiline textarea and its variations

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

The following modifiers are supported:

{{textarea_example}}
{% highlight html %}{{textarea_example}}{% endhighlight %}

New! 0.4.4

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

{{textarea_rows_example}}
{% highlight html %}{{textarea_rows_example}}{% endhighlight %}
{% include heading.html name="Colors" %}
{{colors_example}}
{% highlight html %}{{colors_example}}{% endhighlight %}
{% include heading.html name="Sizes" %}
{{sizes_example}}
{% highlight html %}{{sizes_example}}{% endhighlight %}

States

Normal

{{normal_example}}
{% highlight html %}{{normal_example}}{% endhighlight %}

Hover

{{hover_example}}
{% highlight html %}{{hover_example}}{% endhighlight %}

Focus

{{focus_example}}
{% highlight html %}{{focus_example}}{% endhighlight %}

Loading

{{loading_example}}
{% highlight html %}{{loading_example}}{% endhighlight %}
{% if site.vernum >= 43 %}

New! 0.4.3

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

Disabled

{{disabled_example}}
{% highlight html %}{{disabled_example}}{% endhighlight %}