Input Group

<div class="inputGroup has-label is-black is-normal">
  <label class="inputGroup-label">Username:</label>
  <input placeholder="Input with label" type="text" class="input"/>
</div>

<div class="inputGroup has-itemAfter is-normal is-black">
  <input placeholder="Input with button" type="text" class="input"/>
  <button class="button">Submit</button>
</div>

<div class="inputGroup has-itemBefore is-normal is-black">
  <div class="input-tag">Name</div>
  <input placeholder="Input with tag" type="text" class="input"/>
</div>

<div class="inputGroup has-itemBefore has-itemAfter is-normal is-black">
  <div class="input-tag">Name</div>
  <input placeholder="Input with tag and button" type="text" class="input"/>
  <button class="button">ok</button>
</div>

.inputGroup.has-label.is-black.is-normal
  label.inputGroup-label Username:
  input.input(placeholder='Input with label', type='text')

.inputGroup.has-itemAfter.is-normal.is-black
  input.input(placeholder='Input with button', type='text')
  button.button Submit
.inputGroup.has-itemBefore.is-normal.is-black
  .input-tag Name
  input.input(placeholder='Input with tag', type='text')

.inputGroup.has-itemBefore.has-itemAfter.is-normal.is-black
  .input-tag Name
  input.input(placeholder='Input with tag and button', type='text')
  button.button ok

<div class="inputGroup has-itemAfter is-tiny is-black">
  <input placeholder="is-tiny" type="text" class="input"/>
  <button class="button">Submit</button>
</div>
<div class="inputGroup has-itemAfter is-small is-black">
  <input placeholder="is-small" type="text" class="input"/>
  <button class="button">Submit</button>
</div>
<div class="inputGroup has-itemAfter is-normal is-black">
  <input placeholder="is-normal" type="text" class="input"/>
  <button class="button">Submit</button>
</div>
<div class="inputGroup has-itemAfter is-large is-black">
  <input placeholder="is-large" type="text" class="input"/>
  <button class="button">Submit</button>
</div>
<div class="inputGroup has-itemAfter is-massive is-black">
  <input placeholder="is-massive" type="text" class="input"/>
  <button class="button">Submit</button>
</div>

.inputGroup.has-itemAfter.is-tiny.is-black
  input.input(placeholder='is-tiny', type='text')
  button.button Submit

.inputGroup.has-itemAfter.is-small.is-black
  input.input(placeholder='is-small', type='text')
  button.button Submit

.inputGroup.has-itemAfter.is-normal.is-black
  input.input(placeholder='is-normal', type='text')
  button.button Submit

.inputGroup.has-itemAfter.is-large.is-black
  input.input(placeholder='is-large', type='text')
  button.button Submit

.inputGroup.has-itemAfter.is-massive.is-black
  input.input(placeholder='is-massive', type='text')
  button.button Submit

<div class="inputGroup has-itemAfter is-normal is-primary">
  <input placeholder="is-primary" type="text" class="input"/>
  <button class="button">Submit</button>
</div>

<div class="inputGroup has-itemAfter is-normal is-secondary">
  <input placeholder="is-secondary" type="text" class="input"/>
  <button class="button">Submit</button>
</div>

<div class="inputGroup has-itemAfter is-normal is-info">
  <input placeholder="is-info" type="text" class="input"/>
  <button class="button">Submit</button>
</div>

<div class="inputGroup has-itemAfter is-normal is-success">
  <input placeholder="is-success" type="text" class="input"/>
  <button class="button">Submit</button>
</div>

<div class="inputGroup has-itemAfter is-normal is-warning">
  <input placeholder="is-warning" type="text" class="input"/>
  <button class="button">Submit</button>
</div>

<div class="inputGroup has-itemAfter is-normal is-danger">
  <input placeholder="is-danger" type="text" class="input"/>
  <button class="button">Submit</button>
</div>

<div class="inputGroup has-itemAfter is-normal is-black">
  <input placeholder="is-black" type="text" class="input"/>
  <button class="button">Submit</button>
</div>

<div class="inputGroup has-itemAfter is-normal is-white">
  <input placeholder="is-white" type="text" class="input"/>
  <button class="button">Submit</button>
</div>

