You are viewing the deprecated 0.9.3 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">

Colors #

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">

Sizes #

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">

Styles # 

<input class="input is-rounded" type="text" placeholder="Rounded input">

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>

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>

Variables #

Name
Type
Value
Computed Value
Computed Type 
$input-color
variable
$grey-darker
hsl(0, 0%, 21%)
color
$input-background-color
variable
$white
hsl(0, 0%, 100%)
color
$input-border-color
variable
$grey-lighter
hsl(0, 0%, 86%)
color
$input-shadow
size
inset 0 1px 2px rgba($black, 0.1)
$input-hover-color
variable
$grey-darker
hsl(0, 0%, 21%)
color
$input-hover-border-color
variable
$grey-light
hsl(0, 0%, 71%)
color
$input-focus-color
variable
$grey-darker
hsl(0, 0%, 21%)
color
$input-focus-border-color
variable
$link
hsl(217, 71%,  53%)
color
$input-focus-box-shadow-size
size
0 0 0 0.125em
$input-focus-box-shadow-color
color
rgba($link, 0.25)
$input-disabled-color
variable
$text-light
hsl(0, 0%, 48%)
color
$input-disabled-background-color
variable
$background
hsl(0, 0%, 96%)
color
$input-disabled-border-color
variable
$background
hsl(0, 0%, 96%)
color
$input-arrow
variable
$link
hsl(217, 71%,  53%)
color
$input-icon-color
variable
$grey-lighter
hsl(0, 0%, 86%)
color
$input-icon-active-color
variable
$grey
hsl(0, 0%, 48%)
color
$input-radius
variable
$radius
4px
size

Made with Bulma This page is open source. Noticed a typo? Or something unclear?
Improve this page on GitHub

Support Bulma 😃

One-time donation

Visit our Sponsors

Stock APIs Inkoop - Website/App development company Pondr Idea Management Buy Instagram followers

Monthly donation

Become a sponsor
#native_company# #native_desc#
#native_cta#

Newsletter Features, releases, showcase… stay in the loop!