SpinButton

Basic

Value: 0

<script setup>
import { ref } from 'vue'
const value = ref(0)
</script>

<FuiSpinButton v-model="value" />

With min/max

Value: 50

<FuiSpinButton v-model="value" :min="0" :max="100" />

Size

Small: 0

Medium: 0

Large: 0

<FuiSpinButton v-model="smallValue" size="small" />
<FuiSpinButton v-model="mediumValue" size="medium" />
<FuiSpinButton v-model="largeValue" size="large" />

Appearance

outline: 0

filled-darker: 50

filled-lighter: 0

<FuiSpinButton v-model="value" appearance="outline" />
<FuiSpinButton v-model="value" appearance="filled-darker" />
<FuiSpinButton v-model="value" appearance="filled-lighter" />

Props

Prop	Type	Default	Description
modelValue	number	undefined	Current value
min	number	undefined	Minimum value
max	number	undefined	Maximum value
step	number	1	Step increment
precision	number	0	Decimal places
size	small | medium | large	medium	Input size
appearance	outline | underline | filled-darker | filled-lighter	outline	Visual style
disabled	boolean	false	Disabled state