InputNumber

NumberFieldサイトマップ
カスタマイズ可能な範囲を持つ数値の入力。

使用法

InputNumberの値を制御するにはv-modelディレクティブを使用します。

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

<template>
  <UInputNumber v-model="value" />
</template>
<script setup lang="ts">
import { ref } from 'vue'

const value = ref(5)
</script>

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

状態を制御する必要がない場合は、default-valueプロパティを使用して初期値を設定します。

<template>
  <UInputNumber :default-value="5" />
</template>
このコンポーネントは@internationalized/numberパッケージに依存しています。

Min/Max

minとmaxプロパティを使用して、InputNumberの最小値と最大値を設定します。

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

<template>
  <UInputNumber v-model="value" :min="0" :max="10" />
</template>
<script setup lang="ts">
import { ref } from 'vue'

const value = ref(5)
</script>

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

Step

stepプロパティを使用して、InputNumberのステップ値を設定します。

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

<template>
  <UInputNumber v-model="value" :step="2" />
</template>
<script setup lang="ts">
import { ref } from 'vue'

const value = ref(5)
</script>

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

Orientation

orientationプロパティを使用して、InputNumberの向きを変更します。

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

<template>
  <UInputNumber v-model="value" orientation="vertical" />
</template>
<script setup lang="ts">
import { ref } from 'vue'

const value = ref(5)
</script>

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

Placeholder

placeholderプロパティを使用してプレースホルダーテキストを設定します。

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

Color

InputNumberにフォーカスしたときにリングの色を変更するには、colorプロパティを使用します。

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

<template>
  <UInputNumber v-model="value" color="neutral" highlight />
</template>
<script setup lang="ts">
import { ref } from 'vue'

const value = ref(5)
</script>

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

Variant

variantプロパティを使用して、InputNumberのバリアントを変更します。

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

<template>
  <UInputNumber v-model="value" variant="subtle" color="neutral" />
</template>
<script setup lang="ts">
import { ref } from 'vue'

const value = ref(5)
</script>

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

サイズ

sizeプロパティを使用して、InputNumberのサイズを変更します。

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

<template>
  <UInputNumber v-model="value" size="xl" />
</template>
<script setup lang="ts">
import { ref } from 'vue'

const value = ref(5)
</script>

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

無効

disabledプロパティを使用してInputNumberを無効にします。

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

<template>
  <UInputNumber v-model="value" disabled />
</template>
<script setup lang="ts">
import { ref } from 'vue'

const value = ref(5)
</script>

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

Increment/Decrement

Button propsでインクリメント/デクリメントボタンをカスタマイズするには、incrementとdecrement propsを使用します。デフォルトは{ variant: 'link' }xph18xです。

<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>
<script setup lang="ts">
import { ref } from 'vue'

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アイコン

increment-iconとdecrement-iconプロップを使用して、ボタンIconをカスタマイズします。デフォルトはi-lucide-plus/i-lucide-minusです。

<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>
<script setup lang="ts">
import { ref } from 'vue'

const value = ref(5)
</script>

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

例

10進数形式

format-optionsプロパティを使用して、値のフォーマットをカスタマイズします。

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

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

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

const value = ref(5)
</script>

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

パーセンテージ形式

値のフォーマットをカスタマイズするには、format-optionsプロパティをstyle: 'percent'とともに使用します。

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

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

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

const value = ref(0.05)
</script>

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

通貨フォーマット付き

値のフォーマットをカスタマイズするには、style: 'currency'とともにformat-optionsプロパティを使用します。

<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>

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

const value = ref(1500)
</script>

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

ボタンなし

incrementとdecrementの小道具を使用して、ボタンの表示を制御できます。

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

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

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

const value = ref(5)
</script>

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

FormField内

FormFieldコンポーネント内のInputNumberを使用して、ラベル、ヘルプテキスト、必須インジケータなどを表示できます。

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>

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

const retries = ref(0)
</script>

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

スロット付き

#incrementおよび#decrementスロットを使用してボタンをカスタマイズします。

<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>

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

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.

fixed
boolean

Keep the mobile text size on all breakpoints.

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
defaultValue
NonNullable<T>
modelValue
T | Mod extends { optional: true; } ? undefined : never
modelModifiers
Mod
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.

