<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')
<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)
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 | add rounded corners to a input | .is-rounded |
Disabled | indicates that the input is disabled | .is-disabled |