End Addon
Inputs can have addons if you need to shoow contextual
information. You can attach an addon at the end of a
field group. See markup for more details about
usage.
<div class="field has-addons">
<div class="control is-expanded">
<input class="input" type="text" placeholder="Gmail address">
</div>
<div class="control">
<a class="button is-static">
@gmail.com
</a>
</div>
</div>
Start Addon
Inputs can have addons if you need to shoow contextual
information. You can attach an addon at the beginning of a
field group. See markup for more details about
usage.
<div class="field has-addons">
<div class="control">
<a class="button is-static">
+1
</a>
</div>
<div class="control is-expanded">
<input class="input" type="text" placeholder="Your phone number">
</div>
</div>
Addon Colors
Since input addons are button elements, usual modifier classes
apply to them. You can use the is-primary,
is-success, is-info,
is-warning, is-danger.
<div class="field has-addons">
<div class="control is-expanded">
<input class="input" type="text" placeholder="Find a repository">
</div>
<div class="control">
<a class="button is-primary">
Search
</a>
</div>
</div>
Rounded Addons
Inputs and their addons can have rounded edges as well. simply
add the is-rounded class to the
input and the button element to
apply those styles. See markup for more details.
<div class="field has-addons">
<div class="control is-expanded">
<input class="input is-rounded" type="text" placeholder="Find a repository">
</div>
<div class="control">
<a class="button is-primary is-rounded">
Search
</a>
</div>
</div>
Bi Directional
Inputs can have addons on both sides. You can even attach a
select element to your form control group. Please
refer to the code example for more details about usage.
<div class="field has-addons">
<p class="control">
<span class="select">
<select>
<option>$</option>
<option>£</option>
<option>€</option>
</select>
</span>
</p>
<p class="control is-expanded">
<input class="input" type="text" placeholder="Amount of money">
</p>
<p class="control">
<a class="button is-success">
Send Payment
</a>
</p>
</div>