InputNumber

An input for numerical values with a customizable range.

Usage

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

<script setup lang="ts">
const value = ref(5)
</script>

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

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

<template>
  <UInputNumber :default-value="5" />
</template>

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

Min / Max

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

min

max

<script setup lang="ts">
const value = ref(5)
</script>

<template>
  <UInputNumber v-model="value" :min="0" :max="10" />
</template>

Step

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

step

<script setup lang="ts">
const value = ref(5)
</script>

<template>
  <UInputNumber v-model="value" :step="2" />
</template>

Orientation

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

orientation

<script setup lang="ts">
const value = ref(5)
</script>

<template>
  <UInputNumber v-model="value" orientation="vertical" />
</template>

Placeholder

Use the placeholder prop to set a placeholder text.

placeholder

<template>
  <UInputNumber placeholder="Enter a number" />
</template>

Color

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

color

highlight

<script setup lang="ts">
const value = ref(5)
</script>

<template>
  <UInputNumber v-model="value" color="neutral" highlight />
</template>

Variant

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

variant

color

highlight

<script setup lang="ts">
const value = ref(5)
</script>

<template>
  <UInputNumber v-model="value" variant="subtle" color="neutral" />
</template>

Size

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

size

<script setup lang="ts">
const value = ref(5)
</script>

<template>
  <UInputNumber v-model="value" size="xl" />
</template>

Disabled

Use the disabled prop to disable the InputNumber.

disabled

<script setup lang="ts">
const value = ref(5)
</script>

<template>
  <UInputNumber v-model="value" disabled />
</template>

Increment / Decrement

Use the increment and decrement props to customize the increment and decrement buttons with any Button props. Defaults to { variant: 'link' }.

<script setup lang="ts">
const value = ref(5)
</script>

<template>
  <UInputNumber
    v-model="value"
    :increment="{
      color: 'neutral',
      variant: 'solid',
      size: 'xs'
    }"
    :decrement="{
      color: 'neutral',
      variant: 'solid',
      size: 'xs'
    }"
  />
</template>

Increment / Decrement Icons

Use the increment-icon and decrement-icon props to customize the buttons Icon. Defaults to i-lucide-plus / i-lucide-minus.

incrementIcon

decrementIcon

<script setup lang="ts">
const value = ref(5)
</script>

<template>
  <UInputNumber
    v-model="value"
    increment-icon="i-lucide-arrow-right"
    decrement-icon="i-lucide-arrow-left"
  />
</template>

Examples

With decimal format

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

<script setup lang="ts">
const value = ref(5)
</script>

<template>
  <UInputNumber
    v-model="value"
    :format-options="{
      signDisplay: 'exceptZero',
      minimumFractionDigits: 1
    }"
  />
</template>

With percentage format

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

<script setup lang="ts">
const value = ref(0.05)
</script>

<template>
  <UInputNumber
    v-model="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.

<script setup lang="ts">
const value = ref(1500)
</script>

<template>
  <UInputNumber
    v-model="value"
    :format-options="{
      style: 'currency',
      currency: 'EUR',
      currencyDisplay: 'code',
      currencySign: 'accounting'
    }"
  />
</template>

Without buttons

You can use the increment and decrement props to control visibility of the buttons.

<script setup lang="ts">
const value = ref(5)
</script>

<template>
  <UInputNumber
    v-model="value"
    :increment="false"
    :decrement="false"
  />
</template>

Within a FormField

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

Retries

Specify number of attempts

<script setup lang="ts">
const retries = ref(0)
</script>

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

With slots

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

<script setup lang="ts">
const value = ref(5)
</script>

<template>
  <UInputNumber v-model="value">
    <template #decrement>
      <UButton size="xs" icon="i-lucide-minus" />
    </template>

    <template #increment>
      <UButton size="xs" icon="i-lucide-plus" />
    </template>
  </UInputNumber>
