This website requires JavaScript to deliver the best possible experience.

Input

    <input placeholder="Text input" type="text" class="input"/>
    input.input(placeholder="Text input", type="text")
      <input placeholder="is-tiny" type="text" class="input is-tiny"/>
      <input placeholder="is-small" type="text" class="input is-small"/>
      <input placeholder="is-normal" type="text" class="input is-normal"/>
      <input placeholder="is-large" type="text" class="input is-large"/>
      <input placeholder="is-massive" type="text" class="input is-massive"/>
      input.input.is-tiny(placeholder='is-tiny', type='text')
      input.input.is-small(placeholder='is-small', type='text')
      input.input.is-normal(placeholder='is-normal', type='text')
      input.input.is-large(placeholder='is-large', type='text')
      input.input.is-massive(placeholder='is-massive', type='text')
        <input placeholder="is-primary" type="text" class="input is-primary"/>
        <input placeholder="is-secondary" type="text" class="input is-secondary"/>
        <input placeholder="is-info" type="text" class="input is-info"/>
        <input placeholder="is-success" type="text" class="input is-success"/>
        <input placeholder="is-warning" type="text" class="input is-warning"/>
        <input placeholder="is-danger" type="text" class="input is-danger"/>
        <input placeholder="is-black" type="text" class="input is-black"/>
        <input placeholder="is-white" type="text" class="input is-white"/>
        input.input.is-primary(placeholder='is-primary', type='text')
        input.input.is-secondary(placeholder='is-secondary', type='text')
        input.input.is-info(placeholder='is-info', type='text')
        input.input.is-success(placeholder='is-success', type='text')
        input.input.is-warning(placeholder='is-warning', type='text')
        input.input.is-danger(placeholder='is-danger', type='text')
        input.input.is-black(placeholder='is-black', type='text')
        input.input.is-white(placeholder='is-white', type='text')
          <input placeholder="is-rounded" type="text" class="input is-primary is-rounded"/>
          <input placeholder="is-rounded" type="text" class="input is-secondary is-rounded"/>
          <input placeholder="is-rounded" type="text" class="input is-info is-rounded"/>
          <input placeholder="is-rounded" type="text" class="input is-success is-rounded"/>
          <input placeholder="is-rounded" type="text" class="input is-warning is-rounded"/>
          <input placeholder="is-rounded" type="text" class="input is-danger is-rounded"/>
          <input placeholder="is-rounded" type="text" class="input is-black is-rounded"/>
          <input placeholder="is-rounded" type="text" class="input is-white is-rounded"/>
          input.input.is-primary.is-rounded(placeholder='is-rounded', type='text')
          input.input.is-secondary.is-rounded(placeholder='is-rounded', type='text')
          input.input.is-info.is-rounded(placeholder='is-rounded', type='text')
          input.input.is-success.is-rounded(placeholder='is-rounded', type='text')
          input.input.is-warning.is-rounded(placeholder='is-rounded', type='text')
          input.input.is-danger.is-rounded(placeholder='is-rounded', type='text')
          input.input.is-black.is-rounded(placeholder='is-rounded', type='text')
          input.input.is-white.is-rounded(placeholder='is-rounded', type='text')
            is-primaryis-secondaryis-infois-successis-warningis-dangeris-blackis-white
            <input placeholder="is-primary" type="text" class="input is-primary"/>
            <input placeholder="is-secondary" type="text" class="input is-secondary"/>
            <input placeholder="is-info" type="text" class="input is-info"/>
            <input placeholder="is-success" type="text" class="input is-success"/>
            <input placeholder="is-warning" type="text" class="input is-warning"/>
            <input placeholder="is-danger" type="text" class="input is-danger"/>
            <input placeholder="is-black" type="text" class="input is-black"/>
            <input placeholder="is-white" type="text" class="input is-white"/>
            input.input.is-primary(placeholder='is-primary', type='text')
            input.input.is-secondary(placeholder='is-secondary', type='text')
            input.input.is-info(placeholder='is-info', type='text')
            input.input.is-success(placeholder='is-success', type='text')
            input.input.is-warning(placeholder='is-warning', type='text')
            input.input.is-danger(placeholder='is-danger', type='text')
            input.input.is-black(placeholder='is-black', type='text')
            input.input.is-white(placeholder='is-white', type='text')
              <input value="is-disabled" type="text" disabled="disabled" class="input is-disabled"/>
              input.input.is-disabled(value="is-disabled", type="text", disabled)
              ModifierDescriptionClass
              Colorindicates the element state

              .is-black

              .is-white

              .is-primary

              .is-secondary

              .is-info

              .is-success

              .is-warning

              .is-danger

              Sizechanges the element size based on font-size

              .is-tiny

              .is-small

              .is-normal

              .is-large

              .is-massive

              Roundedadd rounded corners to a input.is-rounded
              Disabledindicates that the input is disabled.is-disabled