Bulma - Input

Description

Bulma provides input field for entering user data along with different types of variations. The input field supports 3 types of modifiers −

Color
Size
State

Colors

The below example describes usage of color modifiers such as is-primary, is-info, is-success, is-warning, is-danger in the input 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">
               Input Field Variations
            </span>
            <br>
            <br>
            
            <span class = "is-size-5">
               Primary Input
            </span>
            <div class = "field">
               <div class = "control">
                  <input class = "input is-primary" type = "text" placeholder = "Enter your input">
               </div>
            </div>
            <br>
            
            <span class = "is-size-5">
               Info Input
            </span>
            <div class = "field">
               <div class = "control">
                  <input class = "input is-info" type = "text" placeholder = "Enter your input">
               </div>
            </div>
            <br>

            <span class = "is-size-5">
               Success Input
            </span>
            <div class = "field">
               <div class = "control">
                  <input class = "input is-success" type = "text" placeholder = "Enter your input">
               </div>
            </div>
            <br>
            
            <span class = "is-size-5">
               Warning Input
            </span>
            <div class = "field">
               <div class = "control">
                  <input class = "input is-warning" type = "text" placeholder = "Enter your input">
               </div>
            </div>
            <br>
            
            <span class = "is-size-5">
               Danger Input
            </span>
            <div class = "field">
               <div class = "control">
                  <input class = "input is-danger" type = "text" placeholder = "Enter your input">
               </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 an input 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">
               Input Field Sizes
            </span>
            <br>
            <br>
            
            <span class = "is-size-5">
               Small Input
            </span>
            <div class = "field">
               <div class = "control">
                  <input class = "input is-small" type = "text" placeholder = "Enter your input">
               </div>
            </div>
            <br>
            
            <span class = "is-size-5">
               Normal Input
            </span>
            <div class = "field">
               <div class = "control">
                  <input class = "input" type = "text" placeholder = "Enter your input">
               </div>
            </div>
            <br>
            
            <span class = "is-size-5">
               Medium Input
            </span>
            <div class = "field">
               <div class = "control">
                  <input class = "input is-medium" type = "text" placeholder = "Enter your input">
               </div>
            </div>
            <br>
            
            <span class = "is-size-5">
               Large Input
            </span>
            <div class = "field">
               <div class = "control">
                  <input class = "input is-large" type = "text" placeholder = "Enter your input">
               </div>
            </div>
            
         </div>
      </section>
      
   </body>
</html>

It displays the below output −

States

The input field can be displayed in the different types of states by using classes such as is-hovered, is-focused, is-loading, is-rounded 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">
               Input Field States
            </span>
            <br>
            <br>
            
            <span class = "is-size-5">
               Normal Input
            </span>
            <div class = "field">
               <div class = "control">
                  <input class = "input" type = "text" placeholder = "Enter your input">
               </div>
            </div>
            <br>
            
            <span class = "is-size-5">
               Hover Input
            </span>
            <div class = "field">
               <div class = "control">
                  <input class = "input is-hovered" type = "text" placeholder = "Enter your input">
               </div>
            </div>
            <br>
            
            <span class = "is-size-5">
               Focus Input
            </span>
            <div class = "field">
               <div class = "control">
                  <input class = "input is-focused" type = "text" placeholder = "Enter your input">
               </div>
            </div>
            <br>
            
            <span class = "is-size-5">
               Loading Input
            </span>
            <div class = "control is-loading">
               <input class = "input" type = "text" placeholder = "Enter your input">
            </div>
            <br>
            
            <span class = "is-size-5">
               Disabled Input
            </span>
            <div class = "control">
               <input class = "input" type = "text" placeholder = "Enter your input" disabled>
            </div>
            <br>
            
            <span class = "is-size-5">
               Rounded Input
            </span>
            <div class = "control">
               <input class = "input is-rounded" type = "text" placeholder = "Enter your input">
            </div>
            
         </div>
      </section>
      
   </body>
</html>

It displays the below output −

bulma_form.htm