### Select Language

### Activity

- Team
- Projects
- Schedule

Joshua S. Las Vegas, NV
Melany W. San Jose, CA
Esteban C. Miami, FL
Tara S. New York, NY
The slicer project getslicer.io
31%
5 / 24
Metamovies reworked metamovies.co
84%
28 / 31
Fast Pizza redesign fastpizza.com
60%
25 / 39

Call Danny at Colby's

Today - 11:30am

Meeting with Alice

Today - 01:00pm

Answer Annie's message

Today - 01:45pm

Send new campaign

Today - 02:30pm

Project review

Today - 03:30pm

Call Trisha Jackson

Today - 05:00pm

Write proposal for Don

Today - 06:00pm

#### Recently viewed

Browser Support Blog post
Twitch API Blog post
Twitter Auth Blog post

#### Recent Members

Alice C. Software Engineer
Tara S. UI/UX Designer
Jimmy H. Project Manager

- Elements Hub
- Colors
- Helpers
- Buttons
- Blocks
- Content
- Tags & Badges
- Icons
  - Line Icons Light
  - Line Icons Regular
  - Font Awesome 5
  - Feather Icons
- Cards
  - Basic Cards
  - Advanced Cards
  - Bulma Cards
- Table
- Tooltips
- Forms
  - Inputs
  - Input Addons
  - Textarea
  - Selects
  - Custom
  - File Input
- Toggles
  - Checkboxes
  - Radios
  - Switches

# Textarea

A standard Html5 text box to use in your applications. You can control the box text length with the `rows="*"` attribute. Like other form controls, textarea natively supports dark mode.

          <div class="field">
              <div class="control">
                  <textarea class="textarea" rows="4" placeholder="A longer message..."></textarea>
              </div>
          </div>

### Focus Colors

Like other form controls, textareas can have different border colors when focused. You simply have to add one of the following modifiers to the `textarea` element: `is-primary-focus`, `is-success-focus`, `is-info-focus`, `is-warning-focus`, `is-danger-focus`.

          <div class="field">
              <div class="control">
                  <textarea class="textarea is-primary-focus" rows="2" placeholder="Primary..."></textarea>
              </div>
          </div>

          <div class="field">
              <div class="control">
                  <textarea class="textarea is-success-focus" rows="2" placeholder="Success..."></textarea>
              </div>
          </div>

          <div class="field">
              <div class="control">
                  <textarea class="textarea is-info-focus" rows="2" placeholder="Info..."></textarea>
              </div>
          </div>

          <div class="field">
              <div class="control">
                  <textarea class="textarea is-warning-focus" rows="2" placeholder="Warning..."></textarea>
              </div>
          </div>

          <div class="field">
              <div class="control">
                  <textarea class="textarea is-danger-focus" rows="2" placeholder="Danger..."></textarea>
              </div>
          </div>

### Loading State

A textarea can be shown in a loading state. For that, you need to wrap it inside a `control` element. Then, simply add the `is-loading` class to the wrapping `control` element. Please refer to the code example for more details about usage.

          <div class="field">
              <div class="control is-loading">
                  <textarea class="textarea" rows="4" placeholder="A longer message..."></textarea>
              </div>
          </div>

### Disabled State

A textarea can be shown in a disabled state. For that, you need to wrap it inside a `control` element. Simply add the `disabled` attribute to the target textarea element.

          <div class="field">
              <div class="control">
                  <textarea class="textarea" rows="4" placeholder="A longer message..." disabled></textarea>
              </div>
          </div>

### Textarea Addon

Textareas that are wrapped by a `control` and a `field` can have a single bottom addon. You can use it to display a toolbar or any type of user actions. Please refer to the code example for more details about usage.

JD
Post Comment

          <div class="field has-textarea-addon">
              <div class="control">
                  <textarea class="textarea" rows="5" placeholder="A longer message..."></textarea>
              </div>
              <div class="control is-textarea-addon">
                  <div class="start">
                      <div class="avatar-stack">
                          <div class="h-avatar is-small">
                              <img class="avatar" src="https://via.placeholder.com/150x150" alt="">
                          </div>
                          <div class="h-avatar is-small">
                              <span class="avatar is-fake is-info">
                                  <span>JD</span>
                              </span>
                          </div>
                          <div class="h-avatar is-small">
                              <img class="avatar" src="https://via.placeholder.com/150x150" alt="">
                          </div>
                      </div>
                  </div>
                  <div class="end">
                      <a class="button h-button is-primary is-raised">Post Comment</a>
                  </div>
              </div>
          </div>