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

    <input type="number" id="no-label" readonly tabindex="-1" aria-label="Aantal" class="dso-input-step-counter" value="99">
    <button type="button" class="dso-tertiary"><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: 'dso-tertiary', label: minusButtonLabel, icon: 'minus-square', iconOnly: 'true', disabled: minusButtonInactive} %}
  <input type="number"
    id="{{ id }}"
    readonly
    tabindex="-1"
    {% if min or min == 0 %} min="{{ min }}"{% endif %}
    {% if max or max == 0 %} max="{{ max }}"{% endif %}
    {% if not label and label != null %} aria-label="Aantal"{% endif %}
    class="dso-input-step-counter"
    value="{{ count }}">
  {% render '@button', {type: 'button', modifier: 'dso-tertiary', 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: ''
id: no-label
count: 99
minusButtonLabel: Aantal verlagen
plusButtonLabel: Aantal verhogen