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

Documentation

Everything you need to create a website with Bulma

# Input

## The text input and its variations

Colors Yes
Sizes Yes
Variables Yes

The following modifiers are supported:

- the color
- the size
- the state

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>

New! 0.4.3

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.

From

To

    <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="me@example.com" 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!