You are viewing the deprecated 0.6.0 version of the website. Click here to view the latest version

Input

The text input and its variations

Colors Yes
Sizes Yes
Variables Yes

The following modifiers are supported:

The following type attributes are supported:

  • type="text"
  • type="password"
  • type="email"
  • type="tel"
<input class="input" type="text" placeholder="Text input">

Colors #

<div class="field">
  <div class="control">
    <input class="input is-primary" type="text" placeholder="Primary input">
  </div>
</div>
<div class="field">
  <div class="control">
    <input class="input is-info" type="text" placeholder="Info input">
  </div>
</div>
<div class="field">
  <div class="control">
    <input class="input is-success" type="text" placeholder="Success input">
  </div>
</div>
<div class="field">
  <div class="control">
    <input class="input is-warning" type="text" placeholder="Warning input">
  </div>
</div>
<div class="field">
  <div class="control">
    <input class="input is-danger" type="text" placeholder="Danger input">
  </div>
</div>

Sizes #

<div class="field">
  <div class="control">
    <input class="input is-small" type="text" placeholder="Small input">
  </div>
</div>
<div class="field">
  <div class="control">
    <input class="input" type="text" placeholder="Normal input">
  </div>
</div>
<div class="field">
  <div class="control">
    <input class="input is-medium" type="text" placeholder="Medium input">
  </div>
</div>
<div class="field">
  <div class="control">
    <input class="input is-large" type="text" placeholder="Large input">
  </div>
</div>

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

New! 0.5.3

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="fa fa-envelope"></i>
    </span>
    <span class="icon is-small is-right">
      <i class="fa 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="fa 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="fa fa-envelope"></i>
  </span>
  <span class="icon is-small is-right">
    <i class="fa 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="fa fa-envelope"></i>
  </span>
  <span class="icon is-small is-right">
    <i class="fa 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="fa fa-envelope"></i>
  </span>
  <span class="icon is-right">
    <i class="fa 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="fa fa-envelope"></i>
  </span>
  <span class="icon is-medium is-right">
    <i class="fa fa-check"></i>
  </span>
</div>

Variables #

You can use these variables to customize this element. Simply set one or multiple of these variables before importing Bulma. Learn how.

Name Default value
Name Default value
$input-color $grey-darker
$input-background-color $white
$input-border-color $grey-lighter
$input-shadow inset 0 1px 2px rgba($black, 0.1)
$input-hover-color $grey-darker
$input-hover-border-color $grey-light
$input-focus-color $grey-darker
$input-focus-border-color $link
$input-disabled-color $text-light
$input-disabled-background-color $background
$input-disabled-border-color $background
$input-arrow $link
$input-icon-color $grey-lighter
$input-icon-active-color $grey
$input-radius $radius

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

Bulma Partners

Check out their products!

Bulma Newsletter

Get notified when v1 is ready!