The Bulma input
CSS class is meant for <input>
HTML elements. The following type attributes are supported:
type="text"
type="password"
type="email"
type="tel"
Several modifiers are supported which affect:
Colors
#
HTML
<input class= "input is-primary" type= "text" placeholder= "Primary input" >
HTML
<input class= "input is-link" type= "text" placeholder= "Link input" >
HTML
<input class= "input is-info" type= "text" placeholder= "Info input" >
HTML
<input class= "input is-success" type= "text" placeholder= "Success input" >
HTML
<input class= "input is-warning" type= "text" placeholder= "Warning input" >
HTML
<input class= "input is-danger" type= "text" placeholder= "Danger input" >
Sizes
#
HTML
<input class= "input is-small" type= "text" placeholder= "Small input" >
HTML
<input class= "input is-normal" type= "text" placeholder= "Normal input" >
HTML
<input class= "input is-medium" type= "text" placeholder= "Medium input" >
HTML
<input class= "input is-large" type= "text" placeholder= "Large input" >
Styles
#
States
#
Normal
<div class= "control" >
<input class= "input" type= "text" placeholder= "Normal input" >
</div>
Hover
<div class= "control" >
<input class= "input is-hovered" type= "text" placeholder= "Hovered input" >
</div>
Focus
<div class= "control" >
<input class= "input is-focused" type= "text" placeholder= "Focused input" >
</div>
Loading
<div class= "control is-loading" >
<input class= "input" type= "text" placeholder= "Loading input" >
</div>
You can resize the loading spinner by appending is-small
, is-medium
or is-large
to the control
container.
<div class= "field" >
<div class= "control is-small is-loading" >
<input class= "input is-small" type= "text" placeholder= "Small loading input" >
</div>
</div>
<div class= "field" >
<div class= "control is-loading" >
<input class= "input" type= "text" placeholder= "Normal loading input" >
</div>
</div>
<div class= "field" >
<div class= "control is-medium is-loading" >
<input class= "input is-medium" type= "text" placeholder= "Medium loading input" >
</div>
</div>
<div class= "field" >
<div class= "control is-large is-loading" >
<input class= "input is-large" type= "text" placeholder= "Large loading input" >
</div>
</div>
Disabled
<div class= "control" >
<input class= "input" type= "text" placeholder= "Disabled input" disabled >
</div>
Readonly and static inputs
If you use the readonly
HTML attribute, the input will look similar to a normal one, but is not editable and has no shadow.
<div class= "control" >
<input class= "input" type= "text" value= "This text is readonly" readonly >
</div>
If you also append the is-static
modifier, it removes 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.
<div class= "field is-horizontal" >
<div class= "field-label is-normal" >
<label class= "label" > From</label>
</div>
<div class= "field-body" >
<div class= "field" >
<p class= "control" >
<input class= "input is-static" type= "email" value= "[email protected] " readonly >
</p>
</div>
</div>
</div>
<div class= "field is-horizontal" >
<div class= "field-label is-normal" >
<label class= "label" > To</label>
</div>
<div class= "field-body" >
<div class= "field" >
<p class= "control" >
<input class= "input" type= "email" placeholder= "Recipient email" >
</p>
</div>
</div>
</div>
With Font Awesome icons
#
You can append one of 2 modifiers on a control:
has-icons-left
and/or has-icons-right
You also need to add a modifier on the icon :
icon is-left
if has-icons-left
is used
icon is-right
if has-icons-right
is used
The size of the input will define the size of the icon container.
<div class= "field" >
<p class= "control has-icons-left has-icons-right" >
<input class= "input" type= "email" placeholder= "Email" >
<span class= "icon is-small is-left" >
<i class= "fas fa-envelope" ></i>
</span>
<span class= "icon is-small is-right" >
<i class= "fas fa-check" ></i>
</span>
</p>
</div>
<div class= "field" >
<p class= "control has-icons-left" >
<input class= "input" type= "password" placeholder= "Password" >
<span class= "icon is-small is-left" >
<i class= "fas fa-lock" ></i>
</span>
</p>
</div>
<div class= "control has-icons-left has-icons-right" >
<input class= "input is-small" type= "email" placeholder= "Email" >
<span class= "icon is-small is-left" >
<i class= "fas fa-envelope" ></i>
</span>
<span class= "icon is-small is-right" >
<i class= "fas fa-check" ></i>
</span>
</div>
<div class= "control has-icons-left has-icons-right" >
<input class= "input" type= "email" placeholder= "Email" >
<span class= "icon is-small is-left" >
<i class= "fas fa-envelope" ></i>
</span>
<span class= "icon is-small is-right" >
<i class= "fas fa-check" ></i>
</span>
</div>
<div class= "control has-icons-left has-icons-right" >
<input class= "input is-medium" type= "email" placeholder= "Email" >
<span class= "icon is-left" >
<i class= "fas fa-envelope" ></i>
</span>
<span class= "icon is-right" >
<i class= "fas fa-check" ></i>
</span>
</div>
<div class= "control has-icons-left has-icons-right" >
<input class= "input is-large" type= "email" placeholder= "Email" >
<span class= "icon is-medium is-left" >
<i class= "fas fa-envelope" ></i>
</span>
<span class= "icon is-medium is-right" >
<i class= "fas fa-check" ></i>
</span>
</div>
Variables
#
Name
Type
Value
Computed Value
Computed Type
size
inset 0 1 px 2 px rgba ( $ black , 0 . 1 )
$ input-hover-border-color
variable
color
$ input-focus-border-color
variable
color
$ input-focus-box-shadow-size
size
$ input-focus-box-shadow-color
color
$ input-disabled-background-color
variable
color
$ input-disabled-border-color
variable
color