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

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