数値入力

NumberInputコンポーネントは、インクリメント/デクリメントボタンとスワイプ機能を備えた数値入力コンポーネントです。Litとデザイントークンを使用して構築され、一貫したテーマとアクセシビリティを提供します。

機能

• インクリメント/デクリメント: ボタンによる数値の増減
• スワイプ機能: タッチデバイスでのスワイプ操作
• 範囲制限: 最小値・最大値の設定
• ステップ制御: 増減の単位を指定
• 読み取り専用: 表示専用モード
• テーマ対応: ライトテーマとダークテーマの自動切り替え

使用方法

---
import { NumberInput } from '@karan-monorepo/ui-core';
---

<kds-number-input
  label="数量"
  value={5}
  min={0}
  max={100}
  step={1}
  theme="light"
>
</kds-number-input>

プロパティ

プロパティ	型	デフォルト	説明
label	string	''	入力フィールドのラベル
value	number	0	現在の値
min	number	0	最小値
max	number	100	最大値
step	number	1	増減の単位
inputmode	'numeric' | 'decimal'	'numeric'	入力モード
theme	'light' | 'dark'	'light'	コンポーネントのカラーテーマ
swipeable	boolean	false	スワイプ操作を有効にするか
readonly	boolean	false	読み取り専用モード

使用例

NumberInput Component

Interactive number input with increment/decrement buttons and swipe support.

Basic Usage

Default Number Input

With Label

Range and Step

Small Range

Decimal Steps

Large Range

Interactive Features

Swipeable

Swipe left/right on the input field to change the value

Readonly

Value cannot be changed by user interaction

Themes

Light Theme

Dark Theme

Real-world Examples

Shopping Cart

Product Name

$29.99 each

Settings Panel

基本的な使用

デフォルトの数値入力

<kds-number-input
  label="数量"
  value={5}
  min={0}
  max={100}
  step={1}
>
</kds-number-input>

ラベル付き入力

<kds-number-input
  label="価格"
  value={25}
  min={0}
  max={1000}
  step={0.5}
  inputmode="decimal"
>
</kds-number-input>

範囲とステップ

小さな範囲

<kds-number-input
  label="評価 (1-5)"
  value={3}
  min={1}
  max={5}
  step={1}
>
</kds-number-input>

小数点ステップ

<kds-number-input
  label="重量 (kg)"
  value={65.5}
  min={0}
  max={200}
  step={0.1}
  inputmode="decimal"
>
</kds-number-input>

大きな範囲

<kds-number-input
  label="年"
  value={2024}
  min={1900}
  max={2100}
  step={1}
>
</kds-number-input>

インタラクティブ機能

スワイプ可能な入力

<kds-number-input
  label="スワイプで変更"
  value={50}
  min={0}
  max={100}
  step={1}
  swipeable={true}
>
</kds-number-input>

読み取り専用モード

<kds-number-input
  label="読み取り専用値"
  value={42}
  min={0}
  max={100}
  step={1}
  readonly={true}
>
</kds-number-input>

使用ケース

ショッピングカート

<div class="cart-item">
  <div class="item-info">
    <h5>商品名</h5>
    <p>¥29.99 各</p>
  </div>
  <kds-number-input
    label="数量"
    value={2}
    min={1}
    max={10}
    step={1}
  />
</div>

設定パネル

<div class="settings-panel">
  <kds-number-input
    label="音量 (%)"
    value={75}
    min={0}
    max={100}
    step={5}
  />

  <kds-number-input
    label="タイムアウト (秒)"
    value={30}
    min={5}
    max={300}
    step={5}
  />

  <kds-number-input
    label="最大接続数"
    value={10}
    min={1}
    max={50}
    step={1}
  />
</div>

フォーム入力

<form class="product-form">
  <kds-number-input
    label="在庫数"
    value={100}
    min={0}
    max={10000}
    step={1}
  />

  <kds-number-input
    label="価格"
    value={29.99}
    min={0}
    max={999.99}
    step={0.01}
    inputmode="decimal"
  />

  <kds-number-input
    label="割引率 (%)"
    value={10}
    min={0}
    max={100}
    step={1}
  />
</form>

イベントハンドリング

NumberInputコンポーネントはvalue-changeイベントを発火します：

// イベントリスナーの設定
const numberInput = document.querySelector('kds-number-input');
numberInput.addEventListener('value-change', (event) => {
  console.log('新しい値:', event.detail.value);
});

スタイリング

NumberInputコンポーネントはデザイントークンを使用した一貫したスタイリングを提供します：

• タイポグラフィ: sansJPフォントファミリーと適切なサイズ・重み
• カラー: ライト/ダークテーマに対応したカラートークン
• スペーシング: デザインシステムのスペーシングトークン
• レスポンシブ: モバイルファーストのレスポンシブデザイン

アクセシビリティ

NumberInputコンポーネントには適切なアクセシビリティ機能が含まれています：

• セマンティックHTMLの<input>要素を使用
• キーボードナビゲーションサポート（Tab、矢印キー）
• スクリーンリーダー対応のラベル
• 高コントラスト比による視認性の確保
• 適切なinputmode属性によるモバイルキーボード最適化

ベストプラクティス

1. 範囲は用途に応じて適切に設定する（在庫=0-10000、評価=1-5など）
2. ステップはデータの性質に応じて選択する（整数=1、価格=0.01など）
3. ラベルで入力の目的を明確にする
4. スワイプ機能はモバイル向けのUX向上に活用する
5. 読み取り専用モードで表示専用の数値を表示する
6. 両方のテーマでテストして良好なコントラストと可読性を確保する

ブラウザサポート

NumberInputコンポーネントは以下の技術をサポートするモダンブラウザで動作します：

• CSS Custom Properties
• Web Components (Lit)
• CSS Flexbox
• Touch Events (スワイプ機能)