Number Input

Props

Prop	Type	Default/Notes
`@input`	`Func()`	Handle event emitted from the component, ex: `@input={funcName}`
`@change`	`Func()`	Handle event emitted from the component, ex: `@change={funcName}`
`value`	`Number`	Default: `0`
`min`	`Number`	Default: `undefined`; Minimum value of number input
`max`	`Number`	Default: `undefined`; Maximum value of number input
`steps`	`Number`	Default: `1`; Amount of increments/decrements when scrubbing the number field
`unit`	`String/Number`	Default: `undefined`; Append a unit (string) to the number. Just for visuals, component will always return a number
`border`	`Boolean`	Default: `false`; Force border around input field. Border usually appears when element is hovered, active or focused. A set placeholder also forces a border
`disabled`	`Boolean`	Default: `false`
`icon`	`String`	See Icon component for usage
`iconText`	`String`	See Icon component for usage
`spinning`	`Boolean`	See Icon component for usage

Example usage

<template>
	<NumInput icon="W" min="0" max="100" unit="px" />
</template>

<script>
	import { NumInput } from 'figma-plugin-ds-vue'

	export default {
	       data: () => ({
		    numInputModel: // String || Number
	    }),
		components: {
			NumInput
		}
	}
</script>

Input Radio menu

On this page

Number Input

Props

Example usage