This website requires JavaScript to deliver the best possible experience.

Input Group

Name
Name
<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
Name
<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
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

Roundedadds rounded courners to inputGroup and it's childs.is-rounded
Disabledindicates that the input-group is disabled.is-disabled

This website uses cookies to ensure you get the best experience on our website.