component

Input

A text input and its variations. You can use the input CSS class on <input> elements.

Basic input

  <input class="input is-width-mobile" type="text" placeholder="Text input">

Sizes

Two different sizes are available with the is-small and is-large modifiers.

  <div class="is-width-mobile">
    <div class="field">
        <div class="control is-small">
          <input class="input" type="text" placeholder="Small input">
        </div>
      </div>
      <div class="field">
        <div class="control">
          <input class="input" type="text" placeholder="Default input">
        </div>
      </div>
      <div class="field">
        <div class="control is-large">
          <input class="input" type="text" placeholder="Large input">
        </div>
      </div>
  </div>

With icons

You can set icons as input's sibiling elements by using the prepend-icon and append-icon classes. By doing this you have to indicate to the control parent class that an icon has been set by using the has-icon-left, has-icon-right or has-icons respectively.

Click on the eye to see your password...

    <form action="#" class="form is-width-mobile">
      <div class="field">
        <div class="control has-icon-left is-large">
          <div class="prepend-icon">
            <i class="fa-regular fa-envelope"></i>
          </div>
          <input class="input" type="email" placeholder="Email">
        </div>
      </div>
      <div class="field">
        <div class="control has-icons is-large">
          <div class="prepend-icon">
            <i class="fa-regular fa-lock"></i>
          </div>
          <input class="input" type="password" placeholder="Password">
          <div class="append-icon is-interactive">
            <i class="fa-regular fa-eye"></i>
          </div>
        </div>
      </div>
      <div class="field">
        <div class="control">
          <button class="button is-primary">
            Log in
          </button>
        </div>
      </div>
      <script>
        const target = document.querySelector('.form > :nth-child(2) input')
        const trigger = target.parentElement.lastElementChild
        let inputType = target.type
        const toggleInputType = () => {
          inputType = inputType === 'password' ? 'text' : 'password'
          target.type = inputType
        }

        trigger.onclick = toggleInputType
      </script>
    </form>