Form

Leaf packs a few classes for form controls:

  • .input
  • .textarea
  • .select
  • .checkbox
  • .radio
  • .label
  • .help

These should be wrapped in a .field container.

If you are using multiple several controls in a form, use .field as a container for each to keep spacing consistent.

<div class="field">
    <label for="name">Name</label>
    <input type="text" class="input" id="name" placeholder="Name">
</div>
<div class="field">
    <label for="email">E-mail</label>
    <input type="email" class="input is-success" id="email" placeholder="E-mail">
</div>
<div class="field">
    <label for="select">Select</label>
    <div class="select">
        <select name="select" id="select">
            <option>Select dropdown</option>
            <option>With some options</option>
        </select>
    </div>
</div>

Variables

These generic variables affect all inputs

Name Type Value Computed value
$control-radius size $radius 3px
$control-border-width size 1px
$input-color color
rgb(68,68,68)
$input-bg-color color $white
rgb(255, 255, 255)
$input-border-color color
rgb(191, 191, 191)
$input-placeholder-color color $input-placeholder-color
$input-radius size $radius 3px
$input-hover-border-color color $grey
rgb(176, 176, 176)
$input-active-border-color color
rgb(191, 191, 191)
$input-disabled-color color
rgb(191, 191, 191)
$input-disabled-bg-color color $grey-lighter
rgb(242, 242, 242)
$input-disabled-border-color color
rgb(214, 214, 214)
$input-padding size .75em .5em
$input-large-padding size 1.125em .75em
$input-textarea-padding size 1em .5em
$input-arrow color
rgb(68, 68, 68)
$label-color color
rgb(95, 95, 95)
$help-color color
rgb(163, 163, 163)
$help-size size .75em
Input →