Bulma Textarea States

Last Updated : 20 Jan, 2022

Bulma is a free, open-source CSS framework based on Flexbox. It is component rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement its design.

The Bulma textarea form element is the multi-line version of the input element. We will use <textarea> element with textarea class to create textarea element in Bulma.

Bulma Textarea States are used to set the different states of Textarea fields. There are many different states available for Textarea fields that are – normal, hovered, focused, loading, disabled, readonly, and fixed size. You can set the textarea states using the classes provided by Bulma.

Bulma Textarea States Classes:

textarea: It is used to create normal/default textarea field.
is-hovered: It is used to create hovered textarea field. This class is used with textarea class.
is-focused: It is used to create focused textarea field. This class is used with textarea class.
is-loading: It is used to create loading textarea field. This class is used with control class container.
has-fixed-size: It is used to create a fixed size textarea field. This class is used with textarea class.

Note: We can resize the loading snipers by adding is-small, is-medium or is-large class with the control class container.

Syntax:

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

Disabled State: We will use HTML <textarea> disabled attribute to disable the textarea field.

Readonly: We will use HTML <textarea> readonly attribute to make the textarea field non-editable.

Example:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Bulma Textarea States</title> 
    <link rel='stylesheet'
          href= 
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> 
</head> 
  
<body class="has-text-centered"> 
    <h1 class="is-size-1 has-text-success"> 
        GeeksforGeeks 
    </h1> 
    <p class="is-size-3"> 
        Bulma Textarea States 
    </p> 
  
  
    <div class="container"> 
        <div class="control"> 
            <textarea class="textarea" 
                      placeholder="Normal textarea field"> 
            </textarea> 
            <br><br> 
  
            <textarea class="textarea is-hovered" 
                      placeholder="Hovered textarea field"> 
            </textarea> 
            <br><br> 
  
            <textarea class="textarea is-focused" 
                      placeholder="Focused textarea field"> 
            </textarea> 
            <br><br> 
  
            <textarea class="textarea" 
                      placeholder="Disabled textarea field" 
                      disabled></textarea> 
            <br><br> 
  
            <textarea class="textarea" 
                         placeholder="Readonly textarea field" 
                         readonly></textarea> 
            <br><br> 
  
            <textarea class="textarea has-fixed-size" 
                      placeholder="Fixed area textarea field"> 
            </textarea> 
            <br><br> 
        </div> 
  
        <div class="control is-loading"> 
            <textarea class="textarea" 
                      placeholder="Loading textarea field"> 
            </textarea> 
        </div> 
    </div> 
</body> 
  
</html>