You are viewing the deprecated 0.9.0 version of the website. Click here to view the latest version

Textarea

The multiline textarea and its variations

Colors Yes
Sizes Yes
Variables No

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

<textarea class="textarea" placeholder="e.g. Hello world"></textarea>

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

<textarea class="textarea" placeholder="10 lines of textarea" rows="10"></textarea>

Colors #

The textarea element is available in several colors:

<div class="field">
  <div class="control">
    <textarea class="textarea is-primary" placeholder="Primary textarea"></textarea>
  </div>
</div>
<div class="field">
  <div class="control">
    <textarea class="textarea is-info" placeholder="Info textarea"></textarea>
  </div>
</div>
<div class="field">
  <div class="control">
    <textarea class="textarea is-success" placeholder="Success textarea"></textarea>
  </div>
</div>
<div class="field">
  <div class="control">
    <textarea class="textarea is-warning" placeholder="Warning textarea"></textarea>
  </div>
</div>
<div class="field">
  <div class="control">
    <textarea class="textarea is-danger" placeholder="Danger textarea"></textarea>
  </div>
</div>

Sizes #

The textarea element comes in 4 different sizes:

<div class="field">
  <div class="control">
    <textarea class="textarea is-small" placeholder="Small textarea"></textarea>
  </div>
</div>
<div class="field">
  <div class="control">
    <textarea class="textarea" placeholder="Normal textarea"></textarea>
  </div>
</div>
<div class="field">
  <div class="control">
    <textarea class="textarea is-medium" placeholder="Medium textarea"></textarea>
  </div>
</div>
<div class="field">
  <div class="control">
    <textarea class="textarea is-large" placeholder="Large textarea"></textarea>
  </div>
</div>

States #

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

  • :hover and is-hovered
  • :focus and is-focused
  • :active and is-active

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

Normal

<div class="control">
  <textarea class="textarea" placeholder="Normal textarea"></textarea>
</div>

Hover

<div class="control">
  <textarea class="textarea is-hovered" placeholder="Hovered textarea"></textarea>
</div>

Focus

<div class="control">
  <textarea class="textarea is-focused" placeholder="Focused textarea"></textarea>
</div>

Loading

<div class="control is-loading">
  <textarea class="textarea" placeholder="Loading textarea"></textarea>
</div>

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

<div class="field">
  <div class="control is-small is-loading">
    <textarea class="textarea is-small" placeholder="Small loading textarea"></textarea>
  </div>
</div>
<div class="field">
  <div class="control is-loading">
    <textarea class="textarea" placeholder="Normal loading textarea"></textarea>
  </div>
</div>
<div class="field">
  <div class="control is-medium is-loading">
    <textarea class="textarea is-medium" placeholder="Medium loading textarea"></textarea>
  </div>
</div>
<div class="field">
  <div class="control is-large is-loading">
    <textarea class="textarea is-large" placeholder="Large loading textarea"></textarea>
  </div>
</div>

Disabled

<div class="control">
  <textarea class="textarea" placeholder="Disabled textarea" disabled></textarea>
</div>

Readonly

Since 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.

<div class="control">
  <textarea class="textarea" readonly>This content is readonly</textarea>
</div>

Fixed Size

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

<div class="control">
  <textarea class="textarea has-fixed-size" placeholder="Fixed size textarea"></textarea>
</div>

Made with Bulma
This page is open source. Noticed a typo? Or something unclear?
Improve this page on GitHub

#native_company# #native_desc#
#native_cta#
New!

The official Bulma book! 😲

by Jeremy Thomas, creator of Bulma, Oleksii Potiekhin,
Mikko Lauhakari, Aslam Shah and David Berning

A step-by-step guide that teaches you how to build a web interface from scratch using Bulma.

Formats available:
PDF Epub Mobi
or
Kindle

Newsletter

Features, releases, showcase… stay in the loop!