# QuantitySelector

Component with input to choose numeric values and describe quantity.

# Most common usage scenario

<template>
  <SfQuantitySelector v-model="value" :min="min" />
</template>

<script>
import { SfQuantitySelector } from "@storefront-ui/vue";

export default {
  components: {
    SfQuantitySelector
  },
  data() {
    return {
      value: 1,
      min: 1
    };
  }
};
</script>

# Props

  • qty

    • Quantity
    • type: number|string
    • defaultValue: 1
  • min

    • Minimum quantity
    • type: number
    • defaultValue: 1

# Slots

None.

# Events

  • input

# CSS modifiers

None.

# SCSS variables

$quantity-selector__width: 1.875rem !default;
$quantity-selector__height: 1.6875rem !default;
$quantity-selector__width-desktop: 3.125rem !default;

You can override SCSS variable values bound to this component in sfui.scss in the root of your project.

# Partials

If you want to customize this component even more you can use its partials for limitless customization.

<template lang="html" src="@storefront-ui/vue/src/components/atoms/SfQuantitySelector/SfQuantitySelector.html"></template>
<script src="@storefront-ui/vue/src/components/atoms/SfQuantitySelector/SfQuantitySelector.js"></script>
<style lang="scss">
@import "~@storefront-ui/shared/styles/components/SfQuantitySelector.scss";
</style>

You can read about using component partials here

# Play with this component

See all available configurations and play with this component on Storybook.