Input Qty

Ready

HTML
View
Context
Info
Notes


        
        <div class="flex flex-col items-start gap-8 w-full max-w-md">
    <div class="flex gap-8">
        <div class="flex flex-col w-full gap-y-1">
            <div class="input-wrapper flex flex-col relative w-full  ">

                <div class="input-qty-wrapper" x-data="{qty: 0 }">
                    <button type="button" @click='if(qty > 0) qty--' :class="qty === 0 ? 'disabled' : ''" aria-label="Label text" class="btn-qty decrement  btn  btn-dark  btn-subtle btn-border btn-size-xs btn-only-icon">
                        <svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <path d="M5 12h14" stroke="currentColor" stroke-width="2" fill="none" />

                        </svg>

                    </button>

                    <input type="number" name="qty-default-0" id="qty-default-0" class="input-qty
                    
                    " placeholder="" min="0" x-model="qty" :class="qty > 0 ? 'filled' : ''">

                    <button type="button" @click='qty++' aria-label="Label text" class="btn-qty increment  btn  btn-dark  btn-subtle btn-border btn-size-xs btn-only-icon">
                        <svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <path d="M12 4.5v15m7.5-7.5h-15" stroke="currentColor" stroke-width="2" fill="none" />

                        </svg>

                    </button>
                </div>

                <div class="sr-only">
                    <label for="qty-default-0">
                        <span>qty</span>
                    </label>
                </div>
            </div>
        </div>
        <span> awaiting</span>
    </div>
    <div class="flex gap-8">
        <div class="flex flex-col w-full gap-y-1">
            <div class="input-wrapper flex flex-col relative w-full  ">

                <div class="input-qty-wrapper" x-data="{qty: 1 }">
                    <button type="button" @click='if(qty > 0) qty--' :class="qty === 0 ? 'disabled' : ''" aria-label="Label text" class="btn-qty decrement  btn  btn-dark  btn-subtle btn-border btn-size-xs btn-only-icon">
                        <svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <path d="M5 12h14" stroke="currentColor" stroke-width="2" fill="none" />

                        </svg>

                    </button>

                    <input type="number" name="qty-default" id="qty-default" value="1" class="input-qty
                    
                    " placeholder="" min="0" x-model="qty" :class="qty > 0 ? 'filled' : ''">

                    <button type="button" @click='qty++' aria-label="Label text" class="btn-qty increment  btn  btn-dark  btn-subtle btn-border btn-size-xs btn-only-icon">
                        <svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <path d="M12 4.5v15m7.5-7.5h-15" stroke="currentColor" stroke-width="2" fill="none" />

                        </svg>

                    </button>
                </div>

                <div class="sr-only">
                    <label for="qty-default">
                        <span>qty</span>
                    </label>
                </div>
            </div>
        </div>
        <span> filled</span>
    </div>
    <div class="flex gap-8">
        <div class="flex flex-col w-full gap-y-1">
            <div class="input-wrapper flex flex-col relative w-full  ">

                <div class="input-qty-wrapper" x-data="{qty: 1 }">
                    <button type="button" @click='if(qty > 0) qty--' :class="qty === 0 ? 'disabled' : ''" aria-label="Label text" class="btn-qty decrement  btn  btn-dark  btn-subtle btn-border btn-size-xs btn-only-icon">
                        <svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <path d="M5 12h14" stroke="currentColor" stroke-width="2" fill="none" />

                        </svg>

                    </button>

                    <input type="number" name="qty-success" id="qty-success" value="1" class="input-qty
                    
                    success" placeholder="" min="0" x-model="qty" :class="qty > 0 ? 'filled' : ''">

                    <button type="button" @click='qty++' aria-label="Label text" class="btn-qty increment  btn  btn-dark  btn-subtle btn-border btn-size-xs btn-only-icon">
                        <svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <path d="M12 4.5v15m7.5-7.5h-15" stroke="currentColor" stroke-width="2" fill="none" />

                        </svg>

                    </button>
                </div>

                <div class="sr-only">
                    <label for="qty-success">
                        <span>qty</span>
                    </label>
                </div>
            </div>
        </div>
        <span> success</span>
    </div>
    <div class="flex gap-8">
        <div class="flex flex-col w-full gap-y-1">
            <div class="input-wrapper flex flex-col relative w-full  ">

                <div class="input-qty-wrapper" x-data="{qty: 0 }">
                    <button type="button" @click='if(qty > 0) qty--' :class="qty === 0 ? 'disabled' : ''" aria-label="Label text" class="btn-qty decrement  btn  btn-dark  btn-subtle btn-border btn-size-xs btn-only-icon">
                        <svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <path d="M5 12h14" stroke="currentColor" stroke-width="2" fill="none" />

                        </svg>

                    </button>

                    <input type="number" name="qty-error" id="qty-error" class="input-qty
                    
                    error" placeholder="" min="0" x-model="qty" :class="qty > 0 ? 'filled' : ''">

                    <button type="button" @click='qty++' aria-label="Label text" class="btn-qty increment  btn  btn-dark  btn-subtle btn-border btn-size-xs btn-only-icon">
                        <svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <path d="M12 4.5v15m7.5-7.5h-15" stroke="currentColor" stroke-width="2" fill="none" />

                        </svg>

                    </button>
                </div>

                <div class="sr-only">
                    <label for="qty-error">
                        <span>qty</span>
                    </label>
                </div>
            </div>
        </div>
        <span> error</span>
    </div>
    <div class="flex gap-8">
        <div class="flex flex-col w-full gap-y-1">
            <div class="input-wrapper flex flex-col relative w-full  ">

                <div class="input-qty-wrapper" x-data="{qty: 1 }">
                    <button type="button" @click='if(qty > 0) qty--' :class="qty === 0 ? 'disabled' : ''" disabled aria-disabled="true" aria-label="Label text" class="btn-qty decrement  btn  btn-dark  btn-subtle btn-border btn-size-xs btn-only-icon">
                        <svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <path d="M5 12h14" stroke="currentColor" stroke-width="2" fill="none" />

                        </svg>

                    </button>

                    <input type="number" name="qty-disabled" id="qty-disabled" disabled value="1" class="input-qty
                    
                    " placeholder="" min="0" x-model="qty" :class="qty > 0 ? 'filled' : ''">

                    <button type="button" @click='qty++' disabled aria-disabled="true" aria-label="Label text" class="btn-qty increment  btn  btn-dark  btn-subtle btn-border btn-size-xs btn-only-icon">
                        <svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <path d="M12 4.5v15m7.5-7.5h-15" stroke="currentColor" stroke-width="2" fill="none" />

                        </svg>

                    </button>
                </div>

                <div class="sr-only">
                    <label for="qty-disabled">
                        <span>qty</span>
                    </label>
                </div>
            </div>
        </div>
        <span> locked</span>
    </div>
    <div class="flex gap-8">
        <div class="flex flex-col w-full gap-y-1">
            <div class="input-wrapper flex flex-col relative w-full  ">

                <div class="input-qty-wrapper" x-data="{qty: 0 }">
                    <button type="button" @click='if(qty > 0) qty--' :class="qty === 0 ? 'disabled' : ''" disabled aria-disabled="true" aria-label="Label text" class="btn-qty decrement  btn  btn-dark  btn-subtle btn-border btn-size-xs btn-only-icon">
                        <svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <path d="M5 12h14" stroke="currentColor" stroke-width="2" fill="none" />

                        </svg>

                    </button>

                    <input type="number" name="qty-disabled-0" id="qty-disabled-0" disabled class="input-qty
                    
                    " placeholder="" min="0" x-model="qty" :class="qty > 0 ? 'filled' : ''">

                    <button type="button" @click='qty++' disabled aria-disabled="true" aria-label="Label text" class="btn-qty increment  btn  btn-dark  btn-subtle btn-border btn-size-xs btn-only-icon">
                        <svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <path d="M12 4.5v15m7.5-7.5h-15" stroke="currentColor" stroke-width="2" fill="none" />

                        </svg>

                    </button>
                </div>

                <div class="sr-only">
                    <label for="qty-disabled-0">
                        <span>qty</span>
                    </label>
                </div>
            </div>
        </div>
        <span> disabled</span>
    </div>
