Bulma Form Addons

In this article, we'll be seeing Bulma form addons. Bulma Form provides the addons controls which can be used together with the field container. Bulma only provides 3 addons to be added i.e, inputs, buttons, and dropdown with the field container of form. Below are the classes used for attaching form addons.

Bulma Form addons class:

• has-addons: This class is used for adding attachment controls or addons in a form field.
• is-static: This class is used for making a button static in nature.
• is-expanded: This class is used for filling an input field in full width in a form field.
• is-fullwidth: This class is used for filling a dropdown field in full width in a form field.
• has-addons-centered: This class is used to align the addons at the center.
• has-addons-right: This class is used to align the addons at right.

Syntax:

Simple addons

<div class="field has-addons">
 <div class="control">
 <input class="input" type="text" 
 placeholder="Enter your details">
 </div>
 <div class="control">
 <a class="button is-primary">

 Search
 </a>
 </div>
</div>

Full width input field or dropdown

<div class="field has-addons">
 <div class="control">
 ....
 </div>
 <div class="control is-expanded">
 <input class="input " type="text">
 </div>
</div>

Full width dropdown

<div class="field has-addons">
 <div class="control">
 ....
 </div>
 <div class="control is-expanded">
 <div class="select is-fullwidth">
 <select>
 <option>java</option>
 ....
 </select>
 </div>
 </div>
</div>

Example: Below example demonstrates all addons classes.

Output:

Reference: https://bulma.io/documentation/form/general/#form-addons