.inputGroup.has-itemAfter.is-normal.is-secondary
  input.input(placeholder='is-secondary', type='text')
  button.button Submit

.inputGroup.has-itemAfter.is-normal.is-info
  input.input(placeholder='is-info', type='text')
  button.button Submit

.inputGroup.has-itemAfter.is-normal.is-success
  input.input(placeholder='is-success', type='text')
  button.button Submit

.inputGroup.has-itemAfter.is-normal.is-warning
  input.input(placeholder='is-warning', type='text')
  button.button Submit

.inputGroup.has-itemAfter.is-normal.is-danger
  input.input(placeholder='is-danger', type='text')
  button.button Submit

.inputGroup.has-itemAfter.is-normal.is-black
  input.input(placeholder='is-black', type='text')
  button.button Submit

.inputGroup.has-itemAfter.is-normal.is-white
  input.input(placeholder='is-white', type='text')
  button.button Submit

<div class="inputGroup has-itemAfter is-normal is-primary is-rounded">
  <input placeholder="is-primary" type="text" class="input"/>
  <button class="button">Submit</button>
</div>

<div class="inputGroup has-itemAfter is-normal is-secondary is-rounded">
  <input placeholder="is-secondary" type="text" class="input"/>
  <button class="button">Submit</button>
</div>

<div class="inputGroup has-itemAfter is-normal is-info is-rounded">
  <input placeholder="is-info" type="text" class="input"/>
  <button class="button">Submit</button>
</div>

<div class="inputGroup has-itemAfter is-normal is-success is-rounded">
  <input placeholder="is-success" type="text" class="input"/>
  <button class="button">Submit</button>
</div>

<div class="inputGroup has-itemAfter is-normal is-warning is-rounded">
  <input placeholder="is-warning" type="text" class="input"/>
  <button class="button">Submit</button>
</div>

<div class="inputGroup has-itemAfter is-normal is-danger is-rounded">
  <input placeholder="is-danger" type="text" class="input"/>
  <button class="button">Submit</button>
</div>

<div class="inputGroup has-itemAfter is-normal is-black is-rounded">
  <input placeholder="is-black" type="text" class="input"/>
  <button class="button">Submit</button>
</div>

<div class="inputGroup has-itemAfter is-normal is-white is-rounded">
  <input placeholder="is-white" type="text" class="input"/>
  <button class="button">Submit</button>
</div>

.inputGroup.has-itemAfter.is-normal.is-secondary.is-rounded
  input.input(placeholder='is-secondary', type='text')
  button.button Submit

.inputGroup.has-itemAfter.is-normal.is-info.is-rounded
  input.input(placeholder='is-info', type='text')
  button.button Submit

.inputGroup.has-itemAfter.is-normal.is-success.is-rounded
  input.input(placeholder='is-success', type='text')
  button.button Submit

.inputGroup.has-itemAfter.is-normal.is-warning.is-rounded
  input.input(placeholder='is-warning', type='text')
  button.button Submit

.inputGroup.has-itemAfter.is-normal.is-danger.is-rounded
  input.input(placeholder='is-danger', type='text')
  button.button Submit

.inputGroup.has-itemAfter.is-normal.is-black.is-rounded
  input.input(placeholder='is-black', type='text')
  button.button Submit

.inputGroup.has-itemAfter.is-normal.is-white.is-rounded
  input.input(placeholder='is-white', type='text')
  button.button Submit

<div class="inputGroup has-itemBefore has-itemAfter is-normal is-black is-disabled">
  <div class="input-tag">Name</div>
  <input value="is-disabled" type="text" class="input"/>
  <button class="button">ok</button>
</div>

.inputGroup.has-itemBefore.has-itemAfter.is-normal.is-black.is-disabled
  .input-tag Name
  input.input(value='is-disabled', type='text')
  button.button ok

Modifier	Description	Class
Color	indicates the element state	.is-black .is-white .is-primary .is-secondary .is-info .is-success .is-warning .is-danger
Size	changes the element size based on font-size	.is-tiny .is-small .is-normal .is-large .is-massive
Rounded	adds rounded courners to inputGroup and it's childs	.is-rounded
Disabled	indicates that the input-group is disabled	.is-disabled