</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'`	`"primary" \| "secondary" \| "success" \| "info" \| "warning" \| "error" \| "neutral"`
`variant`	`'outline'`	`"outline" \| "soft" \| "subtle" \| "ghost" \| "none"`
`size`	`'md'`	`"xs" \| "sm" \| "md" \| "lg" \| "xl"`
`highlight`		`boolean` Highlight the ring color like a focus state.
`orientation`	`'horizontal'`	`"horizontal" \| "vertical"` The orientation of the input number.
`increment`	`true`	`boolean \| Omit<ButtonProps, LinkPropsKeys>` Configure the increment button. The `color` and `size` are inherited.
`incrementIcon`	`appConfig.ui.icons.plus`	`any` The icon displayed to increment the value.
`incrementDisabled`		`boolean` Disable the increment button.
`decrement`	`true`	`boolean \| Omit<ButtonProps, LinkPropsKeys>` Configure the decrement button. The `color` and `size` are inherited.
`decrementIcon`	`appConfig.ui.icons.minus`	`any` The icon displayed to decrement the value.
`decrementDisabled`		`boolean` Disable the decrement button.
`autofocus`		`boolean`
`autofocusDelay`		`number`
`modelModifiers`		`Pick<ModelModifiers<T>, "optional">`
`modelValue`		`null \| number`
`defaultValue`		`number`
`min`		`number` The smallest value allowed for the input.
`max`		`number` The largest value allowed for the input.
`step`		`number` The amount that the input value changes with each increment or decrement "tick".
`stepSnapping`		`boolean` When `false`, prevents the value from snapping to the nearest increment of the step value
`disabled`		`boolean` When `true`, prevents the user from interacting with the Number Field.
`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
`name`		`string` The name of the field. Submitted with its owning form as part of a name/value pair.
`formatOptions`		`Intl.NumberFormatOptions` Formatting options for the value displayed in the number field. This also affects what characters are allowed to be typed by the user.
`disableWheelChange`		`boolean` When `true`, prevents the value from changing on wheel scroll.
`invertWheelChange`		`boolean` When `true`, inverts the direction of the wheel change.
`readonly`		`boolean` When `true`, the Number Field is read-only.
`autocomplete`		"" \| "name" \| "off" \| "on" \| "additional-name" \| "address-level1" \| "address-level2" \| "address-level3" \| "address-level4" \| "address-line1" \| "address-line2" \| "address-line3" \| "bday-day" \| "bday-month" \| "bday-year" \| "cc-csc" \| "cc-exp" \| "cc-exp-month" \| "cc-exp-year" \| "cc-family-name" \| "cc-given-name" \| "cc-name" \| "cc-number" \| "cc-type" \| "country" \| "country-name" \| "current-password" \| "family-name" \| "given-name" \| "honorific-prefix" \| "honorific-suffix" \| "new-password" \| "one-time-code" \| "organization" \| "postal-code" \| "street-address" \| "transaction-amount" \| "transaction-currency" \| "username" \| "email" \| "tel" \| "tel-area-code" \| "tel-country-code" \| "tel-extension" \| "tel-local" \| "tel-local-prefix" \| "tel-local-suffix" \| "tel-national" \| "home email" \| "home tel" \| "home tel-area-code" \| "home tel-country-code" \| "home tel-extension" \| "home tel-local" \| "home tel-local-prefix" \| "home tel-local-suffix" \| "home tel-national" \| "mobile email" \| "mobile tel" \| "mobile tel-area-code" \| "mobile tel-country-code" \| "mobile tel-extension" \| "mobile tel-local" \| "mobile tel-local-prefix" \| "mobile tel-local-suffix" \| "mobile tel-national" \| "work email" \| "work tel" \| "work tel-area-code" \| "work tel-country-code" \| "work tel-extension" \| "work tel-local" \| "work tel-local-prefix" \| "work tel-local-suffix" \| "work tel-national" \| "name webauthn" \| "additional-name webauthn" \| "address-level1 webauthn" \| "address-level2 webauthn" \| "address-level3 webauthn" \| "address-level4 webauthn" \| "address-line1 webauthn" \| "address-line2 webauthn" \| "address-line3 webauthn" \| "bday-day webauthn" \| "bday-month webauthn" \| "bday-year webauthn" \| "cc-csc webauthn" \| "cc-exp webauthn" \| "cc-exp-month webauthn" \| "cc-exp-year webauthn" \| "cc-family-name webauthn" \| "cc-given-name webauthn" \| "cc-name webauthn" \| "cc-number webauthn" \| "cc-type webauthn" \| "country webauthn" \| "country-name webauthn" \| "current-password webauthn" \| "family-name webauthn" \| "given-name webauthn" \| "honorific-prefix webauthn" \| "honorific-suffix webauthn" \| "new-password webauthn" \| "one-time-code webauthn" \| "organization webauthn" \| "postal-code webauthn" \| "street-address webauthn" \| "transaction-amount webauthn" \| "transaction-currency webauthn" \| "username webauthn" \| "email webauthn" \| "tel webauthn" \| "tel-area-code webauthn" \| "tel-country-code webauthn" \| "tel-extension webauthn" \| "tel-local webauthn" \| "tel-local-prefix webauthn" \| "tel-local-suffix webauthn" \| "tel-national webauthn" \| "home email webauthn" \| "home tel webauthn" \| "home tel-area-code webauthn" \| "home tel-country-code webauthn" \| "home tel-extension webauthn" \| "home tel-local webauthn" \| "home tel-local-prefix webauthn" \| "home tel-local-suffix webauthn" \| "home tel-national webauthn" \| "mobile email webauthn" \| "mobile tel webauthn" \| "mobile tel-area-code webauthn" \| "mobile tel-country-code webauthn" \| "mobile tel-extension webauthn" \| "mobile tel-local webauthn" \| "mobile tel-local-prefix webauthn" \| "mobile tel-local-suffix webauthn" \| "mobile tel-national webauthn" \| "work email webauthn" \| "work tel webauthn" \| "work tel-area-code webauthn" \| "work tel-country-code webauthn" \| "work tel-extension webauthn" \| "work tel-local webauthn" \| "work tel-local-prefix webauthn" \| "work tel-local-suffix webauthn" \| "work tel-national webauthn" \| "billing name" \| "billing name webauthn" \| "billing additional-name" \| "billing additional-name webauthn" \| "billing address-level1" \| "billing address-level1 webauthn" \| "billing address-level2" \| "billing address-level2 webauthn" \| "billing address-level3" \| "billing address-level3 webauthn" \| "billing address-level4" \| "billing address-level4 webauthn" \| "billing address-line1" \| "billing address-line1 webauthn" \| "billing address-line2" \| "billing address-line2 webauthn" \| "billing address-line3" \| "billing address-line3 webauthn" \| "billing bday-day" \| "billing bday-day webauthn" \| "billing bday-month" \| "billing bday-month webauthn" \| "billing bday-year" \| "billing bday-year webauthn" \| "billing cc-csc" \| "billing cc-csc webauthn" \| "billing cc-exp" \| "billing cc-exp webauthn" \| "billing cc-exp-month" \| "billing cc-exp-month webauthn" \| "billing cc-exp-year" \| "billing cc-exp-year webauthn" \| "billing cc-family-name" \| "billing cc-family-name webauthn" \| "billing cc-given-name" \| "billing cc-given-name webauthn" \| "billing cc-name" \| "billing cc-name webauthn" \| "billing cc-number" \| "billing cc-number webauthn" \| "billing cc-type" \| "billing cc-type webauthn" \| "billing country" \| "billing country webauthn" \| "billing country-name" \| "billing country-name webauthn" \| "billing current-password" \| "billing current-password webauthn" \| "billing family-name" \| "billing family-name webauthn" \| "billing given-name" \| "billing given-name webauthn" \| "billing honorific-prefix" \| "billing honorific-prefix webauthn" \| "billing honorific-suffix" \| "billing honorific-suffix webauthn" \| "billing new-password" \| "billing new-password webauthn" \| "billing one-time-code" \| "billing one-time-code webauthn" \| "billing organization" \| "billing organization webauthn" \| "billing postal-code" \| "billing postal-code webauthn" \| "billing street-address" \| "billing street-address webauthn" \| "billing transaction-amount" \| "billing transaction-amount webauthn" \| "billing transaction-currency" \| "billing transaction-currency webauthn" \| "billing username" \| "billing username webauthn" \| "billing email" \| "billing email webauthn" \| "billing tel" \| "billing tel webauthn" \| "billing tel-area-code" \| "billing tel-area-code webauthn" \| "billing tel-country-code" \| "billing tel-country-code webauthn" \| "billing tel-extension" \| "billing tel-extension webauthn" \| "billing tel-local" \| "billing tel-local webauthn" \| "billing tel-local-prefix" \| "billing tel-local-prefix webauthn" \| "billing tel-local-suffix" \| "billing tel-local-suffix webauthn" \| "billing tel-national" \| "billing tel-national webauthn" \| "billing home email" \| "billing home email webauthn" \| "billing home tel" \| "billing home tel webauthn" \| "billing home tel-area-code" \| "billing home tel-area-code webauthn" \| "billing home tel-country-code" \| "billing home tel-country-code webauthn" \| "billing home tel-extension" \| "billing home tel-extension webauthn" \| "billing home tel-local" \| "billing home tel-local webauthn" \| "billing home tel-local-prefix" \| "billing home tel-local-prefix webauthn" \| "billing home tel-local-suffix" \| "billing home tel-local-suffix webauthn" \| "billing home tel-national" \| "billing home tel-national webauthn" \| "billing mobile email" \| "billing mobile email webauthn" \| "billing mobile tel" \| "billing mobile tel webauthn" \| "billing mobile tel-area-code" \| "billing mobile tel-area-code webauthn" \| "billing mobile tel-country-code" \| "billing mobile tel-country-code webauthn" \| "billing mobile tel-extension" \| "billing mobile tel-extension webauthn" \| "billing mobile tel-local" \| "billing mobile tel-local webauthn" \| "billing mobile tel-local-prefix" \| "billing mobile tel-local-prefix webauthn" \| "billing mobile tel-local-suffix" \| "billing mobile tel-local-suffix webauthn" \| "billing mobile tel-national" \| "billing mobile tel-national webauthn" \| "billing work email" \| "billing work email webauthn" \| "billing work tel" \| "billing work tel webauthn" \| "billing work tel-area-code" \| "billing work tel-area-code webauthn" \| "billing work tel-country-code" \| "billing work tel-country-code webauthn" \| "billing work tel-extension" \| "billing work tel-extension webauthn" \| "billing work tel-local" \| "billing work tel-local webauthn" \| "billing work tel-local-prefix" \| "billing work tel-local-prefix webauthn" \| "billing work tel-local-suffix" \| "billing work tel-local-suffix webauthn" \| "billing work tel-national" \| "billing work tel-national webauthn" \| "shipping name" \| "shipping name webauthn" \| "shipping additional-name" \| "shipping additional-name webauthn" \| "shipping address-level1" \| "shipping address-level1 webauthn" \| "shipping address-level2" \| "shipping address-level2 webauthn" \| "shipping address-level3" \| "shipping address-level3 webauthn" \| "shipping address-level4" \| "shipping address-level4 webauthn" \| "shipping address-line1" \| "shipping address-line1 webauthn" \| "shipping address-line2" \| "shipping address-line2 webauthn" \| "shipping address-line3" \| "shipping address-line3 webauthn" \| "shipping bday-day" \| "shipping bday-day webauthn" \| "shipping bday-month" \| "shipping bday-month webauthn" \| "shipping bday-year" \| "shipping bday-year webauthn" \| "shipping cc-csc" \| "shipping cc-csc webauthn" \| "shipping cc-exp" \| "shipping cc-exp webauthn" \| "shipping cc-exp-month" \| "shipping cc-exp-month webauthn" \| "shipping cc-exp-year" \| "shipping cc-exp-year webauthn" \| "shipping cc-family-name" \| "shipping cc-family-name webauthn" \| "shipping cc-given-name" \| "shipping cc-given-name webauthn" \| "shipping cc-name" \| "shipping cc-name webauthn" \| "shipping cc-number" \| "shipping cc-number webauthn" \| "shipping cc-type" \| "shipping cc-type webauthn" \| "shipping country" \| "shipping country webauthn" \| "shipping country-name" \| "shipping country-name webauthn" \| "shipping current-password" \| "shipping current-password webauthn" \| "shipping family-name" \| "shipping family-name webauthn" \| "shipping given-name" \| "shipping given-name webauthn" \| "shipping honorific-prefix" \| "shipping honorific-prefix webauthn" \| "shipping honorific-suffix" \| "shipping honorific-suffix webauthn" \| "shipping new-password" \| "shipping new-password webauthn" \| "shipping one-time-code" \| "shipping one-time-code webauthn" \| "shipping organization" \| "shipping organization webauthn" \| "shipping postal-code" \| "shipping postal-code webauthn" \| "shipping street-address" \| "shipping street-address webauthn" \| "shipping transaction-amount" \| "shipping transaction-amount webauthn" \| "shipping transaction-currency" \| "shipping transaction-currency webauthn" \| "shipping username" \| "shipping username webauthn" \| "shipping email" \| "shipping email webauthn" \| "shipping tel" \| "shipping tel webauthn" \| "shipping tel-area-code" \| "shipping tel-area-code webauthn" \| "shipping tel-country-code" \| "shipping tel-country-code webauthn" \| "shipping tel-extension" \| "shipping tel-extension webauthn" \| "shipping tel-local" \| "shipping tel-local webauthn" \| "shipping tel-local-prefix" \| "shipping tel-local-prefix webauthn" \| "shipping tel-local-suffix" \| "shipping tel-local-suffix webauthn" \| "shipping tel-national" \| "shipping tel-national webauthn" \| "shipping home email" \| "shipping home email webauthn" \| "shipping home tel" \| "shipping home tel webauthn" \| "shipping home tel-area-code" \| "shipping home tel-area-code webauthn" \| "shipping home tel-country-code" \| "shipping home tel-country-code webauthn" \| "shipping home tel-extension" \| "shipping home tel-extension webauthn" \| "shipping home tel-local" \| "shipping home tel-local webauthn" \| "shipping home tel-local-prefix" \| "shipping home tel-local-prefix webauthn" \| "shipping home tel-local-suffix" \| "shipping home tel-local-suffix webauthn" \| "shipping home tel-national" \| "shipping home tel-national webauthn" \| "shipping mobile email" \| "shipping mobile email webauthn" \| "shipping mobile tel" \| "shipping mobile tel webauthn" \| "shipping mobile tel-area-code" \| "shipping mobile tel-area-code webauthn" \| "shipping mobile tel-country-code" \| "shipping mobile tel-country-code webauthn" \| "shipping mobile tel-extension" \| "shipping mobile tel-extension webauthn" \| "shipping mobile tel-local" \| "shipping mobile tel-local webauthn" \| "shipping mobile tel-local-prefix" \| "shipping mobile tel-local-prefix webauthn" \| "shipping mobile tel-local-suffix" \| "shipping mobile tel-local-suffix webauthn" \| "shipping mobile tel-national" \| "shipping mobile tel-national webauthn" \| "shipping work email" \| "shipping work email webauthn" \| "shipping work tel" \| "shipping work tel webauthn" \| "shipping work tel-area-code" \| "shipping work tel-area-code webauthn" \| "shipping work tel-country-code" \| "shipping work tel-country-code webauthn" \| "shipping work tel-extension" \| "shipping work tel-extension webauthn" \| "shipping work tel-local" \| "shipping work tel-local webauthn" \| "shipping work tel-local-prefix" \| "shipping work tel-local-prefix webauthn" \| "shipping work tel-local-suffix" \| "shipping work tel-local-suffix webauthn" \| "shipping work tel-national" \| "shipping work tel-national webauthn" \| `section-${string} name` \| `section-${string} name webauthn` \| `section-${string} additional-name` \| `section-${string} additional-name webauthn` \| `section-${string} address-level1` \| `section-${string} address-level1 webauthn` \| `section-${string} address-level2` \| `section-${string} address-level2 webauthn` \| `section-${string} address-level3` \| `section-${string} address-level3 webauthn` \| `section-${string} address-level4` \| `section-${string} address-level4 webauthn` \| `section-${string} address-line1` \| `section-${string} address-line1 webauthn` \| `section-${string} address-line2` \| `section-${string} address-line2 webauthn` \| `section-${string} address-line3` \| `section-${string} address-line3 webauthn` \| `section-${string} bday-day` \| `section-${string} bday-day webauthn` \| `section-${string} bday-month` \| `section-${string} bday-month webauthn` \| `section-${string} bday-year` \| `section-${string} bday-year webauthn` \| `section-${string} cc-csc` \| `section-${string} cc-csc webauthn` \| `section-${string} cc-exp` \| `section-${string} cc-exp webauthn` \| `section-${string} cc-exp-month` \| `section-${string} cc-exp-month webauthn` \| `section-${string} cc-exp-year` \| `section-${string} cc-exp-year webauthn` \| `section-${string} cc-family-name` \| `section-${string} cc-family-name webauthn` \| `section-${string} cc-given-name` \| `section-${string} cc-given-name webauthn` \| `section-${string} cc-name` \| `section-${string} cc-name webauthn` \| `section-${string} cc-number` \| `section-${string} cc-number webauthn` \| `section-${string} cc-type` \| `section-${string} cc-type webauthn` \| `section-${string} country` \| `section-${string} country webauthn` \| `section-${string} country-name` \| `section-${string} country-name webauthn` \| `section-${string} current-password` \| `section-${string} current-password webauthn` \| `section-${string} family-name` \| `section-${string} family-name webauthn` \| `section-${string} given-name` \| `section-${string} given-name webauthn` \| `section-${string} honorific-prefix` \| `section-${string} honorific-prefix webauthn` \| `section-${string} honorific-suffix` \| `section-${string} honorific-suffix webauthn` \| `section-${string} new-password` \| `section-${string} new-password webauthn` \| `section-${string} one-time-code` \| `section-${string} one-time-code webauthn` \| `section-${string} organization` \| `section-${string} organization webauthn` \| `section-${string} postal-code` \| `section-${string} postal-code webauthn` \| `section-${string} street-address` \| `section-${string} street-address webauthn` \| `section-${string} transaction-amount` \| `section-${string} transaction-amount webauthn` \| `section-${string} transaction-currency` \| `section-${string} transaction-currency webauthn` \| `section-${string} username` \| `section-${string} username webauthn` \| `section-${string} email` \| `section-${string} email webauthn` \| `section-${string} tel` \| `section-${string} tel webauthn` \| `section-${string} tel-area-code` \| `section-${string} tel-area-code webauthn` \| `section-${string} tel-country-code` \| `section-${string} tel-country-code webauthn` \| `section-${string} tel-extension` \| `section-${string} tel-extension webauthn` \| `section-${string} tel-local` \| `section-${string} tel-local webauthn` \| `section-${string} tel-local-prefix` \| `section-${string} tel-local-prefix webauthn` \| `section-${string} tel-local-suffix` \| `section-${string} tel-local-suffix webauthn` \| `section-${string} tel-national` \| `section-${string} tel-national webauthn` \| `section-${string} home email` \| `section-${string} home email webauthn` \| `section-${string} home tel` \| `section-${string} home tel webauthn` \| `section-${string} home tel-area-code` \| `section-${string} home tel-area-code webauthn` \| `section-${string} home tel-country-code` \| `section-${string} home tel-country-code webauthn` \| `section-${string} home tel-extension` \| `section-${string} home tel-extension webauthn` \| `section-${string} home tel-local` \| `section-${string} home tel-local webauthn` \| `section-${string} home tel-local-prefix` \| `section-${string} home tel-local-prefix webauthn` \| `section-${string} home tel-local-suffix` \| `section-${string} home tel-local-suffix webauthn` \| `section-${string} home tel-national` \| `section-${string} home tel-national webauthn` \| `section-${string} mobile email` \| `section-${string} mobile email webauthn` \| `section-${string} mobile tel` \| `section-${string} mobile tel webauthn` \| `section-${string} mobile tel-area-code` \| `section-${string} mobile tel-area-code webauthn` \| `section-${string} mobile tel-country-code` \| `section-${string} mobile tel-country-code webauthn` \| `section-${string} mobile tel-extension` \| `section-${string} mobile tel-extension webauthn` \| `section-${string} mobile tel-local` \| `section-${string} mobile tel-local webauthn` \| `section-${string} mobile tel-local-prefix` \| `section-${string} mobile tel-local-prefix webauthn` \| `section-${string} mobile tel-local-suffix` \| `section-${string} mobile tel-local-suffix webauthn` \| `section-${string} mobile tel-national` \| `section-${string} mobile tel-national webauthn` \| `section-${string} work email` \| `section-${string} work email webauthn` \| `section-${string} work tel` \| `section-${string} work tel webauthn` \| `section-${string} work tel-area-code` \| `section-${string} work tel-area-code webauthn` \| `section-${string} work tel-country-code` \| `section-${string} work tel-country-code webauthn` \| `section-${string} work tel-extension` \| `section-${string} work tel-extension webauthn` \| `section-${string} work tel-local` \| `section-${string} work tel-local webauthn` \| `section-${string} work tel-local-prefix` \| `section-${string} work tel-local-prefix webauthn` \| `section-${string} work tel-local-suffix` \| `section-${string} work tel-local-suffix webauthn` \| `section-${string} work tel-national` \| `section-${string} work tel-national webauthn` \| `section-${string} billing name` \| `section-${string} billing name webauthn` \| `section-${string} billing additional-name` \| `section-${string} billing additional-name webauthn` \| `section-${string} billing address-level1` \| `section-${string} billing address-level1 webauthn` \| `section-${string} billing address-level2` \| `section-${string} billing address-level2 webauthn` \| `section-${string} billing address-level3` \| `section-${string} billing address-level3 webauthn` \| `section-${string} billing address-level4` \| `section-${string} billing address-level4 webauthn` \| `section-${string} billing address-line1` \| `section-${string} billing address-line1 webauthn` \| `section-${string} billing address-line2` \| `section-${string} billing address-line2 webauthn` \| `section-${string} billing address-line3` \| `section-${string} billing address-line3 webauthn` \| `section-${string} billing bday-day` \| `section-${string} billing bday-day webauthn` \| `section-${string} billing bday-month` \| `section-${string} billing bday-month webauthn` \| `section-${string} billing bday-year` \| `section-${string} billing bday-year webauthn` \| `section-${string} billing cc-csc` \| `section-${string} billing cc-csc webauthn` \| `section-${string} billing cc-exp` \| `section-${string} billing cc-exp webauthn` \| `section-${string} billing cc-exp-month` \| `section-${string} billing cc-exp-month webauthn` \| `section-${string} billing cc-exp-year` \| `section-${string} billing cc-exp-year webauthn` \| `section-${string} billing cc-family-name` \| `section-${string} billing cc-family-name webauthn` \| `section-${string} billing cc-given-name` \| `section-${string} billing cc-given-name webauthn` \| `section-${string} billing cc-name` \| `section-${string} billing cc-name webauthn` \| `section-${string} billing cc-number` \| `section-${string} billing cc-number webauthn` \| `section-${string} billing cc-type` \| `section-${string} billing cc-type webauthn` \| `section-${string} billing country` \| `section-${string} billing country webauthn` \| `section-${string} billing country-name` \| `section-${string} billing country-name webauthn` \| `section-${string} billing current-password` \| `section-${string} billing current-password webauthn` \| `section-${string} billing family-name` \| `section-${string} billing family-name webauthn` \| `section-${string} billing given-name` \| `section-${string} billing given-name webauthn` \| `section-${string} billing honorific-prefix` \| `section-${string} billing honorific-prefix webauthn` \| `section-${string} billing honorific-suffix` \| `section-${string} billing honorific-suffix webauthn` \| `section-${string} billing new-password` \| `section-${string} billing new-password webauthn` \| `section-${string} billing one-time-code` \| `section-${string} billing one-time-code webauthn` \| `section-${string} billing organization` \| `section-${string} billing organization webauthn` \| `section-${string} billing postal-code` \| `section-${string} billing postal-code webauthn` \| `section-${string} billing street-address` \| `section-${string} billing street-address webauthn` \| `section-${string} billing transaction-amount` \| `section-${string} billing transaction-amount webauthn` \| `section-${string} billing transaction-currency` \| `section-${string} billing transaction-currency webauthn` \| `section-${string} billing username` \| `section-${string} billing username webauthn` \| `section-${string} billing email` \| `section-${string} billing email webauthn` \| `section-${string} billing tel` \| `section-${string} billing tel webauthn` \| `section-${string} billing tel-area-code` \| `section-${string} billing tel-area-code webauthn` \| `section-${string} billing tel-country-code` \| `section-${string} billing tel-country-code webauthn` \| `section-${string} billing tel-extension` \| `section-${string} billing tel-extension webauthn` \| `section-${string} billing tel-local` \| `section-${string} billing tel-local webauthn` \| `section-${string} billing tel-local-prefix` \| `section-${string} billing tel-local-prefix webauthn` \| `section-${string} billing tel-local-suffix` \| `section-${string} billing tel-local-suffix webauthn` \| `section-${string} billing tel-national` \| `section-${string} billing tel-national webauthn` \| `section-${string} billing home email` \| `section-${string} billing home email webauthn` \| `section-${string} billing home tel` \| `section-${string} billing home tel webauthn` \| `section-${string} billing home tel-area-code` \| `section-${string} billing home tel-area-code webauthn` \| `section-${string} billing home tel-country-code` \| `section-${string} billing home tel-country-code webauthn` \| `section-${string} billing home tel-extension` \| `section-${string} billing home tel-extension webauthn` \| `section-${string} billing home tel-local` \| `section-${string} billing home tel-local webauthn` \| `section-${string} billing home tel-local-prefix` \| `section-${string} billing home tel-local-prefix webauthn` \| `section-${string} billing home tel-local-suffix` \| `section-${string} billing home tel-local-suffix webauthn` \| `section-${string} billing home tel-national` \| `section-${string} billing home tel-national webauthn` \| `section-${string} billing mobile email` \| `section-${string} billing mobile email webauthn` \| `section-${string} billing mobile tel` \| `section-${string} billing mobile tel webauthn` \| `section-${string} billing mobile tel-area-code` \| `section-${string} billing mobile tel-area-code webauthn` \| `section-${string} billing mobile tel-country-code` \| `section-${string} billing mobile tel-country-code webauthn` \| `section-${string} billing mobile tel-extension` \| `section-${string} billing mobile tel-extension webauthn` \| `section-${string} billing mobile tel-local` \| `section-${string} billing mobile tel-local webauthn` \| `section-${string} billing mobile tel-local-prefix` \| `section-${string} billing mobile tel-local-prefix webauthn` \| `section-${string} billing mobile tel-local-suffix` \| `section-${string} billing mobile tel-local-suffix webauthn` \| `section-${string} billing mobile tel-national` \| `section-${string} billing mobile tel-national webauthn` \| `section-${string} billing work email` \| `section-${string} billing work email webauthn` \| `section-${string} billing work tel` \| `section-${string} billing work tel webauthn` \| `section-${string} billing work tel-area-code` \| `section-${string} billing work tel-area-code webauthn` \| `section-${string} billing work tel-country-code` \| `section-${string} billing work tel-country-code webauthn` \| `section-${string} billing work tel-extension` \| `section-${string} billing work tel-extension webauthn` \| `section-${string} billing work tel-local` \| `section-${string} billing work tel-local webauthn` \| `section-${string} billing work tel-local-prefix` \| `section-${string} billing work tel-local-prefix webauthn` \| `section-${string} billing work tel-local-suffix` \| `section-${string} billing work tel-local-suffix webauthn` \| `section-${string} billing work tel-national` \| `section-${string} billing work tel-national webauthn` \| `section-${string} shipping name` \| `section-${string} shipping name webauthn` \| `section-${string} shipping additional-name` \| `section-${string} shipping additional-name webauthn` \| `section-${string} shipping address-level1` \| `section-${string} shipping address-level1 webauthn` \| `section-${string} shipping address-level2` \| `section-${string} shipping address-level2 webauthn` \| `section-${string} shipping address-level3` \| `section-${string} shipping address-level3 webauthn` \| `section-${string} shipping address-level4` \| `section-${string} shipping address-level4 webauthn` \| `section-${string} shipping address-line1` \| `section-${string} shipping address-line1 webauthn` \| `section-${string} shipping address-line2` \| `section-${string} shipping address-line2 webauthn` \| `section-${string} shipping address-line3` \| `section-${string} shipping address-line3 webauthn` \| `section-${string} shipping bday-day` \| `section-${string} shipping bday-day webauthn` \| `section-${string} shipping bday-month` \| `section-${string} shipping bday-month webauthn` \| `section-${string} shipping bday-year` \| `section-${string} shipping bday-year webauthn` \| `section-${string} shipping cc-csc` \| `section-${string} shipping cc-csc webauthn` \| `section-${string} shipping cc-exp` \| `section-${string} shipping cc-exp webauthn` \| `section-${string} shipping cc-exp-month` \| `section-${string} shipping cc-exp-month webauthn` \| `section-${string} shipping cc-exp-year` \| `section-${string} shipping cc-exp-year webauthn` \| `section-${string} shipping cc-family-name` \| `section-${string} shipping cc-family-name webauthn` \| `section-${string} shipping cc-given-name` \| `section-${string} shipping cc-given-name webauthn` \| `section-${string} shipping cc-name` \| `section-${string} shipping cc-name webauthn` \| `section-${string} shipping cc-number` \| `section-${string} shipping cc-number webauthn` \| `section-${string} shipping cc-type` \| `section-${string} shipping cc-type webauthn` \| `section-${string} shipping country` \| `section-${string} shipping country webauthn` \| `section-${string} shipping country-name` \| `section-${string} shipping country-name webauthn` \| `section-${string} shipping current-password` \| `section-${string} shipping current-password webauthn` \| `section-${string} shipping family-name` \| `section-${string} shipping family-name webauthn` \| `section-${string} shipping given-name` \| `section-${string} shipping given-name webauthn` \| `section-${string} shipping honorific-prefix` \| `section-${string} shipping honorific-prefix webauthn` \| `section-${string} shipping honorific-suffix` \| `section-${string} shipping honorific-suffix webauthn` \| `section-${string} shipping new-password` \| `section-${string} shipping new-password webauthn` \| `section-${string} shipping one-time-code` \| `section-${string} shipping one-time-code webauthn` \| `section-${string} shipping organization` \| `section-${string} shipping organization webauthn` \| `section-${string} shipping postal-code` \| `section-${string} shipping postal-code webauthn` \| `section-${string} shipping street-address` \| `section-${string} shipping street-address webauthn` \| `section-${string} shipping transaction-amount` \| `section-${string} shipping transaction-amount webauthn` \| `section-${string} shipping transaction-currency` \| `section-${string} shipping transaction-currency webauthn` \| `section-${string} shipping username` \| `section-${string} shipping username webauthn` \| `section-${string} shipping email` \| `section-${string} shipping email webauthn` \| `section-${string} shipping tel` \| `section-${string} shipping tel webauthn` \| `section-${string} shipping tel-area-code` \| `section-${string} shipping tel-area-code webauthn` \| `section-${string} shipping tel-country-code` \| `section-${string} shipping tel-country-code webauthn` \| `section-${string} shipping tel-extension` \| `section-${string} shipping tel-extension webauthn` \| `section-${string} shipping tel-local` \| `section-${string} shipping tel-local webauthn` \| `section-${string} shipping tel-local-prefix` \| `section-${string} shipping tel-local-prefix webauthn` \| `section-${string} shipping tel-local-suffix` \| `section-${string} shipping tel-local-suffix webauthn` \| `section-${string} shipping tel-national` \| `section-${string} shipping tel-national webauthn` \| `section-${string} shipping home email` \| `section-${string} shipping home email webauthn` \| `section-${string} shipping home tel` \| `section-${string} shipping home tel webauthn` \| `section-${string} shipping home tel-area-code` \| `section-${string} shipping home tel-area-code webauthn` \| `section-${string} shipping home tel-country-code` \| `section-${string} shipping home tel-country-code webauthn` \| `section-${string} shipping home tel-extension` \| `section-${string} shipping home tel-extension webauthn` \| `section-${string} shipping home tel-local` \| `section-${string} shipping home tel-local webauthn` \| `section-${string} shipping home tel-local-prefix` \| `section-${string} shipping home tel-local-prefix webauthn` \| `section-${string} shipping home tel-local-suffix` \| `section-${string} shipping home tel-local-suffix webauthn` \| `section-${string} shipping home tel-national` \| `section-${string} shipping home tel-national webauthn` \| `section-${string} shipping mobile email` \| `section-${string} shipping mobile email webauthn` \| `section-${string} shipping mobile tel` \| `section-${string} shipping mobile tel webauthn` \| `section-${string} shipping mobile tel-area-code` \| `section-${string} shipping mobile tel-area-code webauthn` \| `section-${string} shipping mobile tel-country-code` \| `section-${string} shipping mobile tel-country-code webauthn` \| `section-${string} shipping mobile tel-extension` \| `section-${string} shipping mobile tel-extension webauthn` \| `section-${string} shipping mobile tel-local` \| `section-${string} shipping mobile tel-local webauthn` \| `section-${string} shipping mobile tel-local-prefix` \| `section-${string} shipping mobile tel-local-prefix webauthn` \| `section-${string} shipping mobile tel-local-suffix` \| `section-${string} shipping mobile tel-local-suffix webauthn` \| `section-${string} shipping mobile tel-national` \| `section-${string} shipping mobile tel-national webauthn` \| `section-${string} shipping work email` \| `section-${string} shipping work email webauthn` \| `section-${string} shipping work tel` \| `section-${string} shipping work tel webauthn` \| `section-${string} shipping work tel-area-code` \| `section-${string} shipping work tel-area-code webauthn` \| `section-${string} shipping work tel-country-code` \| `section-${string} shipping work tel-country-code webauthn` \| `section-${string} shipping work tel-extension` \| `section-${string} shipping work tel-extension webauthn` \| `section-${string} shipping work tel-local` \| `section-${string} shipping work tel-local webauthn` \| `section-${string} shipping work tel-local-prefix` \| `section-${string} shipping work tel-local-prefix webauthn` \| `section-${string} shipping work tel-local-suffix` \| `section-${string} shipping work tel-local-suffix webauthn` \| `section-${string} shipping work tel-national` \| `section-${string} shipping work tel-national webauthn` \| string & {}
`list`		`string`
`ui`		`{ root?: ClassNameValue; base?: ClassNameValue; increment?: ClassNameValue; decrement?: ClassNameValue; }`

This component also supports all native <input> HTML attributes.

Slots

Slot	Type
`increment`	`{}`
`decrement`	`{}`

Emits

Event	Type
`update:modelValue`	`[value: T]`
`blur`	`[event: FocusEvent]`
`change`	`[event: Event]`

Expose

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

Name	Type
`inputRef`	`Ref<HTMLInputElement \| null>`

Theme

app.config.ts

export default defineAppConfig({
  ui: {
    inputNumber: {
      slots: {
        root: 'relative inline-flex items-center',
        base: [
          'w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75',
          'transition-colors'
        ],
        increment: 'absolute flex items-center',
        decrement: 'absolute flex items-center'
      },
      variants: {
        fieldGroup: {
          horizontal: {
            root: 'group has-focus-visible:z-[1]',
            base: 'group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none'
          },
          vertical: {
            root: 'group has-focus-visible:z-[1]',
            base: 'group-not-only:group-first:rounded-b-none group-not-only:group-last:rounded-t-none group-not-last:group-not-first:rounded-none'
          }
        },
        color: {
          primary: '',
          secondary: '',
          success: '',
          info: '',
          warning: '',
          error: '',
          neutral: ''
        },
        size: {
          xs: 'px-2 py-1 text-xs gap-1',
          sm: 'px-2.5 py-1.5 text-xs gap-1.5',
          md: 'px-2.5 py-1.5 text-sm gap-1.5',
          lg: 'px-3 py-2 text-sm gap-2',
          xl: 'px-3 py-2 text-base gap-2'
        },
        variant: {
          outline: 'text-highlighted bg-default ring ring-inset ring-accented',
          soft: 'text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50',
          subtle: 'text-highlighted bg-elevated ring ring-inset ring-accented',
          ghost: 'text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent',
          none: 'text-highlighted bg-transparent'
        },
        disabled: {
          true: {
            increment: 'opacity-75 cursor-not-allowed',
            decrement: 'opacity-75 cursor-not-allowed'
          }
        },
        orientation: {
          horizontal: {
            base: 'text-center',
            increment: 'inset-y-0 end-0 pe-1',
            decrement: 'inset-y-0 start-0 ps-1'
          },
          vertical: {
            increment: 'top-0 end-0 pe-1 [&>button]:py-0 scale-80',
            decrement: 'bottom-0 end-0 pe-1 [&>button]:py-0 scale-80'
          }
        },
        highlight: {
          true: ''
        },
        increment: {
          false: ''
        },
        decrement: {
          false: ''
        }
      },
      compoundVariants: [
        {
          color: 'primary',
          variant: [
            'outline',
            'subtle'
          ],
          class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary'
        },
        {
          color: 'primary',
          highlight: true,
          class: 'ring ring-inset ring-primary'
        },
        {
          color: 'neutral',
          variant: [
            'outline',
            'subtle'
          ],
          class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted'
        },
        {
          color: 'neutral',
          highlight: true,
          class: 'ring ring-inset ring-inverted'
        },
        {
          orientation: 'horizontal',
          decrement: false,
          class: 'text-start'
        },
        {
          decrement: true,
          size: 'xs',
          class: 'ps-7'
        },
        {
          decrement: true,
          size: 'sm',
          class: 'ps-8'
        },
        {
          decrement: true,
          size: 'md',
          class: 'ps-9'
        },
        {
          decrement: true,
          size: 'lg',
          class: 'ps-10'
        },
        {
          decrement: true,
          size: 'xl',
          class: 'ps-11'
        },
        {
          increment: true,
          size: 'xs',
          class: 'pe-7'
        },
        {
          increment: true,
          size: 'sm',
          class: 'pe-8'
        },
        {
          increment: true,
          size: 'md',
          class: 'pe-9'
        },
        {
          increment: true,
          size: 'lg',
          class: 'pe-10'
        },
        {
          increment: true,
          size: 'xl',
          class: 'pe-11'
        }
      ],
      defaultVariants: {
        size: 'md',
        color: 'primary',
        variant: 'outline'
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        inputNumber: {
          slots: {
            root: 'relative inline-flex items-center',
            base: [
              'w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75',
              'transition-colors'
            ],
            increment: 'absolute flex items-center',
            decrement: 'absolute flex items-center'
          },
          variants: {
            fieldGroup: {
              horizontal: {
                root: 'group has-focus-visible:z-[1]',
                base: 'group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none'
              },
              vertical: {
                root: 'group has-focus-visible:z-[1]',
                base: 'group-not-only:group-first:rounded-b-none group-not-only:group-last:rounded-t-none group-not-last:group-not-first:rounded-none'
              }
            },
            color: {
              primary: '',
              secondary: '',
              success: '',
              info: '',
              warning: '',
              error: '',
              neutral: ''
            },
            size: {
              xs: 'px-2 py-1 text-xs gap-1',
              sm: 'px-2.5 py-1.5 text-xs gap-1.5',
              md: 'px-2.5 py-1.5 text-sm gap-1.5',
              lg: 'px-3 py-2 text-sm gap-2',
              xl: 'px-3 py-2 text-base gap-2'
            },
            variant: {
              outline: 'text-highlighted bg-default ring ring-inset ring-accented',
              soft: 'text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50',
              subtle: 'text-highlighted bg-elevated ring ring-inset ring-accented',
              ghost: 'text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent',
              none: 'text-highlighted bg-transparent'
            },
            disabled: {
              true: {
                increment: 'opacity-75 cursor-not-allowed',
                decrement: 'opacity-75 cursor-not-allowed'
              }
            },
            orientation: {
              horizontal: {
                base: 'text-center',
                increment: 'inset-y-0 end-0 pe-1',
                decrement: 'inset-y-0 start-0 ps-1'
              },
              vertical: {
                increment: 'top-0 end-0 pe-1 [&>button]:py-0 scale-80',
                decrement: 'bottom-0 end-0 pe-1 [&>button]:py-0 scale-80'
              }
            },
            highlight: {
              true: ''
            },
            increment: {
              false: ''
            },
            decrement: {
              false: ''
            }
          },
          compoundVariants: [
            {
              color: 'primary',
              variant: [
                'outline',
                'subtle'
              ],
              class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary'
            },
            {
              color: 'primary',
              highlight: true,
              class: 'ring ring-inset ring-primary'
            },
            {
              color: 'neutral',
              variant: [
                'outline',
                'subtle'
              ],
              class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted'
            },
            {
              color: 'neutral',
              highlight: true,
              class: 'ring ring-inset ring-inverted'
            },
            {
              orientation: 'horizontal',
              decrement: false,
              class: 'text-start'
            },
            {
              decrement: true,
              size: 'xs',
              class: 'ps-7'
            },
            {
              decrement: true,
              size: 'sm',
              class: 'ps-8'
            },
            {
              decrement: true,
              size: 'md',
              class: 'ps-9'
            },
            {
              decrement: true,
              size: 'lg',
              class: 'ps-10'
            },
            {
              decrement: true,
              size: 'xl',
              class: 'ps-11'
            },
            {
              increment: true,
              size: 'xs',
              class: 'pe-7'
            },
            {
              increment: true,
              size: 'sm',
              class: 'pe-8'
            },
            {
              increment: true,
              size: 'md',
              class: 'pe-9'
            },
            {
              increment: true,
              size: 'lg',
              class: 'pe-10'
            },
            {
              increment: true,
              size: 'xl',
              class: 'pe-11'
            }
          ],
          defaultVariants: {
            size: 'md',
            color: 'primary',
            variant: 'outline'
          }
        }
      }
    })
  ]
})

Some colors in compoundVariants are omitted for readability. Check out the source code on GitHub.

Changelog

55646 — feat: add valueKey prop (#5905)

184ea — chore: reduce type verbosity by omitting link props from action buttons

dd81d — feat: add data-slot attributes (#5447)

a6efa — fix: remove locale / dir props proxy (#5432)

fda3c — fix: clean html attributes extend

5b177 — feat: extend native HTML attributes (#5348)

fce2d — fix!: consistent exposed refs (#5385)

5c347 — fix: make modelModifiers generic (#5361)

18589 — feat: handle increment / decrement as booleans (#4805)

11a03 — fix: dot notation type support for labelKey and valueKey (#4933)

83b03 — feat!: rename nullify modifier to nullable and add optional (#4838)

7133f — fix: broken types for update:model-value event (#4853)

61b60 — feat: allow passing a component instead of a name (#4766)

a0963 — feat!: rename from ButtonGroup (#4596)

5cb65 — feat: import @nuxt/ui-pro components

ee484 — chore: update dependency reka-ui to v2.4.1 (v3) (#4586)

6f2ce — refactor: unite syntax for emits declaration (#4512)

f7613 — chore: update dependency reka-ui to ^2.3.0 (v3) (#4234)

2e4c3 — fix: handle inside button group

c7fba — feat: add increment-disabled / decrement-disabled props (#4141)

e6e51 — fix: class should have priority over ui prop

d49e0 — feat: define neutral utilities (#3629)

f9737 — feat: dynamic rounded-* utilities (#3906)

39c86 — fix: refactor types after @nuxt/module-builder upgrade (#3855)

4d817 — chore: clean functions order

f5e62 — feat: add support for stepSnapping & disableWheelChange props (#3731)

InputMenu

An autocomplete input with real-time suggestions.

InputTags

An input element that displays interactive tags.