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:
You are viewing the deprecated 0.9.4 version of the website. Click here to view the latest version
Input
The text input and its variations
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:
<input class="input" type="text" placeholder="Text input">
Example
HTML
<input class="input is-primary" type="text" placeholder="Primary input">
Example
HTML
<input class="input is-link" type="text" placeholder="Link input">
Example
HTML
<input class="input is-info" type="text" placeholder="Info input">
Example
HTML
<input class="input is-success" type="text" placeholder="Success input">
Example
HTML
<input class="input is-warning" type="text" placeholder="Warning input">
Example
HTML
<input class="input is-danger" type="text" placeholder="Danger input">
Example
HTML
<input class="input is-small" type="text" placeholder="Small input">
Example
HTML
<input class="input is-normal" type="text" placeholder="Normal input">
Example
HTML
<input class="input is-medium" type="text" placeholder="Medium input">
Example
HTML
<input class="input is-large" type="text" placeholder="Large input">
<input class="input is-rounded" type="text" placeholder="Rounded input">
<div class="control">
<input class="input" type="text" placeholder="Normal input">
</div>
<div class="control">
<input class="input is-hovered" type="text" placeholder="Hovered input">
</div>
<div class="control">
<input class="input is-focused" type="text" placeholder="Focused input">
</div>
<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>
<div class="control">
<input class="input" type="text" placeholder="Disabled input" disabled>
</div>
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>
You can append one of 2 modifiers on a control:
has-icons-left
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>
If the control contains an icon, Bulma will make sure the icon remains centered, no matter the size of the input or of the icon.
<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>
$input-color
$grey-darker
hsl(0, 0%, 21%)
$input-background-color
$white
hsl(0, 0%, 100%)
$input-border-color
$grey-lighter
hsl(0, 0%, 86%)
$input-shadow
inset 0 1px 2px rgba($black, 0.1)
$input-hover-color
$grey-darker
hsl(0, 0%, 21%)
$input-hover-border-color
$grey-light
hsl(0, 0%, 71%)
$input-focus-color
$grey-darker
hsl(0, 0%, 21%)
$input-focus-border-color
$link
hsl(217, 71%, 53%)
$input-focus-box-shadow-size
0 0 0 0.125em
$input-focus-box-shadow-color
rgba($link, 0.25)
$input-disabled-color
$text-light
hsl(0, 0%, 48%)
$input-disabled-background-color
$background
hsl(0, 0%, 96%)
$input-disabled-border-color
$background
hsl(0, 0%, 96%)
$input-arrow
$link
hsl(217, 71%, 53%)
$input-icon-color
$grey-lighter
hsl(0, 0%, 86%)
$input-icon-active-color
$grey
hsl(0, 0%, 48%)
$input-radius
$radius
4px
This page is open source.
Noticed a typo? Or something unclear?
Improve this page on GitHub