Input Number

Component preview opent in nieuw tabblad

There are no notes for this item.

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

    <label for="default" class="control-label">
        Default
    </label>

    <button type="button" class="btn btn-link"><span class="sr-only">Aantal verlagen</span>
        <dso-icon icon="minus-square"></dso-icon>
    </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>
        <dso-icon icon="plus-square"></dso-icon>
    </button>

</div>
<!-- Input Number Inactive -->
<div class="dso-input-number">

    <label for="inactive" class="control-label">
        Inactive input number
    </label>

    <button type="button" disabled class="btn btn-link"><span class="sr-only">Aantal verlagen (disabled)</span>
        <dso-icon icon="minus-square"></dso-icon>
    </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>
        <dso-icon icon="plus-square"></dso-icon>
    </button>

</div>
<!-- Input Number Minimum Limit -->
<div class="dso-input-number">

    <label for="minimum-limit" class="control-label">
        Input number with minimum limit
    </label>

    <button type="button" disabled class="btn btn-link"><span class="sr-only">Aantal verlagen (disabled)</span>
        <dso-icon icon="minus-square"></dso-icon>
    </button>

    <input type="number" id="minimum-limit" readonly tabindex="-1" min="0" class="dso-input-step-counter" value="0">
    <button type="button" class="btn btn-link"><span class="sr-only">Aantal verhogen</span>
        <dso-icon icon="plus-square"></dso-icon>
    </button>

</div>
<!-- Input Number Maximum Limit -->
<div class="dso-input-number">

    <label for="maximum-limit" class="control-label">
        Input number with maximum limit
    </label>

    <button type="button" class="btn btn-link"><span class="sr-only">Aantal verlagen</span>
        <dso-icon icon="minus-square"></dso-icon>
    </button>

    <input type="number" id="maximum-limit" readonly tabindex="-1" max="99" class="dso-input-step-counter" value="5">
    <button type="button" disabled class="btn btn-link"><span class="sr-only">Aantal verhogen (disabled)</span>
        <dso-icon icon="plus-square"></dso-icon>
    </button>

</div>
<!-- No Label -->
<div class="dso-input-number">

    <button type="button" class="btn btn-link"><span class="sr-only">Aantal verlagen</span>
        <dso-icon icon="minus-square"></dso-icon>
    </button>

    <input type="number" id="no-label" readonly tabindex="-1" class="dso-input-step-counter" value="99">
    <button type="button" class="btn btn-link"><span class="sr-only">Aantal verhogen</span>
        <dso-icon icon="plus-square"></dso-icon>
    </button>

</div>
<div class="dso-input-number">
  {% if label %}
    <label for="{{ id }}" class="control-label">
      {{ label }}
    </label>
  {% endif %} 
  {% render '@button', {type: 'button', modifier: 'link', label: minusButtonLabel, icon: 'minus-square', iconOnly: 'true', disabled: minusButtonInactive} %}
  <input type="number" 
          id="{{ id }}" 
          readonly
          tabindex="-1"
          {% if min %} min="{{ min }}"{% endif %}
          {% if max %} max="{{ max }}"{% endif %}
          class="dso-input-step-counter" 
          value="{{ count }}">
  {% render '@button', {type: 'button', modifier: 'link', label: plusButtonLabel, icon: 'plus-square', iconOnly: 'true', disabled: plusButtonInactive} %}
</div>
/* Default */
__title: default
label: Default
id: default
count: 99
minusButtonLabel: Aantal verlagen
plusButtonLabel: Aantal verhogen
/* Input Number Inactive */
__title: Inactive
label: Inactive input number
id: inactive
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
count: 0
minusButtonLabel: Aantal verlagen (disabled)
plusButtonLabel: Aantal verhogen
min: '0'
minusButtonInactive: true
/* Input Number Maximum Limit */
__title: Maximum limit (optional)
label: Input number with maximum limit
id: maximum-limit
count: 5
minusButtonLabel: Aantal verlagen
plusButtonLabel: Aantal verhogen (disabled)
max: '99'
plusButtonInactive: true
/* No Label */
__title: no label
label: null
id: no-label
count: 99
minusButtonLabel: Aantal verlagen
plusButtonLabel: Aantal verhogen