InputNumber

Provide numerical input with a flexible range setting.

Number Field

Nuxt UI

Git

INFO

This component relies on the @internationalized/number package which provides utilities for formatting and parsing numbers across locales and numbering systems.

Usage

Use the v-model directive to control the value of the InputNumber.

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

const value = ref(24)
</script>

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

Use the default-value prop to set the initial value when you do not need to control its state.

<template>
  <B24InputNumber :default-value="24" />
</template>

Min / Max

Use the min and max props to set the minimum and maximum values of the InputNumber.

Details

<script setup lang="ts">
export interface ExampleProps {
  min?: number
  max?: number
}

withDefaults(defineProps<ExampleProps>(), {
  min: 3,
  max: 50
})
</script>

<template>
  <B24InputNumber
    :min="min"
    :max="max"
    :default-value="24"
  />
</template>

Step

Use the step prop to set the step value of the InputNumber.

Details

<script setup lang="ts">
export interface ExampleProps {
  step?: number
}

withDefaults(defineProps<ExampleProps>(), {
  step: 1
})
</script>

<template>
  <B24InputNumber
    :step="step"
    :default-value="24"
  />
</template>

Orientation

Use the orientation prop to change the orientation of the InputNumber.

Details

<script setup lang="ts">
import { ref } from 'vue'
import type { InputNumberProps } from '@bitrix24/b24ui-nuxt'

export interface ExampleProps {
  orientation?: InputNumberProps['orientation']
}

withDefaults(defineProps<ExampleProps>(), {
  orientation: 'horizontal' as const
})

const value = ref(24)
</script>

<template>
  <B24InputNumber
    v-model="value"
    :orientation="orientation"
  />
</template>

Placeholder

Use the placeholder prop to set a placeholder text.

Details

<script setup lang="ts">
export interface ExampleProps {
  placeholder?: string
}

withDefaults(defineProps<ExampleProps>(), {
  placeholder: 'Enter a number...'
})
</script>

<template>
  <B24InputNumber
    :placeholder="placeholder"
  />
</template>

Color

Use the color prop to change the ring color when the InputNumber is focused.

Details

<script setup lang="ts">
import type { InputNumberProps } from '@bitrix24/b24ui-nuxt'

export interface ExampleProps {
  color?: InputNumberProps['color']
  isHighlight?: boolean
}

withDefaults(defineProps<ExampleProps>(), {
  color: 'default',
  isHighlight: true
})
</script>

<template>
  <B24InputNumber
    :color="color"
    :highlight="isHighlight"
    placeholder="Enter a number"
  />
</template>

Tag

Use the tag property to display a small legend on top of the Input.

Use the tagColor property to set the color for tag.

Details

<script setup lang="ts">
import type { InputProps } from '@bitrix24/b24ui-nuxt'

export interface ExampleProps {
  tagColor: InputProps['tagColor']
  tag?: string
}

withDefaults(defineProps<ExampleProps>(), {
  tagColor: 'default',
  tag: 'info'
})
</script>

<template>
  <B24InputNumber
    :tag-color="tagColor"
    :tag="tag"
    placeholder="Enter a number"
  />
</template>

Size

Use the size prop to change the size of the InputNumber.

Details

<script setup lang="ts">
import type { InputNumberProps } from '@bitrix24/b24ui-nuxt'

export interface ExampleProps {
  size?: InputNumberProps['size']
  orientation?: InputNumberProps['orientation']
}

withDefaults(defineProps<ExampleProps>(), {
  size: 'md' as const,
  orientation: 'horizontal' as const
})
</script>

<template>
  <B24InputNumber
    :size="size"
    :orientation="orientation"
    placeholder="Enter a number"
  />
</template>

Disabled

Use the disabled prop to disable the InputNumber.

Details

<script setup lang="ts">
export interface ExampleProps {
  isDisabled?: boolean
}

withDefaults(defineProps<ExampleProps>(), {
  isDisabled: true
})
</script>

<template>
  <B24InputNumber
    :disabled="isDisabled"
    placeholder="Enter a number"
  />
</template>

Increment / Decrement

Use the increment and decrement props to customize the increment and decrement buttons with any Button props. Defaults to { color: 'link', depth: 'light' }.

Details

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

const value = ref(5)
</script>

<template>
  <B24InputNumber
    v-model="value"
    color="ai"
    highlight
    :increment="{
      color: 'ai',
      depth: 'light'
    }"
    :decrement="{
      color: 'ai',
      depth: 'light'
    }"
  />
</template>

Increment / Decrement Icons

Use the increment-icon and decrement-icon props to customize the buttons @bitrix24/b24icons. Defaults to Plus30Icon / Minus30Icon.

Details

<script setup lang="ts">
import { ref } from 'vue'
import ArrowToTheLeftIcon from '@bitrix24/b24icons-vue/actions/ArrowToTheLeftIcon'
import ArrowToTheRightIcon from '@bitrix24/b24icons-vue/actions/ArrowToTheRightIcon'

const value = ref(5)
</script>

<template>
  <B24InputNumber
    v-model="value"
    :increment-icon="ArrowToTheRightIcon"
    :decrement-icon="ArrowToTheLeftIcon"
  />
</template>

Examples

With decimal format

