Learn CSS with πŸŽ“ online interactive courses,πŸ“Ί educational videos, and πŸ§‘πŸ»β€πŸ’»project-building tutorials.
Download

Sponsor

Route Planner and Route Optimizer

Textarea


The multiline textarea and its variations

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

Example

HTML

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

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

Example

HTML

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

Colors #

The textarea element is available in several colors:

Example

HTML

<textarea
  class="textarea is-link"
  placeholder="Link textarea"
></textarea>

Example

HTML

<textarea
  class="textarea is-primary"
  placeholder="Primary textarea"
></textarea>

Example

HTML

<textarea
  class="textarea is-info"
  placeholder="Info textarea"
></textarea>

Example

HTML

<textarea
  class="textarea is-success"
  placeholder="Success textarea"
></textarea>

Example

HTML

<textarea
  class="textarea is-warning"
  placeholder="Warning textarea"
></textarea>

Example

HTML

<textarea
  class="textarea is-danger"
  placeholder="Danger textarea"
></textarea>

Sizes #

The textarea element comes in 4 different sizes:

Example

HTML

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

Example

HTML

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

Hover

Example

HTML

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

Focus

Example

HTML

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

Loading

Example

HTML

<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

Example

HTML

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

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.

Example

HTML

<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:

Example

HTML

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

Sass and CSS variables #

Sass Variable
CSS Variable
Value
$textarea-padding
var(--bulma-textarea-padding)
var(--bulma-control-padding-horizontal)
$textarea-max-height
var(--bulma-textarea-max-height)
40em
$textarea-min-height
var(--bulma-textarea-min-height)
8em

How to support Bulma

#native_company# #native_desc#
#native_cta#

Primary

Hue

Saturation

Lightness

Link

Hue

Saturation

Lightness

Info

Hue

Saturation

Lightness

Success

Hue

Saturation

Lightness

Warning

Hue

Saturation

Lightness

Danger

Hue

Saturation

Lightness

Get started for Free
Get started for Free