Stepper
Use the stepper to enable controlled increasing and decreasing of values. Configure the steps and choose to provide an input for manual entry.
Demo
<MbscStepper label="Adults" description="From 14 years" :min="1" :defaultValue="1" :max="15" />
<MbscStepper label="Children" description="2-14 years" inputPosition="start" :max="15" />
<MbscStepper label="Infant" description="0-2 years" inputPosition="start" :max="10" />SFC JSSFC TS
<script setup>
import { MbscPage, MbscStepper, setOptions } from '@mobiscroll/vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
</script>
<template>
<MbscPage>
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Passengers</div>
<MbscStepper
label="Adults"
description="From 14 years"
:min="1"
:defaultValue="1"
:max="15"
/>
<MbscStepper label="Children" description="2-14 years" inputPosition="start" :max="15" />
<MbscStepper label="Infant" description="0-2 years" inputPosition="start" :max="10" />
</div>
</MbscPage>
</template>
<script setup lang="ts">
import { MbscPage, MbscStepper, setOptions } from '@mobiscroll/vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
</script>
<template>
<MbscPage>
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Passengers</div>
<MbscStepper
label="Adults"
description="From 14 years"
:min="1"
:defaultValue="1"
:max="15"
/>
<MbscStepper label="Children" description="2-14 years" inputPosition="start" :max="15" />
<MbscStepper label="Infant" description="0-2 years" inputPosition="start" :max="10" />
</div>
</MbscPage>
</template>