Number Input

数値の入力に特化したフォームコンポーネントです。増減ボタンやステップ値の設定に対応し、数量や金額の入力に使用します。

Basic

jui-number-input の最も基本的な使用例です。

アクセシビリティ

WAI-ARIA:
- role="spinbutton" により、スクリーンリーダーに数値入力コントロールであることを伝えます。
- aria-valuemin, aria-valuemax, aria-valuenow で現在の値と範囲を支援技術に提供します。
- aria-invalid 属性はエラーメッセージが存在する場合に自動的に true に設定されます。
- aria-required 属性は required プロパティに連動します。
- ラベルは htmlFor で <input> 要素と紐付けられます。
- エラー時は aria-describedby でエラーメッセージテキストが紐付けられます。
キーボードナビゲーション:
- ArrowUp キーで値を増加、ArrowDown キーで値を減少できます。
- Enter キーで現在の入力値を確定します。
- Tab キーで次のフォーカス可能な要素に移動します。
- 増加・減少ボタンもキーボードでフォーカス・操作可能です。

CSS カスタムプロパティ

このコンポーネント固有のカスタムプロパティはありません。グローバルのデザイントークン（--jui-color-border, --jui-color-text, --jui-color-danger, --jui-radius-md, --jui-transition-fast 等）を参照してスタイルが適用されます。

ブラウザ対応

このコンポーネントが使用しているブラウザ機能と対応状況です。

機能	用途	Chrome	Firefox	Safari	ステータス
`:focus-visible`	キーボードフォーカスリング	86+	85+	15.4+	Baseline 2022
`inputMode="decimal"`	モバイル数値キーボード	66+	95+	12.2+	Baseline 2022
CSS Custom Properties	デザイントークン	49+	31+	9.1+	Baseline 2016

💡 いずれの機能も Baseline 2022 以前に到達しており、主要ブラウザで広く対応済みです。

Baseline 情報

機能	Baseline 達成	Widely Available 予定
`:focus-visible`	2022年	2024年後半 ✅
`inputMode="decimal"`	2022年	2024年後半 ✅
CSS Custom Properties	2016年	2019年 ✅

プロパティ

コンポーネントが受け付ける属性（Props）の一覧と詳細仕様です。

Property	Attribute	Description	Type	Default
`decrementLabel`	`decrement-label`	減少ボタンの aria-label	`string`	`'減少'`
`disabled`	`disabled`	無効状態	`boolean`	`false`
`errorMessage`	`error-message`	エラーメッセージ（表示すると invalid 状態になる）	`string`	`''`
`incrementLabel`	`increment-label`	増加ボタンの aria-label	`string`	`'増加'`
`label`	`label`	ラベルテキスト	`string`	`''`
`max`	`max`	最大値	`number`	`Infinity`
`min`	`min`	最小値	`number`	`-Infinity`
`name`	`name`	フォーム識別用の name 属性	`string`	`undefined`
`placeholder`	`placeholder`	プレースホルダー	`string`	`''`
`precision`	`precision`	小数点以下の精度	`number`	`0`
`prefixText`	`prefix-text`	接頭辞テキスト（例: ¥）	`string`	`''`
`required`	`required`	必須フラグ	`boolean`	`false`
`size`	`size`	サイズバリアント	`"lg" \| "md" \| "sm"`	`'md'`
`step`	`step`	増減ステップ	`number`	`1`
`suffixText`	`suffix-text`	接尾辞テキスト（例: 円）	`string`	`''`
`value`	`value`	現在の値（null は空欄を表す）	`null \| number`	`null`

イベント

コンポーネントから発火するカスタムイベントの一覧です。

Event	Description	Type
`juiChange`	値変更時に発火	`CustomEvent<{ value: number \| null; }>`
`juiStep`	スピナー操作時に発火	`CustomEvent<{ value: number; direction: "up" \| "down"; }>`

シャドウパーツ

CSSから直接スタイリング可能な内部要素（Parts）の一覧です。

Part	Description
`"decrement"`	減少ボタン
`"error"`	エラーメッセージ
`"field"`	テキスト入力要素
`"increment"`	増加ボタン
`"label"`	ラベル要素
`"prefix"`	接頭辞テキスト
`"spinner"`	スピナーボタン群を囲むコンテナ
`"suffix"`	接尾辞テキスト
`"wrapper"`	入力フィールドを囲むコンテナ

Built with StencilJS