Number

Creates a numeric input field with the option to increase or decrease the value step-by-step

Usage #

Set the buttons on the sides of the input field.

- +
<form>
    <div class="form-item">
        <div class="input-number" data-kube="number">
            <span class="is-down">-</span>
            <input type="number" min="1" max="9" step="1" value="1">
            <span class="is-up">+</span>
        </div>
    </div>
</form>

Set the buttons on top of each other.

+ -
<form>
    <div class="form-item">
        <div class="input-number" data-kube="number">
            <div class="input-number-input">
                <input type="number" min="1" max="9" step="1" value="1">
            </div>
            <div class="input-number-nav">
                <span class="is-up">+</span>
                <span class="is-down">-</span>
            </div>
        </div>
    </div>
</form>