InputNumber

LhInputNumber creates an input field for numeric values with increment/decrement controls.

Basic Usage

Basic Usage

<script setup lang="ts">
import { ref } from 'vue'
import { LhInputNumber } from '@lh-ui/vue3'

const value = ref(1)
</script>

<template>
  <LhInputNumber v-model="value" />
</template>

<script>
import { LhInputNumber } from '@lh-ui/vue3'

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

<template>
  <LhInputNumber v-model="value" />
</template>

Step & Bounds

Step & Bounds

<script setup lang="ts">
import { ref } from 'vue'
import { LhInputNumber } from '@lh-ui/vue3'

const stepped = ref(0)
</script>

<template>
  <LhInputNumber v-model="stepped" :min="0" :max="10" :step="2" />
</template>

<script>
import { LhInputNumber } from '@lh-ui/vue3'

export default {
  components: { LhInputNumber },
  data() {
    return {
      stepped: 0,
    }
  },
}
</script>

<template>
  <LhInputNumber v-model="stepped" :min="0" :max="10" :step="2" />
</template>

Disabled

Disabled

<script setup lang="ts">
import { ref } from 'vue'
import { LhInputNumber } from '@lh-ui/vue3'

const disabled = ref(1)
</script>

<template>
  <LhInputNumber v-model="disabled" disabled />
</template>

<script>
import { LhInputNumber } from '@lh-ui/vue3'

export default {
  components: { LhInputNumber },
  data() {
    return {
      disabled: 1,
    }
  },
}
</script>

<template>
  <LhInputNumber v-model="disabled" disabled />
</template>

Type Definitions

The TypeScript type structures exported by this component (auto-extracted from packages/components/input-number/src/types.ts and @lh-ui/share/core/* sources; click each entry to expand; see the Props table above for attribute descriptions):

LhInputNumberProps

export interface LhInputNumberProps {
  modelValue?: number | null
  min?: number
  max?: number
  step?: number
  stepStrictly?: boolean
  precision?: number
  disabled?: boolean
  size?: LhComponentSize
  controls?: boolean
  placeholder?: string
  name?: string
  sx?: LhSxProps
}

LhInputNumberSize

export type LhInputNumberSize = LhComponentSize

LhComponentSize _{(from @lh-ui/share/core/shared)}

export type LhComponentSize = (typeof LH_SIZE_CONST)[keyof typeof LH_SIZE_CONST]

Precision & Strict Step

Precision & Strict Step

<script setup lang="ts">
import { ref } from 'vue'

const value = ref<number | null>(1)
</script>

<template>
  <LhInputNumber v-model="value" :precision="2" placeholder="2 decimal places" />
  <LhInputNumber v-model="value" :step="10" step-strictly placeholder="Multiples of 10" />
</template>

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

<template>
  <LhInputNumber v-model="value" :precision="2" placeholder="2 decimal places" />
  <LhInputNumber v-model="value" :step="10" step-strictly placeholder="Multiples of 10" />
</template>

Size & Controls

Size & Controls

<script setup lang="ts">
import { ref } from 'vue'

const value = ref<number | null>(1)
</script>

<template>
  <LhInputNumber v-model="value" size="small" />
  <LhInputNumber v-model="value" size="medium" />
  <LhInputNumber v-model="value" size="large" />
  <LhInputNumber v-model="value" :controls="false" placeholder="No controls" />
</template>

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

<template>
  <LhInputNumber v-model="value" size="small" />
  <LhInputNumber v-model="value" size="medium" />
  <LhInputNumber v-model="value" size="large" />
  <LhInputNumber v-model="value" :controls="false" placeholder="No controls" />
</template>

Placeholder & Name

Placeholder & Name

<script setup lang="ts">
import { ref } from 'vue'

const value = ref<number | null>(1)
</script>

<template>
  <LhInputNumber v-model="value" placeholder="Please enter a number" />
  <LhInputNumber v-model="value" name="quantity" placeholder="name=quantity" />
</template>

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

<template>
  <LhInputNumber v-model="value" placeholder="Please enter a number" />
  <LhInputNumber v-model="value" name="quantity" placeholder="name=quantity" />
</template>

Props

Prop	Description	Type	Default
modelValue	Bound value	number	null
min	Minimum value	number	-Infinity
max	Maximum value	number	Infinity
step	Step size	number	1
stepStrictly	—	boolean	false
precision	Decimal precision	number	—
disabled	Disabled	boolean	false
size	Size	"small" | "medium" | "large" | "mini" | "x-large"	'medium'
controls	Show controls	boolean	true
placeholder	—	string	''
name	—	string	''
sx	sx quick-layout props	LhSxProps	—

Events

Event	Description	Callback
update:modelValue	Value change	(value: number) => void
change	Value changed	(value: number) => void