Use the format-options prop to customize the format of the value.

Details

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

const value = ref(5)
</script>

<template>
  <B24InputNumber
    v-model.number="value"
    :format-options="{
      signDisplay: 'exceptZero',
      minimumFractionDigits: 2
    }"
  />
</template>

With percentage format

Use the format-options prop with style: 'percent' to customize the format of the value.

Details

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

const value = ref(0.05)
</script>

<template>
  <B24InputNumber
    v-model.number="value"
    :step="0.01"
    :format-options="{
      style: 'percent'
    }"
  />
</template>

With currency format

Use the format-options prop with style: 'currency' to customize the format of the value.

Details

<script setup lang="ts">
import { ref, computed } from 'vue'
import countryCurrencies from './../../locales/CountryCurrencies'
import type { CurrencyLocale } from './../../locales/CountryCurrencies'

export interface ExampleProps {
  locale?: string
}

const props = withDefaults(defineProps<ExampleProps>(), {
  locale: countryCurrencies[0].code
})

const localeInfo = computed<CurrencyLocale>(() => {
  const foundElement = countryCurrencies.find(item => item.code === props.locale)

  if (foundElement) {
    return foundElement
  }

  return countryCurrencies[0]
})

const value = ref(1500.05)
</script>

<template>
  <B24InputNumber
    v-model.number="value"
    :step="1.00"
    :locale="localeInfo.locale"
    :format-options="{
      style: 'currency',
      currency: localeInfo.currencyCode,
      currencyDisplay: 'code',
      currencySign: 'accounting'
    }"
  />
</template>

Within a FormField

You can use the InputNumber within a FormField component to display a label, help text, required indicator, etc.

Details

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

const retries = ref(0)
</script>

<template>
  <B24FormField label="Retries" help="Specify number of attempts" required>
    <B24InputNumber v-model="retries" placeholder="Enter retries" />
  </B24FormField>
</template>

With slots

Use the #increment and #decrement slots to customize the buttons.

Details

<script setup lang="ts">
import { ref } from 'vue'
import ArrowToTheLeftIcon from '@bitrix24/b24icons-vue/actions/ArrowToTheLeftIcon'
import ArrowToTheRightIcon from '@bitrix24/b24icons-vue/actions/ArrowToTheRightIcon'

const retries = ref(0)
</script>

<template>
  <B24InputNumber v-model="retries" placeholder="Enter retries">
    <template #decrement>
      <B24Button size="md" rounded :icon="ArrowToTheLeftIcon" />
    </template>

    <template #increment>
      <B24Button size="md" rounded :icon="ArrowToTheRightIcon" />
    </template>
  </B24InputNumber>
</template>

API

Props

Prop	Default	Type
as	'div'	any The element or component this component should render as.
placeholder		string The placeholder text when the input is empty.
color	"primary"	"default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai"
size	"md"	"lg" | "md" | "xs" | "sm"
noPadding		boolean Removes padding from input.
noBorder		boolean removes all borders (rings).
underline		boolean removes all borders (rings) except the bottom one.
rounded		boolean Rounds the corners of the button.
tag		string
tagColor		"default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai"
highlight		boolean Highlight the ring color like a focus state.
orientation	"horizontal"	"vertical" | "horizontal" The orientation of the input menu.
increment	{ color: 'link', depth: 'light' }	ButtonProps Configure the increment button. The `size` is inherited.
incrementIcon	icons.plus = Plus30Icon	(props: HTMLAttributes & VNodeProps & {}, ctx: Omit<{ attrs: Data; slots: Readonly<InternalSlots>; emit: (event: string, ...args: any[]) => void; expose: <Exposed extends Record<string, any> = Record<...>>(exposed?: Exposed) => void; }, "expose">): any The icon displayed to increment the value.
decrement	{ color: 'link', depth: 'light' }	ButtonProps Configure the decrement button. The `size` is inherited.
decrementIcon	icons.minus = Minus30Icon	(props: HTMLAttributes & VNodeProps & {}, ctx: Omit<{ attrs: Data; slots: Readonly<InternalSlots>; emit: (event: string, ...args: any[]) => void; expose: <Exposed extends Record<string, any> = Record<...>>(exposed?: Exposed) => void; }, "expose">): any The icon displayed to decrement the value.
autofocus		boolean
autofocusDelay		number
locale	B24App.locale.code	string The locale to use for formatting and parsing numbers.
b24ui		PartialString<{ root: string; base: string; increment: string; decrement: string; tag: string; }>
disabled		boolean When `true`, prevents the user from interacting with the Number Field.
step		number The amount that the input value changes with each increment or decrement "tick".
max		number The largest value allowed for the input.
name		string The name of the field. Submitted with its owning form as part of a name/value pair.
required		boolean When `true`, indicates that the user must set the value before the owning form can be submitted.
id		string Id of the element
defaultValue		number
modelValue		null | number
min		number The smallest value allowed for the input.
formatOptions		NumberFormatOptions Formatting options for the value displayed in the number field. This also affects what characters are allowed to be typed by the user.

Slots

Slot	Type
increment	{}
decrement	{}

Emits

Event	Type

Expose

When accessing the component via a template ref, you can use the following:

Name	Type
inputRef	Ref<HTMLInputElement | null>