Radix Vue

外観

数値フィールド ​

アルファ
数値フィールドを使用すると、ユーザーは数値を入力し、ステッパーボタンを使用して値を増減できます。
vue
<script setup lang="ts">
import { NumberFieldDecrement, NumberFieldIncrement, NumberFieldInput, NumberFieldRoot } from 'radix-vue'
import { Icon } from '@iconify/vue'
</script>

<template>
  <NumberFieldRoot
    id="age"
    class="text-sm text-white"
    :min="0"
    :default-value="18"
  >
    <label for="age">Age</label>
    <div class="mt-1 flex items-center border bg-blackA7 border-blackA9 rounded-md">
      <NumberFieldDecrement class="p-2 disabled:opacity-20">
        <Icon icon="radix-icons:minus" />
      </NumberFieldDecrement>
      <NumberFieldInput class="bg-transparent w-20 tabular-nums focus:outline-0 p-1" />
      <NumberFieldIncrement class="p-2 disabled:opacity-20">
        <Icon icon="radix-icons:plus" />
      </NumberFieldIncrement>
    </div>
  </NumberFieldRoot>
</template>

機能 ​

  • 完全なキーボードナビゲーション。
  • 制御付きまたは制御なしで使用できます。
  • ボタンの長押しとホイールイベントをサポート。
  • さまざまなロケールの番号体系をサポート。
  • カスタマイズ可能なフォーマット。

インストール ​

numberパッケージをインストールします。

sh
$ npm add @internationalized/number

コマンドラインからコンポーネントをインストールします。

sh
$ npm add radix-vue

構成要素 ​

すべてのパーツをインポートして組み立てます。

vue
<script setup>
import { NumberFieldDecrement, NumberFieldIncrement, NumberFieldInput, NumberFieldRoot } from 'radix-vue'
</script>

<template>
  <NumberFieldRoot>
    <NumberFieldDecrement />
    <NumberFieldInput />
    <NumberFieldIncrement />
  </NumberFieldRoot>
</template>

APIリファレンス ​

ルート ​

数値フィールドのすべてのパーツを含みます。form内で使用すると、イベントが正しく伝播されるように、inputもレンダリングされます。

プロパティデフォルト型
as
'div'
AsTag | コンポーネント

このコンポーネントがレンダリングする要素またはコンポーネント。asChildで上書きできます。

asChild
boolean

子として渡された要素に対して、デフォルトでレンダリングされる要素を変更し、それらのプロパティと動作をマージします。

詳細については、コンポジションガイドをご覧ください。

defaultValue
number
disabled
boolean

trueの場合、ユーザーが数値フィールドを操作できなくなります。

formatOptions
NumberFormatOptions

数値フィールドに表示される値のフォーマットオプション。これは、ユーザーが入力できる文字にも影響します。

id
string

要素のID

locale
'en-US'
string

日付のフォーマットに使用するロケール

max
number

入力できる最大値。

min
number

入力できる最小値。

modelValue
number
name
string

数値フィールドの名前。名前/値ペアの一部として、所有するフォームとともに送信されます。

required
boolean

trueの場合、所有するフォームを送信する前に、ユーザーが値を設定する必要があることを示します。

step
1
number

入力値が各増減「ティック」で変化する量。

Emitペイロード
update:modelValue
[val: number]

値が変更されたときに呼び出されるイベントハンドラー。

スロット（デフォルト）ペイロード
modelValue
number
textValue
string
データ属性値
[data-disabled]無効の場合に表示

入力 ​

入力

値とフォーマットオプションに基づいてテキスト値をレンダリングする入力コンポーネント。

プロパティデフォルト型
as
'input'
AsTag | コンポーネント

このコンポーネントがレンダリングする要素またはコンポーネント。asChildで上書きできます。

asChild
boolean

子として渡された要素に対して、デフォルトでレンダリングされる要素を変更し、それらのプロパティと動作をマージします。

詳細については、コンポジションガイドをご覧ください。

データ属性値
[data-disabled]無効の場合に表示

インクリメント ​

値を増やすボタン。

プロパティデフォルト型
as
'button'
AsTag | コンポーネント

このコンポーネントがレンダリングする要素またはコンポーネント。asChildで上書きできます。

asChild
boolean

子として渡された要素に対して、デフォルトでレンダリングされる要素を変更し、それらのプロパティと動作をマージします。

詳細については、コンポジションガイドをご覧ください。

disabled
boolean
データ属性値
[data-pressed]押された場合に表示
[data-disabled]無効の場合に表示

デクリメント ​

値を減らすボタン。

プロパティデフォルト型
as
'button'
AsTag | コンポーネント

このコンポーネントがレンダリングする要素またはコンポーネント。asChildで上書きできます。

asChild
boolean

子として渡された要素に対して、デフォルトでレンダリングされる要素を変更し、それらのプロパティと動作をマージします。

詳細については、コンポジションガイドをご覧ください。

disabled
boolean
データ属性値
[data-pressed]押された場合に表示
[data-disabled]無効の場合に表示

例 ​

小数 ​

Intl.NumberFormatでサポートされているすべてのオプションがサポートされており、最小および最大の小数点以下の桁数、符号の表示、グループ化セパレーターなどの構成が含まれます。

vue
<template>
  <NumberFieldRoot
    :default-value="5"
    :format-options="{
      signDisplay: 'exceptZero',
      minimumFractionDigits: 1,
    }"
  >
    …
  </NumberFieldRoot>
</template>

パーセント ​

値をパーセンテージとして扱うには、formatOptions.styleをpercentに設定できます。このモードで適切なステップサイズを許可するには、ステップを0.01に手動で設定する必要があります。

vue
<template>
  <NumberFieldRoot
    :default-value="0.05"
    :step="0.01"
    :format-options="{
      style: 'percent',
    }"
  >
    …
  </NumberFieldRoot>
</template>

通貨 ​

値を通貨値として扱うには、formatOptions.styleをcurrencyに設定できます。通貨コード（例：USD）を設定するには、通貨オプションも渡す必要があります。

ユーザーが通貨を変更できるようにする必要がある場合は、数値フィールドの横に別のドロップダウンを含める必要があります。数値フィールド自体は、ユーザー入力から通貨を決定しません。

vue
<template>
  <NumberFieldRoot
    :default-value="5"
    :format-options="{
      style: 'currency',
      currency: 'EUR',
      currencyDisplay: 'code',
      currencySign: 'accounting',
    }"
  >
    …
  </NumberFieldRoot>
</template>

アクセシビリティ ​

スピンボタンWAI-ARIAデザインパターンに準拠しています。

キーボード操作 ​

キー説明
上矢印
値を増やす
下矢印
値を減らす
Page Up
値を10倍のスケールで増やす
Page Down
値を10倍のスケールで減らす
Home
値を最小値に設定（minが指定されている場合）
End
値を最大値に設定（maxが指定されている場合）