Quantity Input

The Quantity Input component provides a number input with increment and decrement buttons. It supports editable and non-editable modes, min/max constraints, different sizes, and flexible styling options.

Basic usage

Bind a number with v-model. Use the increment and decrement buttons to change the value, or type directly if editable is enabled.

Value: 1

Source code

<template>
  <div class="ik-mb-4">
    <IkQuantityInput v-model="quantity" />
  </div>
  <p class="ik-text--sm ik-text--default-regular">Value: {{ quantity }}</p>
</template>
<script setup>
import { IkQuantityInput } from '@ikol/ui-kit/components/IkQuantityInput';
import { ref } from 'vue';

const quantity = ref(1);
</script>

Min and max constraints

Use the min and max props to set boundaries for the quantity value. Buttons are automatically disabled when limits are reached.

Source code

<template>
  <div>
    <IkQuantityInput
      v-model="quantity1"
      :min="0"
      :max="10"
      class="ik-mb-4"
    />
    <IkQuantityInput
      v-model="quantity2"
      :min="5"
      :max="50"
      class="ik-mb-4"
    />
    <IkQuantityInput
      v-model="quantity3"
      :min="1"
      :max="100"
    />
  </div>
</template>
<script setup>
import { IkQuantityInput } from '@ikol/ui-kit/components/IkQuantityInput';
import { ref } from 'vue';

const quantity1 = ref(5);
const quantity2 = ref(10);
const quantity3 = ref(25);
</script>

Editable vs non-editable

Control whether users can type directly into the input field using the editable prop. When false, only the buttons can be used to change the value.

Editable (you can type directly)

Non-editable (buttons only)

Source code

<template>
  <div>
    <IkQuantityInput
      v-model="editableQty"
      :editable="true"
      class="ik-mb-4"
    />
    <p class="ik-text--sm ik-text--default-light ik-mb-4">
      Editable (you can type directly)
    </p>
    <IkQuantityInput
      v-model="nonEditableQty"
      :editable="false"
    />
    <p class="ik-text--sm ik-text--default-light">
      Non-editable (buttons only)
    </p>
  </div>
</template>
<script setup>
import { IkQuantityInput } from '@ikol/ui-kit/components/IkQuantityInput';
import { ref } from 'vue';

const editableQty = ref(5);
const nonEditableQty = ref(3);
</script>

Sizes

Use the size prop to control the size of the buttons and input. Available sizes: sm, md, lg.

Source code

<template>
  <div>
    <IkQuantityInput
      v-model="qty1"
      size="sm"
      class="ik-mb-4"
    />
    <IkQuantityInput
      v-model="qty2"
      size="md"
      class="ik-mb-4"
    />
    <IkQuantityInput
      v-model="qty3"
      size="lg"
    />
  </div>
</template>
<script setup>
import { IkQuantityInput } from '@ikol/ui-kit/components/IkQuantityInput';
import { ref } from 'vue';

const qty1 = ref(5);
const qty2 = ref(5);
const qty3 = ref(5);
</script>

Flat variant

Use the flat prop to change the input style to a flat variant instead of the default outline style.

Source code

<template>
  <div>
    <IkQuantityInput
      v-model="outlineQty"
      :flat="false"
      class="ik-mb-4"
    />
    <IkQuantityInput
      v-model="flatQty"
      :flat="true"
    />
  </div>
</template>
<script setup>
import { IkQuantityInput } from '@ikol/ui-kit/components/IkQuantityInput';
import { ref } from 'vue';

const outlineQty = ref(5);
const flatQty = ref(5);
</script>

Compact mode

Use the compact prop to remove spacing between the buttons and input field.

Source code

<template>
  <div>
    <IkQuantityInput
      v-model="normalQty"
      :compact="false"
      class="ik-mb-4"
    />
    <IkQuantityInput
      v-model="compactQty"
      :compact="true"
    />
  </div>
</template>
<script setup>
import { IkQuantityInput } from '@ikol/ui-kit/components/IkQuantityInput';
import { ref } from 'vue';

const normalQty = ref(5);
const compactQty = ref(5);
</script>

Individual button controls

Use disabled_increment and disabled_decrement props to disable individual buttons independently, in addition to the automatic disabling when min/max limits are reached.

Increment button disabled

Decrement button disabled

Entire component disabled

Source code

<template>
  <div>
    <IkQuantityInput
      v-model="qty1"
      :disabled_increment="true"
      class="ik-mb-4"
    />
    <p class="ik-text--sm ik-text--default-light ik-mb-4">
      Increment button disabled
    </p>
    <IkQuantityInput
      v-model="qty2"
      :disabled_decrement="true"
      class="ik-mb-4"
    />
    <p class="ik-text--sm ik-text--default-light ik-mb-4">
      Decrement button disabled
    </p>
    <IkQuantityInput
      v-model="qty3"
      :disabled="true"
    />
    <p class="ik-text--sm ik-text--default-light">
      Entire component disabled
    </p>
  </div>
</template>
<script setup>
import { IkQuantityInput } from '@ikol/ui-kit/components/IkQuantityInput';
import { ref } from 'vue';

const qty1 = ref(5);
const qty2 = ref(5);
const qty3 = ref(5);
</script>