Open In App

Bulma Input States

Improve
Improve
Like Article
Like
Save
Share
Report

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.

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

Bulma Input States Classes:

  • is-hovered: It is used to create hovered input field. This class is used with input class.
  • is-focused: It is used to create focused input field. This class is used with input class.
  • is-loading: It is used to create loading input field. This class is used with control class container.
  • is-static: It is used to remove the background, border, shadow, and horizontal padding, while maintaining the vertical spacing so you can easily align the input in any context, like a horizontal form.

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

Syntax:

<input class="input input States Class">

Disabled State: We will use HTML disabled attribute to disable the input field.

Readonly and static inputs: We will use HTML readonly attribute to make the input field non-editable.

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Bulma Input States</title>
    <link rel='stylesheet' href=
</head>
  
<body class="has-text-centered">
    <h1 class="is-size-1 has-text-success">
        GeeksforGeeks
    </h1>
    <p class="is-size-3">Bulma Input States</p>
  
  
    <div class="container">
        <div class="control">
            <input class="input" type="text" 
                placeholder="Normal input field">
            <br><br>
  
            <input class="input is-hovered" type="text" 
                placeholder="Hovered input field">
            <br><br>
  
            <input class="input is-focused" type="text" 
                placeholder="Focused input field">
            <br><br>
  
            <input class="input" type="text" 
                placeholder="Disabled input field" disabled>
            <br><br>
  
            <input class="input is-static" type="text" 
                value="Static input field" readonly>
            <br><br>
        </div>
  
        <div class="control is-loading">
            <input class="input" type="text" 
                placeholder="Loading input field">
        </div>
    </div>
</body>
  
</html>


Output:

Bulma Input States

Bulma Input States

Reference: https://bulma.io/documentation/form/input/#states



Last Updated : 24 Jan, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads