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

The precision prop controls the number of decimal places displayed and enforces that precision during input. When precision is set, the component will automatically round numbers to the specified number of decimal places before emitting the value. Listen to the @input event to get the rounded value as it is being typed. To get value on blur, use the @update:value event.

WARNING

While using the @input event make sure not to bind the emitted value to the input.

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(3.14)
</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
@input	(value: number)	Emitted during input with precision-rounded value
@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