Stepper
Count things with minus and plus, such as pieces in a cart or guests on a booking, or type the number when it is far from the current one.
Quantitypcs
Weightkg
Count
Adults
<script setup lang="ts">import { ref } from 'vue'import { UiStepper } from 'grani' const qty = ref<string | null>('2') const kilos = ref<string | null>('4') const count = ref<string | null>('1') const adults = ref<string | null>('1')</script> <template> <UiStepper v-model="qty" :min="1" :max="20" ariaLabel="Quantity"> <template #end>pcs</template> </UiStepper> <UiStepper v-model="kilos" :min="1" ariaLabel="Weight"> <template #end>kg</template> </UiStepper> <UiStepper v-model="count" :min="0" size="xs" ariaLabel="Count" /> <!-- One adult at least: the minus rests inert at the bound. --> <UiStepper v-model="adults" :min="1" :max="9" ariaLabel="Adults" /></template>
Also called quantity input, counter, plus minus input, numeric stepper.
Usage
<UiStepper v-model="value" /> With GraniResolver in the Vite config, a template needs no import: set it up once.
API
| Name · type | Default | Description |
|---|---|---|
| Value | ||
| modelValue*string | null | The count as text (v-model): null when emptied. A number is plain text (12) parsed by its owner on use. | |
| Behavior | ||
| stepnumber= 1 | 1 | How much a button or an arrow key moves the count. |
| minnumber | The lowest count the buttons and the arrows reach. Typing is not clamped: the form validates. | |
| maxnumber | The highest count the buttons and the arrows reach. | |
| Look | ||
| placeholderstring | Hint shown while empty. Not a replacement for a label. | |
| sizexs | sm | md | Step of the control ladder. Unset, the app's size (createGrani({ size })), sm by default. | |
| Form and access | ||
| namestring | Native name for forms. | |
| idstring | Own id when standalone. Inside UiField the field's id takes precedence. | |
| readonlyboolean= false | false | Prevents editing while keeping the count focusable: something else sets it. |
| disabledboolean= false | false | Prevents input and interaction. |
| invalidboolean= false | false | Marks the control invalid: red border and halo. Inside UiField the error sets this. |
| requiredboolean= false | false | Standalone only: a count is needed, said to a reader and to a form. Inside UiField the field's required says so. |
| ariaLabelstring | Accessible name when there is no visible label. | |
Attributes are placed by the component itself: its description says where.
When to use another component
| When you need | Take |
|---|---|
| A number with decimals or money | Input numeric |
| A mark from 1 to N | Scale input |