focusOnChange
boolean

When true, the input will be focused when the value changes.

locale
string

The locale to use for formatting and currencies

list
string
autocomplete
"on" | "off" | string
ui
{ root?: SlotClass; base?: SlotClass; increment?: SlotClass; decrement?: SlotClass; }
このコンポーネントはすべてのネイティブ<input> HTML属性もサポートします。

スロット

Slot Type
increment
{}
decrement
{}

Emits

Event Type
update:modelValue
[value: ApplyModifiers<T, Mod>]
blur
[event: FocusEvent]
change
[event: Event]

Expose

テンプレート参照を介してコンポーネントにアクセスする場合、以下を使用できます：

名前タイプ
inputRefRef<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 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-sm/4 gap-1',
          sm: 'px-2.5 py-1.5 text-sm/4 gap-1.5',
          md: 'px-2.5 py-1.5 text-base/5 gap-1.5',
          lg: 'px-3 py-2 text-base/5 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 focus:outline-none'
        },
        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: ''
        },
        fixed: {
          false: ''
        },
        increment: {
          false: ''
        },
        decrement: {
          false: ''
        }
      },
      compoundVariants: [
        {
          color: 'primary',
          variant: [
            'outline',
            'subtle'
          ],
          class: 'outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary'
        },
        {
          color: 'primary',
          variant: [
            'soft',
            'ghost'
          ],
          class: 'outline-primary/25 focus-visible:outline-3'
        },
        {
          color: 'primary',
          highlight: true,
          class: 'ring ring-inset ring-primary'
        },
        {
          color: 'neutral',
          variant: [
            'outline',
            'subtle'
          ],
          class: 'outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted'
        },
        {
          color: 'neutral',
          variant: [
            'soft',
            'ghost'
          ],
          class: 'outline-inverted/25 focus-visible:outline-3'
        },
        {
          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'
        },
        {
          fixed: false,
          size: 'xs',
          class: 'md:text-xs'
        },
        {
          fixed: false,
          size: 'sm',
          class: 'md:text-xs'
        },
        {
          fixed: false,
          size: 'md',
          class: 'md:text-sm'
        },
        {
          fixed: false,
          size: 'lg',
          class: 'md:text-sm'
        }
      ],
      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 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-sm/4 gap-1',
              sm: 'px-2.5 py-1.5 text-sm/4 gap-1.5',
              md: 'px-2.5 py-1.5 text-base/5 gap-1.5',
              lg: 'px-3 py-2 text-base/5 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 focus:outline-none'
            },
            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: ''
            },
            fixed: {
              false: ''
            },
            increment: {
              false: ''
            },
            decrement: {
              false: ''
            }
          },
          compoundVariants: [
            {
              color: 'primary',
              variant: [
                'outline',
                'subtle'
              ],
              class: 'outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary'
            },
            {
              color: 'primary',
              variant: [
                'soft',
                'ghost'
              ],
              class: 'outline-primary/25 focus-visible:outline-3'
            },
            {
              color: 'primary',
              highlight: true,
              class: 'ring ring-inset ring-primary'
            },
            {
              color: 'neutral',
              variant: [
                'outline',
                'subtle'
              ],
              class: 'outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted'
            },
            {
              color: 'neutral',
              variant: [
                'soft',
                'ghost'
              ],
              class: 'outline-inverted/25 focus-visible:outline-3'
            },
            {
              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'
            },
            {
              fixed: false,
              size: 'xs',
              class: 'md:text-xs'
            },
            {
              fixed: false,
              size: 'sm',
              class: 'md:text-xs'
            },
            {
              fixed: false,
              size: 'md',
              class: 'md:text-sm'
            },
            {
              fixed: false,
              size: 'lg',
              class: 'md:text-sm'
            }
          ],
          defaultVariants: {
            size: 'md',
            color: 'primary',
            variant: 'outline'
          }
        }
      }
    })
  ]
})
Some colors in compoundVariants are omitted for readability. Check out the source code on GitHub.

Changelog

No recent changes

InputMenu

An autocomplete input with real-time suggestions.

InputRating

A component to display and collect ratings from users.