Bulma - Textarea

Description

Bulma textarea is used when you need multiple lines of input. As discussed in the previous chapter, textarea also uses same modifiers. Let's create simple examples for each modifers to understand them easily.

Colors

The below example describes usage of color modifiers such as is-primary, is-info, is-success, is-warning, is-danger in the textarea field −

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Forms Example</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
      <script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
   </head>
   <body>
      <section class = "section">
         <div class = "container">
            <span class = "title">
               Textarea Field Colors
            </span>
            <br>
            <br>
            
            <span class = "is-size-5">
               Primary Textarea 
            </span>
            <div class = "field">
               <div class = "control">
                    <textarea class = "textarea is-primary" type = "text" placeholder = "Enter your input"></textarea>
               </div>
            </div>
            <br>
            
            <span class = "is-size-5">
               Info Textarea
            </span>
            <div class = "field">
               <div class = "control">
                  <textarea class = "textarea is-info" type = "text" placeholder = "Enter your input"></textarea>
               </div>
            </div>
            <br>
            
            <span class = "is-size-5">
               Success Textarea
            </span>
            <div class = "field">
               <div class = "control">
                  <textarea class = "textarea is-success" type = "text" placeholder = "Enter your input"></textarea>
               </div>
            </div>
            <br>
            
            <span class = "is-size-5">
               Warning Textarea
            </span>
            <div class = "field">
               <div class = "control">
                  <textarea class = "textarea is-warning" type = "text" placeholder = "Enter your input"></textarea>
               </div>
            </div>
            <br>
            
            <span class = "is-size-5">
               Danger Textarea
            </span>
            <div class = "field">
               <div class = "control">
                  <textarea class = "textarea is-danger" type = "text" placeholder = "Enter your input"></textarea>
               </div>
            </div>
            
         </div>
      </section>
      
   </body>
</html>

It displays the below output −

Sizes

The below example describes different types of sizes such as is-small, is-medium and is-large classes of textarea field −

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Forms Example</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
      <script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
   </head>
   <body>
      <section class = "section">
         <div class = "container">
            <span class = "title">
               Textarea Field Sizes
            </span>
            <br>
            <br>
            
            <span class = "is-size-5">
               Small Textarea
            </span>
            <div class = "field">
               <div class = "control">
                  <textarea class = "textarea is-small" type = "text" placeholder = "Enter your input"></textarea>
               </div>
            </div>
            <br>
            
            <span class = "is-size-5">
               Normal Textarea
            </span>
            <div class = "field">
               <div class = "control">
                  <textarea class = "textarea" type = "text" placeholder = "Enter your input"></textarea>
               </div>
            </div>
            <br>
            
            <span class = "is-size-5">
               Medium Textarea
            </span>
            <div class = "field">
               <div class = "control">
                  <textarea class = "textarea is-medium" type = "text" placeholder = "Enter your input"></textarea>
               </div>
            </div>
            <br>
            
            <span class = "is-size-5">
               Large Textarea
            </span>
            <div class = "field">
               <div class = "control">
                  <textarea class = "textarea is-large" type = "text" placeholder = "Enter your input"></textarea>
               </div>
            </div>
            
         </div>
      </section>
      
   </body>
</html>

It displays the below output −

States

The textarea can be displayed in the different types of states by using classes such as is-hovered, is-focused, is-loading as described in the below example −

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Forms Example</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
      <script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
   </head>
   
   <body>
      <section class = "section">
         <div class = "container">
            <span class = "title">
               Textarea States
            </span>
            <br>
            <br>
            
            <span class = "is-size-5">
               Normal Textarea
            </span>
            <div class = "field">
               <div class = "control">
                  <textarea class = "textarea" type = "text" placeholder = "Normal textarea"></textarea>
               </div>
            </div>
            <br>
            
            <span class = "is-size-5">
               Hover Textarea
            </span>
            <div class = "field">
               <div class = "control">
                  <textarea class = "textarea is-hovered" type = "text" placeholder = "Enter your input"></textarea>
               </div>
            </div>
            <br>
            
            <span class = "is-size-5">
               Focus Textarea
            </span>
            <div class = "field">
               <div class = "control">
                  <textarea class = "textarea is-focused" type = "text" placeholder = "Enter your input"></textarea>
               </div>
            </div>
            <br>
            
            <span class = "is-size-5">
               Loading Textarea
            </span>
            <div class = "control is-loading">
               <textarea class = "textarea" type = "text" placeholder = "Enter your input"></textarea>
            </div>
            <br>
            
            <span class = "is-size-5">
               Disabled Textarea
            </span>
            <div class = "control">
               <textarea class = "textarea" type = "text" placeholder = "Enter your input" disabled></textarea>
            </div>
         </div>
      </section>
      
   </body>
</html>

It displays the below output −

bulma_form.htm