DSO Toolkit homepage

Group Input Number

There are no notes for this item.

<!-- Default -->
<div class="form-group dso-input dso-input-number">
    <div class="dso-label-container">
        <label for="default" class="control-label">
            Default
        </label>
    </div>
    <div class="dso-field-container">

        <div class="dso-input-number">

            <button type="button" class="btn btn-link"><span class="sr-only">Aantal verlagen</span><svg class="di di-minus-square">
                    <use href="../../dso-icons.svg#minus-square" />
                </svg></button>

            <input type="number" id="default" readonly tabindex="-1" class="dso-input-step-counter" value="99">
            <button type="button" class="btn btn-link"><span class="sr-only">Aantal verhogen</span><svg class="di di-plus-square">
                    <use href="../../dso-icons.svg#plus-square" />
                </svg></button>

        </div>
    </div>
</div>
<!-- Input Number Inactive -->
<div class="form-group dso-input dso-input-number">
    <div class="dso-label-container">
        <label for="inactive" class="control-label">
            Inactive input number
        </label>
    </div>
    <div class="dso-field-container">

        <div class="dso-input-number">

            <button type="button" disabled class="btn btn-link"><span class="sr-only">Aantal verlagen (disabled)</span><svg class="di di-minus-square">
                    <use href="../../dso-icons.svg#minus-square" />
                </svg></button>

            <input type="number" id="inactive" readonly tabindex="-1" class="dso-input-step-counter" value="99">
            <button type="button" disabled class="btn btn-link"><span class="sr-only">Aantal verhogen (disabled)</span><svg class="di di-plus-square">
                    <use href="../../dso-icons.svg#plus-square" />
                </svg></button>

        </div>
    </div>
</div>
<!-- Input Number Minimum Limit -->
<div class="form-group dso-input dso-input-number">
    <div class="dso-label-container">
        <label for="minimum-limit" class="control-label">
            Input number with minimum limit
        </label>
    </div>
    <div class="dso-field-container">

        <div class="dso-input-number">

            <button type="button" disabled class="btn btn-link"><span class="sr-only">Aantal verlagen (disabled)</span><svg class="di di-minus-square">
                    <use href="../../dso-icons.svg#minus-square" />
                </svg></button>

            <input type="number" id="minimum-limit" readonly tabindex="-1" class="dso-input-step-counter" value="0">
            <button type="button" class="btn btn-link"><span class="sr-only">Aantal verhogen</span><svg class="di di-plus-square">
                    <use href="../../dso-icons.svg#plus-square" />
                </svg></button>

        </div>
    </div>
</div>
<!-- Input Number Maximum Limit -->
<div class="form-group dso-input dso-input-number">
    <div class="dso-label-container">
        <label for="maximum-limit" class="control-label">
            Input number with maximum limit
        </label>
    </div>
    <div class="dso-field-container">

        <div class="dso-input-number">

            <button type="button" class="btn btn-link"><span class="sr-only">Aantal verlagen</span><svg class="di di-minus-square">
                    <use href="../../dso-icons.svg#minus-square" />
                </svg></button>

            <input type="number" id="maximum-limit" readonly tabindex="-1" class="dso-input-step-counter" value="99">
            <button type="button" disabled class="btn btn-link"><span class="sr-only">Aantal verhogen (disabled)</span><svg class="di di-plus-square">
                    <use href="../../dso-icons.svg#plus-square" />
                </svg></button>

        </div>
    </div>
</div>
{% set localId = generateLocalId(prefix, id) %}

<div {{ className('form-group dso-input', [type, 'dso-input-' + type], [inputIcon, 'has-feedback'], [state, 'dso-' + state], [required, 'dso-required']) }}>
  <div class="dso-label-container">
    <label for="{{ localId }}" class="control-label">
      {{ label }}
    </label>
  </div>
  <div class="dso-field-container">
    {% render '@input-number', { id: localId, count: count, minusButtonLabel: minusButtonLabel, minusButtonInactive: minusButtonInactive, plusButtonLabel: plusButtonLabel, plusButtonInactive: plusButtonInactive } %}
  </div>
</div>
/* Default */
__title: default
label: Default
id: default
type: number
count: 99
minusButtonLabel: Aantal verlagen
plusButtonLabel: Aantal verhogen
/* Input Number Inactive */
__title: Inactive
label: Inactive input number
id: inactive
type: number
count: 99
minusButtonLabel: Aantal verlagen (disabled)
plusButtonLabel: Aantal verhogen (disabled)
minusButtonInactive: true
plusButtonInactive: true
/* Input Number Minimum Limit */
__title: Minimum limit (optional)
label: Input number with minimum limit
id: minimum-limit
type: number
count: 0
minusButtonLabel: Aantal verlagen (disabled)
plusButtonLabel: Aantal verhogen
minusButtonInactive: true
/* Input Number Maximum Limit */
__title: Maximum limit (optional)
label: Input number with maximum limit
id: maximum-limit
type: number
count: 99
minusButtonLabel: Aantal verlagen
plusButtonLabel: Aantal verhogen (disabled)
plusButtonInactive: true