</div>


        <div class="flex flex-col items-start gap-8 w-full max-w-md">
    {% for input in inputs %}
        <div class="flex gap-8">
        {% include "@template-input-qty" with {
            id: input.id,
            name: input.name,
            type: input.type,
            label: input.label,
            required: input.required,
            disabled: input.disabled,
            value: input.value,
            state: input.state,
            color: input.color,
        } %}

            <span> {{ input.commentDSOnly }}</span>
        </div>
    {% endfor %}
</div>


        
            
            {
  "inputs": [
    {
      "id": "qty-default-0",
      "name": "qty-default-0",
      "type": "qty",
      "label": "qty",
      "value": 0,
      "disabled": false,
      "commentDSOnly": "awaiting"
    },
    {
      "id": "qty-default",
      "name": "qty-default",
      "type": "qty",
      "label": "qty",
      "value": 1,
      "disabled": false,
      "commentDSOnly": "filled"
    },
    {
      "id": "qty-success",
      "name": "qty-success",
      "type": "qty",
      "label": "qty",
      "value": 1,
      "state": "success",
      "commentDSOnly": "success"
    },
    {
      "id": "qty-error",
      "name": "qty-error",
      "type": "qty",
      "label": "qty",
      "value": 0,
      "state": "error",
      "commentDSOnly": "error"
    },
    {
      "id": "qty-disabled",
      "name": "qty-disabled",
      "type": "qty",
      "label": "qty",
      "value": 1,
      "disabled": true,
      "commentDSOnly": "locked"
    },
    {
      "id": "qty-disabled-0",
      "name": "qty-disabled-0",
      "type": "qty",
      "label": "qty",
      "value": 0,
      "disabled": true,
      "commentDSOnly": "disabled"
    }
  ]
}

Handle: @input-qty
Preview:
- With layout
- Component only
Filesystem Path: src/components/molecules/inputs/input-qty/input-qty.twig
References (1): @template-input-qty

No notes defined.