--- title: Textarea layout: docs theme: library 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 %}

The Bulma textarea CSS class is the multiline version of the input element:

{% include docs/elements/snippet.html content=textarea_example %} {% capture fixedsize_example %}
{% endcapture %}

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

{% include docs/elements/snippet.html content=textarea_rows_example %} {% include docs/elements/anchor.html name="Colors" %}

The textarea element is available in several colors:

{% for color in site.data.colors.justColors %} {% capture foobar %} {% endcapture %} {% include docs/elements/snippet.html content=foobar %} {% endfor %} {% include docs/elements/anchor.html name="Sizes" %}

The textarea element comes in 4 different sizes:

{% include docs/elements/snippet.html content=sizes_example %} {% include docs/elements/anchor.html name="States" %}

Bulma styles the different states of the textarea element. Each state is available as a pseudo-class and a CSS class:

This allows you to obtain the style of a certain state without having to trigger it.

Normal

{% include docs/elements/snippet.html content=normal_example %}

Hover

{% include docs/elements/snippet.html content=hover_example %}

Focus

{% include docs/elements/snippet.html content=focus_example %}

Loading

{% include docs/elements/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 docs/elements/snippet.html content=disabled_example %}

Readonly

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 docs/elements/snippet.html content=readonly_example %}

Fixed Size

You can disable a textarea resizing by appending the has-fixed-size modifier:

{% include docs/elements/snippet.html content=fixedsize_example %}