Accessibility: Work in progress

Translations: Not Needed

Migration Guide: Full

Input Number

Numeric input component with optional increment/decrement buttons.

Default

Vue

<template>
  <HLInputNumber v-model:value="value" id="basic-example" :show-button="true" />
</template>

<script setup lang="ts">
  import { HLInputNumber } from '@platform-ui/highrise'
  import { ref } from 'vue'
  const value = ref(0)
</script>

Different Sizes

3xs size

2xs size

xs size

sm size

md size

lg size

Vue

<template>
  <HLInputNumber v-model:value="value" id="size-example" size="size" placeholder="size" :show-button="true" />
</template>
<script setup lang="ts">
  import { HLInputNumber } from '@platform-ui/highrise'
  import { ref } from 'vue'
  const value = ref(0)
</script>

Text Alignment

Please Input

Please Input

Please Input

Vue

<template>
  <HLInputNumber v-model:value="value" id="text-align-example" text-align="start" :show-button="false" />
</template>
<script setup lang="ts">
  import { HLInputNumber } from '@platform-ui/highrise'
  import { ref } from 'vue'
  const value = ref(0)
</script>

With Precision

Vue

<template>
  <HLInputNumber v-model:value="value" id="precision-example" :precision="2" :show-button="true" />
</template>
<script setup lang="ts">
  import { HLInputNumber } from '@platform-ui/highrise'
  import { ref } from 'vue'
  const value = ref(0)
</script>

With Min/Max Range

Vue

<template>
  <HLInputNumber v-model:value="value" id="range-example" :min="0" :max="10" :show-button="true" />
</template>
<script setup lang="ts">
  import { HLInputNumber } from '@platform-ui/highrise'
  import { ref } from 'vue'
  const value = ref(0)
</script>

Custom Step

Vue

<template>
  <HLInputNumber v-model:value="value" id="step-example" :step="10" :show-button="true" />
</template>
<script setup lang="ts">
  import { HLInputNumber } from '@platform-ui/highrise'
  import { ref } from 'vue'
  const value = ref(0)
</script>

Custom Format

Vue

<template>
  <HLInputNumber v-model:value="value" id="format-example" :format="formatNumber" :parse="parseNumber" :show-button="true" />
</template>
<script setup lang="ts">
  import { HLInputNumber } from '@platform-ui/highrise'
  import { ref } from 'vue'
  const value = ref(0)
  const formatNumber = value => {
    if (value === null) return ''
    return `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
  }
  const parseNumber = input => {
    const parsed = Number(input.replace(/[^\d.-]/g, ''))
    return isNaN(parsed) ? null : parsed
  }
</script>

Custom Parse Function

Vue

<template>
  <HLInputNumber
    v-model:value="percentageValue"
    id="parse-example"
    :parse="parsePercentage"
    :format="formatPercentage"
    :min="0"
    :max="100"
    placeholder="Enter percentage"
    :show-button="true"
  />
</template>
<script setup lang="ts">
  import { HLInputNumber } from '@platform-ui/highrise'
  import { ref } from 'vue'

  const percentageValue = ref(50)

  const parsePercentage = input => {
    // Remove % symbol and whitespace
    const cleaned = input.replace(/%|\s/g, '')
    const parsed = Number(cleaned)
    // Return null if not a valid number or out of range
    if (isNaN(parsed) || parsed < 0 || parsed > 100) return null
    return parsed
  }

  const formatPercentage = value => {
    if (value === null) return ''
    return `${value}%`
  }
</script>

States

Vue

<template>
  <HLInputNumber id="disabled-example" disabled :value="5" :show-button="true" />
  <HLInputNumber id="loading-example" loading :value="5" :show-button="true" />
  <HLInputNumber id="readonly-example" readonly :value="5" :show-button="true" />
</template>
<script setup lang="ts">
  import { HLInputNumber } from '@platform-ui/highrise'
  import { ref } from 'vue'
</script>

Imports

import { HLInputNumber } from '@platform-ui/highrise'

Props

Name	Type	Default	Description
id *	string | undefined	undefined	Unique identifier for the input
value	number | undefined	undefined	The input value
size	'lg' | 'md' | 'sm' | 'xs' | '2xs' | '3xs'	'md'	Size of the input
disabled	boolean	false	Whether the input is disabled
loading	boolean	false	Whether the input is in loading state
readonly	boolean	false	Whether the input is read-only
clearable	boolean	false	Whether the input can be cleared
placeholder	string	'Please Input'	Placeholder text
max	number | undefined	undefined	Maximum allowed value
min	number | undefined	undefined	Minimum allowed value
precision	number | undefined	undefined	Number of decimal places
showButton	boolean	false	Whether to show increment/decrement buttons
step	number | undefined	1	Step value for increment/decrement
buttonPlacement	'both' | 'right'	'right'	Placement of increment/decrement buttons
parse	(input: string) => number | null | undefined	undefined	Custom parse function for converting string input to number
format	(value: number | null) => string | undefined	undefined	Custom format function for displaying the value
textAlign	'start' | 'center' | 'end'	'start'	Text alignment of the input

Slots

Name	Parameters	Description
prefix	()	Content to be placed before the input
suffix	()	Content to be placed after the input
minus-icon	()	Custom icon for the decrement button
add-icon	()	Custom icon for the increment button

Emits

Name	Parameters	Description
@update:value	(value: number | null)	Emitted when the input value changes
@focus	() => void	Focus the input number element
@blur	() => void	Blur the input number element
@clear	() => void	Clear the input number element

Methods

Name	Parameters	Returns	Description
focus	() => void	void	Focus the input number element
blur	() => void	void	Blur the input number element