syncfusion-react-inputs

Syncfusion React Inputs の実装

アップローダー

Syncfusion React の UploaderComponent は、非同期アップロード、ドラッグ＆ドロップ、一時停止・再開・キャンセルに対応したチャンクアップロード、検証、テンプレート、フォーム連携、アクセシビリティ対応を備えた高機能なファイルアップロードコントロールです。

ナビゲーションガイド

🛑 エージェントによる操作： 複数の手順を自律的に実行しないでください。各操作（インストール、実行、ファイル作成）の前に、ユーザーに確認してください。

はじめに

📄 参照： references/getting-started.md

• @syncfusion/ej2-react-inputs のインストール 🛑 停止 — パッケージを自律的にインストールしないでください。ユーザーに npm install @syncfusion/ej2-react-inputs の実行を依頼してください。npm audit で確認してください
• ライセンス登録
• JSX/TSX での基本的な UploaderComponent の使用方法
• CSS テーマのインポート
• ドロップ領域の設定
• 成功イベントと失敗イベントの処理

非同期アップロード

📄 参照： references/async-upload.md

• saveUrl と removeUrl を指定した asyncSettings
• 複数ファイルと単一ファイルのアップロード（multiple）
• 自動アップロードと手動アップロード（autoUpload）
• 順次アップロード（sequentialUpload）
• 事前読み込みファイル（files プロパティ）
• uploading／removing イベントによるカスタム HTTP ヘッダーの追加
• サーバー側での保存／削除処理の例

チャンクアップロード

📄 参照： references/chunk-upload.md

• asyncSettings.chunkSize によるチャンクアップロードの有効化
• 再試行の設定（retryCount、retryAfterDelay）
• チャンクアップロードの一時停止と再開（pause、resume メソッド）
• アップロードのキャンセル（cancel メソッド）
• chunkSuccess イベントと chunkFailure イベント
• サーバー側のチャンク処理（C#）

検証

📄 参照： references/validation.md

• 許可するファイル拡張子（allowedExtensions）
• ファイルサイズの制限（minFileSize、maxFileSize）
• selected イベントを使用したファイル数の上限
• ファイルの重複防止
• ドラッグ＆ドロップ時の画像検証

ファイルソース

📄 参照： references/file-source.md

• クリップボードからの貼り付けによるアップロード
• ディレクトリ／フォルダーのアップロード（directoryUpload）
• カスタムドロップ領域を使ったドラッグ＆ドロップ（dropArea）
• ドロップ領域の外観のカスタマイズ

テンプレートとカスタマイズ

📄 参照： references/template-customization.md

• ファイルリストの template プロパティ
• showFileList: false によるカスタムアップロード UI
• アクションボタンのカスタマイズ（buttons プロパティ）
• 進行状況バーのカスタマイズ
• デフォルトのドロップ領域を非表示にする
• スタイルと外観のオーバーライド

高度な使用シナリオ

📄 参照： references/advanced-how-to.md

• プログラムによるファイルアップロード（upload メソッド、getFilesData）
• 非表示／バックグラウンドでのアップロード
• アップロード前の画像プレビュー
• アップロード前の画像のサイズ変更
• 選択したファイルの並べ替え
• アップロード前のファイルサイズ／MIME タイプの確認
• ファイル削除前の確認ダイアログ
• アップロード済みファイルを開く／編集する
• 外部ボタンからファイルブラウザーを起動する
• アップロード済み画像をバイナリに変換する
• セキュアなアップロードのための JWT 認証 ⚠️ トークンをハードコードしないでください。実行時にセキュアなセッションストアから取得してください。リクエストヘッダーやトークンの値をログに記録しないでください。
• フォーム対応（HTML フォーム、テンプレート駆動型、リアクティブ）
• ローカライズ（カスタムロケール文字列）
• アクセシビリティとキーボード操作

API リファレンス

📄 参照： references/api.md

• すべてのプロパティ（allowedExtensions、asyncSettings、autoUpload、buttons、cssClass、directoryUpload、dropArea、dropEffect、enabled、files、htmlAttributes、locale、maxFileSize、minFileSize、multiple、sequentialUpload、showFileList、templateなど）
• すべてのメソッド（upload、remove、cancel、pause、resume、retry、clearAll、getFilesData、bytesToSize、createFileList、sortFileList）
• すべてのイベント（uploading、success、failure、selected、removing、change、progress、chunkSuccess、chunkFailure、chunkUploading、actionComplete、beforeRemove、beforeUpload、canceling、clearing、fileListRendering、pausing、resuming、created）

クイックスタートの例

import { UploaderComponent } from '@syncfusion/ej2-react-inputs';
import '@syncfusion/ej2-base/styles/material.css';
import '@syncfusion/ej2-buttons/styles/material.css';
import '@syncfusion/ej2-inputs/styles/material.css';
import '@syncfusion/ej2-popups/styles/material.css';
import '@syncfusion/ej2-react-inputs/styles/material.css';

function App() {
  // ⚠️ Replace with your own server-side endpoints.
  // Never use third-party demo URLs in production — files will be sent to that external server.
  const asyncSettings = {
    saveUrl: '/api/upload/save',
    removeUrl: '/api/upload/remove'
  };

  const onSuccess = (args: any) => {
    console.log('Upload operation:', args.operation, 'File:', args.file.name);
  };

  const onFailure = (args: any) => {
    console.error('Upload failed:', args.file.name);
  };

  return (
    <UploaderComponent
      asyncSettings={asyncSettings}
      autoUpload={false}
      success={onSuccess}
      failure={onFailure}
    />
  );
}

よく使うパターン

検証付きの自動アップロード

<UploaderComponent
  asyncSettings={{ saveUrl: '/api/upload/save', removeUrl: '/api/upload/remove' }}
  allowedExtensions=".pdf,.doc,.docx"
  maxFileSize={5000000}
  multiple={true}
/>

カスタムボタンを使った手動アップロード

<UploaderComponent
  asyncSettings={{ saveUrl: '/api/upload/save', removeUrl: '/api/upload/remove' }}
  autoUpload={false}
  buttons={{ browse: 'Choose File', clear: 'Clear All', upload: 'Upload All' }}
/>

大容量ファイル向けのチャンクアップロード

<UploaderComponent
  asyncSettings={{
    saveUrl: '/api/upload/save',
    removeUrl: '/api/upload/remove',
    chunkSize: 500000   // 500 KB chunks
  }}
/>

重要な選択ガイド

必要な機能	プロパティ／イベント
サーバーの URL	asyncSettings.saveUrl + asyncSettings.removeUrl
自動アップロードと手動アップロードの切り替え	autoUpload（デフォルト：true）
大容量ファイルのアップロード	asyncSettings.chunkSize
ファイルの種類を制限する	allowedExtensions
ファイルサイズを制限する	maxFileSize / minFileSize
サーバーからファイルを事前読み込みする	files prop
一度に 1 つずつアップロードする	sequentialUpload: true
フォルダー全体をアップロードする	directoryUpload: true
カスタムのドロップ先	dropArea
カスタムのファイルリスト UI	template または showFileList: false
認証ヘッダーを追加する	uploading イベント → args.currentRequest.setRequestHeader()
追加のフォームデータを送信する	uploading イベント → args.customFormData

NumericTextBox

Syncfusion React の NumericTextBoxComponent は、数値入力に特化した入力コントロールです。数値の書式設定（通貨、パーセンテージ、指数表記）、最小値／最大値の範囲検証、スピンボタン、小数点以下の精度制御、国際化、RTL 言語に対応し、WCAG 2.2 のアクセシビリティ基準にも完全に準拠しています。

ドキュメントとナビゲーションガイド

🛑 エージェントによる使用： 複数の手順を自律的に実行しないでください。各操作（インストール、実行、ファイル作成）の前にユーザーに確認してください。

NumericTextBox のサポートが必要な場合は、ユーザーを適切なリファレンスに案内してください。

はじめに

📄 参照： references/getting-started.md

• インストールとパッケージのセットアップ
• CSS のインポートとテーマ
• React コンポーネントのインポートと基本的な JSX
• 最初の NumericTextBox の作成
• アプリケーションの実行

書式と検証

📄 参照： references/formats-and-validation.md

• 標準の書式指定子（通貨、パーセンテージ、数値、指数表記）

• と 0 のパターンを使ったカスタム数値書式

• min および max プロパティを使った範囲検証
• 有効な範囲を強制する strictMode
• 実際の使用例を含む書式設定の例

スピンボタンとステップ制御

📄 参照： references/spin-buttons-and-step.md

• スピンボタンの矢印の有効化／無効化
• 増分値を設定する Step プロパティ
• スピンボタンの外観と動作のカスタマイズ
• ステップ増分時の精度
• キーボードショートカット（上矢印／下矢印）

装飾要素とスタイル設定

📄 参照： references/adornments-and-styling.md

• プレフィックスとサフィックスのテキスト（単位、通貨記号）
• CSS クラスとカスタムスタイル
• プレースホルダー、無効、読み取り専用の状態
• フォーカスおよびブラーイベントの処理
• テーマのカスタマイズと外観のオプション

精度と小数

📄 参照： references/precision-decimals.md

• 小数点以下の桁数を制御する decimals プロパティ
• 入力時にリアルタイムで精度を検証する validateDecimalOnType
• 表示時に末尾のゼロを維持する
• 丸め処理の動作と特殊なケース
• 入力時と表示時の精度

双方向バインディングとフォーム

📄 読む： references/two-way-binding-forms.md

• React での双方向値バインディング（value プロパティ + onChange）
• 制御コンポーネントのパターン
• React の状態管理
• React Hook Form との統合
• NumericTextBox を使用したフォーム検証

グローバリゼーションとアクセシビリティ

📄 読む： references/globalization-accessibility.md

• 国際化とロケールのサポート
• 右から左へ記述する言語（RTL）のサポート
• WCAG 2.2 のアクセシビリティ準拠
• キーボード操作とショートカット
• ARIA 属性によるスクリーンリーダーのサポート
• フォーカス管理とカラーコントラスト

API リファレンス

📄 読む： references/api.md

• プロパティの完全なリファレンス（value、min、max、step、format、decimals など）
• メソッドのリファレンス（increment、decrement、getText、focusIn、focusOut、destroy など）
• 引数の型を含むイベントのリファレンス（change、blur、focus、created、destroyed）

クイックスタートの例

開始するための、最小限の動作する例を紹介します。

import React, { useState } from 'react';
import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import '@syncfusion/ej2-base/styles/material3.css';
import '@syncfusion/ej2-buttons/styles/material3.css';
import '@syncfusion/ej2-inputs/styles/material3.css';

export default function App() {
  const [value, setValue] = useState(10);

  return (
    <div style={{ padding: '20px' }}>
      <h3>Enter a Number</h3>
      <NumericTextBoxComponent
        value={value}
        onChange={(e) => setValue(e.value)}
        min={0}
        max={100}
        step={1}
      />
      <p>Current Value: {value}</p>
    </div>
  );
}

主なポイント：

• @syncfusion/ej2-react-inputs から NumericTextBoxComponent をインポートします
• 必要な CSS テーマをインポートします（この例では material3）
• 現在の数値には value プロパティを使用します
• React の状態を更新するには onChange イベントを使用します
• 検証と操作のために min、max、step を追加します

一般的なパターン

1. 通貨入力

<NumericTextBoxComponent
  value={99.99}
  format="c2"
  min={0}
  placeholder="Enter amount"
/>

2. パーセント入力

<NumericTextBoxComponent
  value={50}
  format="p"
  min={0}
  max={100}
/>

3. 整数のみの入力

<NumericTextBoxComponent
  value={10}
  decimals={0}
  step={1}
  min={0}
/>

4. 検証付きの範囲指定

<NumericTextBoxComponent
  value={25}
  min={0}
  max={100}
  strictMode={true}
  placeholder="0-100"
/>

5. ラベル付きのフォームフィールド

<div>
  <label>Product Quantity:</label>
  <NumericTextBoxComponent
    value={qty}
    onChange={(e) => setQty(e.value)}
    min={1}
    step={1}
    prefix="Units: "
  />
</div>

主なプロパティのリファレンス

プロパティ	型	用途
value	number	現在の数値
min	number	許可される最小値
max	number	許可される最大値
step	number	増減する刻み幅（デフォルト：1）
decimals	number	フォーカス時の小数点以下の桁数
format	string	数値の形式（n2、c2、p2、e2 など）
currency	string	ISO 4217 通貨コード（例：'USD'、'EUR'）
placeholder	string	空のときに表示するプレースホルダーテキスト
floatLabelType	FloatLabelType	フローティングラベルの動作（'Never'、'Always'、'Auto'）
readonly	boolean	ユーザー入力を防止します
enabled	boolean	コントロールを有効または無効にします（デフォルト：true）
strictMode	boolean	min/max の検証を適用します（デフォルト：true）
validateDecimalOnType	boolean	入力中の小数点以下の桁数を制限します
showSpinButton	boolean	スピンボタンの矢印を表示／非表示にします（デフォルト：true）
showClearButton	boolean	クリアアイコンを表示／非表示にします
allowMouseWheel	boolean	マウスホイールによる増減を有効にします（デフォルト：true）
cssClass	string	カスタムスタイル用の追加 CSS クラス
width	number | string	コンポーネントの幅

一般的なユースケース

1. ショッピングカート — 数量入力

• 整数のみ、min=1、step=1、簡単に調整できるスピンボタン

2. 価格計算ツール — 通貨フィールド

• format="c2"、min=0、prefix="$"、小数点以下 2 桁

3. 評価またはスコア — 0～100 の範囲

• min=0、max=100、strictMode=true、小数なし

4. 割引率

• format="p"、min=0、max=100、小数点以下 2 桁

5. 測定値の入力

• decimals=2、suffix=" cm"、min=0、精密に調整できるスピンボタン

6. 金融フォーム

• format="c2"、検証、フォーム連携、アクセシビリティ

次のステップ

1. パッケージ要件： @syncfusion/ej2-react-inputs、@syncfusion/ej2-base、@syncfusion/ej2-buttons パッケージが、プロジェクトの package.json に含まれている必要があります。すでにインストールされていることと、サプライチェーンの完全性を保つために、ロックファイル（例：package-lock.json または yarn.lock）で各バージョンが固定されていることを確認してください。追加する場合は、バージョンが固定されていない依存関係のリスクを避けるため、@syncfusion/ej2-react-inputs@^27.x.x のような明示的なバージョン範囲を指定してください。
2. はじめにの参照： インストール方法と基本的な設定については、references/getting-started.md を参照してください。
3. 参照先の選択： 用途（書式設定、検証、フォームなど）に応じて、上記の該当するリファレンスセクションに移動してください。
4. サンプルの確認： 各リファレンスには、要件に合わせて調整できる、すぐに使えるコードサンプルが含まれています。
5. カスタマイズ： 用途やアプリケーションの要件に合わせて、サンプルを変更してください。

---

実装の詳細な手順については、上記の該当するリファレンスファイルを参照してください。

TextBox

TextBox コンポーネントは、フローティングラベル、検証状態、アイコン、高度な機能に対応した、ユーザーのテキスト入力を受け取る軽量な入力コントロールです。このスキルでは、React アプリケーションで TextBox コンポーネントを実装、設定、カスタマイズする方法を説明します。

ナビゲーションガイド

🛑 エージェントによる操作： 複数の手順を自律的に実行しないでください。各操作（インストール、実行、ファイル作成）の前にユーザーの確認を取ってください。

はじめに

📄 参照： references/getting-started.md

• React 開発向けの Vite の設定
• @syncfusion/ej2-react-inputs パッケージのインストール 🛑 停止 — パッケージを自律的にインストールしないでください。ユーザーに npm install @syncfusion/ej2-react-inputs を実行するよう依頼してください。特定のバージョン（例：@syncfusion/[email protected]）を指定し、npm audit で確認してください
• CSS のインポートとテーマの追加
• 最初の TextBox コンポーネントの作成
• アイコンとフローティングラベルの追加
• 開発サーバーの起動 🛑 停止 — 開発サーバーを自律的に起動しないでください。ユーザーに npm run dev を実行するよう依頼してください

機能とグループ

📄 参照： references/features-and-groups.md

• フローティングラベルの動作（Never、Always、Auto）
• addIcon() メソッドによるアイコン（先頭／末尾への追加）
• showClearButton プロパティによるクリアボタン
• e-corner CSS クラスによる角丸
• enabled={false} による無効状態
• 複数行テキストボックスの作成
• クリアボタンとフローティングラベルを組み合わせた TextBox

スタイルとサイズ

📄 参照： references/styling-and-sizing.md

• 3 種類の定義済みサイズ：Normal、Small（e-small）、Large（e-bigger）
• cssClass プロパティによるサイズクラスの適用
• e-corner CSS クラスによる角丸
• TextBox のラッパーとフローティングラベルの CSS カスタマイズ
• カスタム CSS クラスとテーマ
• レスポンシブデザインのパターン

複数行 TextBox

📄 参照： references/multiline-textbox.md

• multiline={true} による複数行／テキストエリア入力の作成
• 複数行入力でのフローティングラベル
• 自動サイズ変更されるテキストボックス
• リサイズ機能の無効化
• htmlAttributes={{ maxlength: '...' }} によるテキスト長の制限
• 文字数のカウントと表示

検証と状態

📄 参照： references/validation-and-states.md

• cssClass によるエラー、警告、成功の検証状態
• 検証クラス（e-error、e-warning、e-success）の適用
• enabled={false} による無効状態（disabled ではありません）
• readonly={true} による読み取り専用状態
• 無効状態と読み取り専用状態の違い
• input イベントを使用した値に応じた色の動的な変更

高度な機能

📄 参照： references/advanced-features.md

• 装飾：prependTemplate プロパティと appendTemplate プロパティ
• インタラクティブな装飾（パスワードの表示切り替え、削除ボタン）
• フックを使用した React 関数コンポーネント
• useState、useEffect、useRef、useReducer との統合
• イベント処理（created、input、change イベント）
• フォームの検証パターン

アクセシビリティと移行

📄 参照： references/accessibility-and-migration.md

• WCAG 2.2、Section 508、WAI-ARIA への準拠
• スクリーンリーダーのサポートと ARIA 属性
• enableRtl プロパティによる右から左（RTL）のサポート
• キーボードナビゲーションのサポート
• CSS TextBox から React コンポーネントへの移行
• 移行前と移行後のコード比較

API リファレンス

📄 参照： references/api.md

• すべてのプロパティ：placeholder、floatLabelType、value、type、cssClass、multiline、showClearButton、enabled、readonly、enableRtl、enablePersistence、autocomplete、htmlAttributes、locale、width、prependTemplate、appendTemplate
• メソッド：addIcon、addAttributes、removeAttributes、focusIn、focusOut、destroy、getPersistData
• イベント：created、destroyed、change、input、focus、blur

クイックスタート

フローティングラベル付きの基本的な TextBox

import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import './App.css';

export default function App() {
  return (
    <TextBoxComponent 
      placeholder="Enter your name" 
      floatLabelType="Auto"
    />
  );
}

アイコン付き TextBox

import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { useRef } from 'react';

export default function App() {
  const textboxRef = useRef(null);

  const handleCreate = () => {
    if (textboxRef.current) {
      textboxRef.current.addIcon('append', 'e-icons e-input-popup-date');
    }
  };

  return (
    <TextBoxComponent
      placeholder="Enter date"
      floatLabelType="Auto"
      ref={textboxRef}
      created={handleCreate}
    />
  );
}

クリアボタン付き TextBox

import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';

export default function App() {
  return (
    <TextBoxComponent
      placeholder="Enter your email"
      floatLabelType="Auto"
      showClearButton={true}
    />
  );
}

複数行 TextBox

import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';

export default function App() {
  return (
    <TextBoxComponent
      multiline={true}
      placeholder="Enter your address"
      floatLabelType="Auto"
    />
  );
}

一般的なパターン

検証状態を備えたフォーム

import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { useState } from 'react';

export default function ValidationForm() {
  const [cssClass, setCssClass] = useState('');

  return (
    <div>
      <TextBoxComponent
        placeholder="Enter username"
        cssClass={cssClass}
        floatLabelType="Auto"
        input={(e: any) => {
          if (!e.value) setCssClass('');
          else if (e.value.length < 3) setCssClass('e-error');
          else if (e.value.length < 6) setCssClass('e-warning');
          else setCssClass('e-success');
        }}
      />
    </div>
  );
}

表示切り替え機能付きパスワード TextBox

import * as React from 'react';
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { useRef, useState } from 'react';

export default function PasswordInput() {
  const textboxRef = useRef<TextBoxComponent>(null);
  const [isVisible, setIsVisible] = useState(false);

  const toggleVisibility = () => {
    if (textboxRef.current) {
      const newVisibility = !isVisible;
      textboxRef.current.type = newVisibility ? 'text' : 'password';
      setIsVisible(newVisibility);
    }
  };

  function appendTemplate(): JSX.Element {
    return (
      <>
        <span className="e-input-separator"></span>
        <span
          className={`e-icons ${isVisible ? 'e-eye-slash' : 'e-eye'}`}
          onClick={toggleVisibility}
          style={{ cursor: 'pointer' }}
        ></span>
      </>
    );
  }

  return (
    <TextBoxComponent
      ref={textboxRef}
      type="password"
      placeholder="Enter password"
      floatLabelType="Auto"
      appendTemplate={appendTemplate}
    />
  );
}

単位ラベル付きメール入力欄

import * as React from 'react';
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';

export default function EmailInput() {
  function prependTemplate(): JSX.Element {
    return (
      <>
        <span className="e-icons e-user"></span>
        <span className="e-input-separator"></span>
      </>
    );
  }

  function appendTemplate(): JSX.Element {
    return (
      <>
        <span className="e-input-separator"></span>
        <span>.com</span>
      </>
    );
  }

  return (
    <TextBoxComponent
      type="email"
      placeholder="Enter email"
      floatLabelType="Auto"
      prependTemplate={prependTemplate}
      appendTemplate={appendTemplate}
    />
  );
}

角丸 TextBox

import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';

export default function RoundedCornerTextBox() {
  return (
    <TextBoxComponent
      placeholder="Enter Date"
      cssClass="e-corner"
    />
  );
}

無効化された TextBox

import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';

export default function DisabledTextBox() {
  return (
    <TextBoxComponent
      placeholder="Enter Name"
      enabled={false}
    />
  );
}

RTL TextBox

import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';

export default function RTLTextBox() {
  return (
    <TextBoxComponent
      placeholder="أدخل اسمك"
      floatLabelType="Auto"
      enableRtl={true}
    />
  );
}

自動サイズ調整される複数行 TextBox

import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { useRef } from 'react';

export default function AutoSizeTextbox() {
  const textboxRef = useRef(null);

  const handleInput = () => {
    if (textboxRef.current) {
      const elem = textboxRef.current.respectiveElement;
      elem.style.height = 'auto';
      elem.style.height = elem.scrollHeight + 'px';
    }
  };

  const handleCreate = () => {
    if (textboxRef.current) {
      textboxRef.current.addAttributes({ rows: 1 });
    }
    handleInput();
  };

  return (
    <TextBoxComponent
      multiline={true}
      placeholder="Enter your message"
      floatLabelType="Auto"
      ref={textboxRef}
      created={handleCreate}
      input={handleInput}
    />
  );
}

主なプロパティ

プロパティ	型	目的
placeholder	string	入力欄が空のときに表示されるヒントテキスト
floatLabelType	"Never" | "Always" | "Auto"	ラベルのアニメーション動作
value	string	TextBox の内容を設定します
type	string	入力タイプ（text、password、email、number など）
multiline	boolean	複数行入力用の textarea に変換します
showClearButton	boolean	入力欄に値があるときにクリアボタンを表示します
cssClass	string	サイズ、検証、外観に関する CSS クラスを適用します（例："e-error"、"e-small"、"e-corner"）
enabled	boolean	入力操作を有効（true）または無効（false）にします
readonly	boolean	選択を許可しつつ、編集を防ぎます
enableRtl	boolean	右から左への表示を有効にします
enablePersistence	boolean	ページ再読み込み後も値の状態を保持します ⚠️ データをブラウザーのストレージに保存します。ユーザーの明示的な同意がある場合にのみ有効にしてください
autocomplete	string	ブラウザーの自動補完を制御します（"on" | "off"）
htmlAttributes	{ [key: string]: string }	追加の HTML 属性を渡します（例：{ maxlength: '200' }）
locale	string	グローバルなカルチャ／ローカライズ値を上書きします
width	number | string	コンポーネントの幅を設定します
prependTemplate	() => JSX.Element	入力欄の前に要素を描画します
appendTemplate	() => JSX.Element	入力欄の後に要素を描画します

主なイベント

イベント	引数	目的
created	Object	コンポーネントの初期化後に発生します
destroyed	Object	コンポーネントが破棄されたときに発生します
change	ChangedEventArgs	フォーカスが外れたときに値が変わると発生します
input	InputEventArgs	キー入力のたびに発生します
focus	FocusInEventArgs	TextBox にフォーカスが当たると発生します
blur	FocusOutEventArgs	TextBox からフォーカスが外れると発生します

関連ドキュメント

ℹ️ 以下の外部リンクは手動で参照するためのものです。 明示的なユーザーの同意なしに、エージェント型パイプラインでこれらの URL を自動取得しないでください。

• Syncfusion React TextBox コンポーネントのデモ (外部)
• React TextBox API リファレンス (外部)
• Syncfusion React Inputs パッケージ (外部 — インストール前に確認してください)
• React 関数コンポーネント

CheckBox

Syncfusion React の CheckBoxComponent は、ユーザーが 1 つ以上のオプションを選択できるグラフィカル UI 要素です。チェック済み、未チェック、不確定の状態、柔軟なラベル位置、サイズのバリエーション、完全なアクセシビリティ準拠、豊富な CSS カスタマイズに対応しています。

パッケージ： @syncfusion/ej2-react-buttons

---

ナビゲーションガイド

🛑 エージェント型の使用： 複数のステップを自律的に実行しないでください。各操作（インストール、実行、ファイル作成）の前にユーザーに確認してください。

はじめに

📄 参照： references/getting-started.md

• @syncfusion/ej2-react-buttons のインストール 🛑 STOP — パッケージを自律的にインストールしないでください。ユーザーに npm install @syncfusion/ej2-react-buttons --save の実行を依頼してください。npm audit で確認してください
• Tailwind3 の CSS テーマのインポート
• 最小限の CheckBoxComponent のセットアップ
• Vite/React アプリの実行 🛑 STOP — 開発サーバーを自律的に起動しないでください。ユーザーに npm run dev の実行を依頼してください

状態（チェック済み、未チェック、不確定、無効）

📄 参照： references/states.md

• チェック済み状態に checked={true} を設定
• 不確定状態に indeterminate={true} を設定
• 無効状態に disabled={true} を設定
• 状態の組み合わせ例

ラベルとサイズ

📄 参照： references/label-and-size.md

• キャプションテキスト用の label プロパティ
• labelPosition（"Before" / "After"）
• cssClass="e-small" による小さいサイズ
• デフォルトサイズと小さいサイズの例

スタイルと外観

📄 参照： references/style-and-appearance.md

• チェックボックスのスタイルを上書きするために利用できる CSS クラス
• 色のバリエーションのカスタマイズ（プライマリ、成功、警告、危険、情報）
• カスタムフレームの形状（丸いチェックボックス）
• カスタムチェックアイコン
• Theme Studio との連携

アクセシビリティと RTL

📄 参照： references/accessibility.md

• WCAG 2.2 / Section 508 に準拠
• WAI-ARIA 属性（aria-disabled）
• キーボード操作（Space キー）
• 右から左への表示（enableRtl）に対応
• スクリーンリーダーに対応

How-To ガイド

📄 参照： references/how-to.md

• フォーム送信時の名前と値
• 右から左への表示を有効化
• カスタマイズしたチェックボックスのバリエーションの作成

API リファレンス

📄 参照： references/api.md

• すべてのプロパティ：checked、cssClass、disabled、enableHtmlSanitizer、enablePersistence、enableRtl、htmlAttributes、indeterminate、label、labelPosition、locale、name、value
• メソッド：click()、destroy()、focusIn()
• イベント：change、created

---

クイックスタート

npm install @syncfusion/ej2-react-buttons --save
# Then run: npm audit

/* src/App.css */
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css";

import { CheckBoxComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import './App.css';

function App() {
  return (
    <div>
      <CheckBoxComponent label="Accept Terms" />
    </div>
  );
}
export default App;

---

よく使われるパターン

変更ハンドラーを備えた制御チェックボックス

import { CheckBoxComponent } from '@syncfusion/ej2-react-buttons';
import { ChangeEventArgs } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';

function App() {
  const [isChecked, setIsChecked] = React.useState(false);

  const handleChange = (args: ChangeEventArgs) => {
    setIsChecked(args.checked);
  };

  return (
    <CheckBoxComponent
      label="Subscribe to newsletter"
      checked={isChecked}
      change={handleChange}
    />
  );
}
export default App;

不確定状態を備えた親／子

import { CheckBoxComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';

function App() {
  return (
    <ul>
      {/* Parent: indeterminate when some children are selected */}
      <li><CheckBoxComponent label="Select All" indeterminate={true} /></li>
      <li><CheckBoxComponent label="Option A" checked={true} /></li>
      <li><CheckBoxComponent label="Option B" /></li>
    </ul>
  );
}
export default App;

名前と値を使用したフォーム送信

import { CheckBoxComponent, ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';

function App() {
  return (
    <form>
      <CheckBoxComponent name="hobby" value="Reading" label="Reading" checked={true} />
      <CheckBoxComponent name="hobby" value="Gaming" label="Gaming" />
      <ButtonComponent isPrimary={true}>Submit</ButtonComponent>
    </form>
  );
}
export default App;

---

主な Props の概要

Prop	Type	Default	Purpose
label	string	''	チェックボックスの横に表示するキャプションテキスト
checked	boolean	false	チェック状態
indeterminate	boolean	false	不確定（部分選択）状態
disabled	boolean	false	無効状態
labelPosition	'Before' | 'After'	'After'	ラベルの配置
cssClass	string	''	カスタム CSS クラス
name	string	''	フォームフィールド名
value	string	''	フォームフィールドの値
enableRtl	boolean	false	右から左への表示
enablePersistence	boolean	false	再読み込み後も状態を保持 ⚠️ ブラウザーのストレージにデータを保存します。明示的なユーザーの同意がある場合にのみ有効にしてください

---

Signature

Syncfusion React の SignatureComponent は、可変幅のベジェ曲線を使用して滑らかな手書き署名を記録する、キャンバスベースの署名パッドを描画します。描画、保存（PNG/JPEG/SVG/base64/blob）、既存の署名の読み込み、元に戻す／やり直しの履歴、ストロークと背景の外観のカスタマイズ、アクセシビリティへの完全な準拠をサポートします。

パッケージ： @syncfusion/ej2-react-inputs

---

ナビゲーションガイド

🛑 エージェントによる操作： 複数の手順を自律的に実行しないでください。各操作（インストール、実行、ファイル作成）の前に、ユーザーに確認してください。

はじめに

📄 参照： references/getting-started.md

• @syncfusion/ej2-react-inputs のインストール 🛑 停止 — パッケージを自律的にインストールしないでください。ユーザーに npm install @syncfusion/ej2-react-inputs --save の実行を依頼してください。npm audit で検証してください
• CSS テーマのインポート（Tailwind3）
• 最小限の SignatureComponent のセットアップ
• アプリケーションの実行 🛑 停止 — 開発サーバーを自律的に起動しないでください。ユーザーに npm run dev の実行を依頼してください

カスタマイズ

📄 参照： references/customization.md

• ストローク幅：maxStrokeWidth、minStrokeWidth、velocity
• ストロークの色：strokeColor
• 背景色：backgroundColor
• 背景画像：backgroundImage

開く／保存

📄 参照： references/open-save.md

• base64 または URL から署名を読み込む（load）
• base64 として保存する（getSignature）
• Blob として保存する（saveAsBlob、getBlob）
• 画像ファイルとして保存する — PNG、JPEG、SVG（save）
• 背景付きで保存する（saveWithBackground）

ユーザー操作

📄 参照： references/user-interaction.md

• ストロークを元に戻す／やり直す（undo、redo、canUndo、canRedo）
• キャンバスをクリアする（clear、isEmpty）
• 無効状態（disabled）
• 読み取り専用モード（isReadOnly）
• 署名としてテキストを描画する（draw）
• キーボードショートカット（Ctrl+Z、Ctrl+Y、Ctrl+S、Delete）

ツールバーとの統合

📄 参照： references/toolbar-integration.md

• Syncfusion の ToolbarComponent との統合
• 元に戻す、やり直し、クリア、保存のツールバーボタンを接続する
• ColorPickerComponent を使用したストロークのカラーピッカー
• 背景色ピッカーとの統合
• DropDownListComponent を使用したストローク幅のドロップダウン
• 署名の状態に応じたツールバーボタンの有効化／無効化

アクセシビリティ

📄 参照： references/accessibility.md

• WCAG 2.2／Section 508 への準拠
• キーボード操作（Ctrl+Z、Ctrl+Y、Ctrl+S、Delete）
• スクリーンリーダーおよびモバイルデバイスのサポート

API リファレンス

📄 参照： references/api.md

• すべてのプロパティ：backgroundColor、backgroundImage、disabled、enablePersistence、isReadOnly、maxStrokeWidth、minStrokeWidth、saveWithBackground、strokeColor、velocity
• すべてのメソッド：canRedo、canUndo、clear、destroy、draw、getBlob、getSignature、isEmpty、load、redo、refresh、save、saveAsBlob、undo
• イベント：beforeSave、change、created

---

クイックスタート

npm install @syncfusion/ej2-react-inputs --save
# Then run: npm audit

/* src/App.css */
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css";

import { SignatureComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import './App.css';

function App() {
  return (
    <div>
      <SignatureComponent id="signature" />
    </div>
  );
}
export default App;

---

よく使われるパターン

取り消し／やり直し／クリアコントロール付き署名

import { SignatureComponent, SignatureChangeEventArgs } from '@syncfusion/ej2-react-inputs';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import { useRef } from 'react';

function App() {
  const sigRef = React.useRef<SignatureComponent>(null);
  const [canUndo, setCanUndo] = React.useState(false);
  const [canRedo, setCanRedo] = React.useState(false);
  const [isEmpty, setIsEmpty] = React.useState(true);

  function handleChange(args: SignatureChangeEventArgs) {
    if (sigRef.current) {
      setCanUndo(sigRef.current.canUndo());
      setCanRedo(sigRef.current.canRedo());
      setIsEmpty(sigRef.current.isEmpty());
    }
  }

  return (
    <div>
      <ButtonComponent disabled={!canUndo} onClick={() => sigRef.current?.undo()}>Undo</ButtonComponent>
      <ButtonComponent disabled={!canRedo} onClick={() => sigRef.current?.redo()}>Redo</ButtonComponent>
      <ButtonComponent disabled={isEmpty} onClick={() => sigRef.current?.clear()}>Clear</ButtonComponent>
      <SignatureComponent id="signature" ref={sigRef} change={handleChange} />
    </div>
  );
}
export default App;

署名を PNG として保存

import { SignatureComponent } from '@syncfusion/ej2-react-inputs';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';

function App() {
  const sigRef = React.useRef<SignatureComponent>(null);

  function saveSignature() {
    sigRef.current?.save('Png', 'MySignature');
  }

  return (
    <div>
      <SignatureComponent id="signature" ref={sigRef} />
      <ButtonComponent onClick={saveSignature}>Save as PNG</ButtonComponent>
    </div>
  );
}
export default App;

---

主なプロパティの概要

プロパティ	型	デフォルト	用途
strokeColor	string	'#000000'	ペン／線の色（hex、rgb、または色名）
backgroundColor	string	''	キャンバスの背景色
backgroundImage	string	''	キャンバスの背景画像 URL
maxStrokeWidth	number	2	線の最大太さ
minStrokeWidth	number	0.5	線の最小太さ
velocity	number	0.7	線の太さの変化を制御します
disabled	boolean	false	コンポーネントを無効にします
isReadOnly	boolean	false	描画を禁止し、フォーカスは許可します
saveWithBackground	boolean	true	保存時に背景を含めます
enablePersistence	boolean	false	ページの再読み込み後も状態を保持します ⚠️ 署名データ（生体認証入力）をブラウザーのストレージに保存します。明示的なユーザーの同意を得て、適用されるプライバシーに関する説明を行った場合にのみ有効にしてください

---

OTP 入力

ワンタイムパスワード、PIN、確認コードを入力するための、用途に特化した入力コンポーネントです。設定可能な数の個別の文字入力フィールドを表示し、完全なキーボード操作、アクセシビリティ対応、視覚スタイルの設定を提供します。

クイックスタート

import { OtpInputComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import './App.css';

function App() {
  return (
    <div id="container">
      <OtpInputComponent id="otpinput" />
    </div>
  );
}

export default App;

CSS（src/App.css）：

@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css";

インストール：

npm install @syncfusion/ej2-react-inputs --save

一般的なパターン

確認コールバック付きの6桁 OTP

import { OtpInputComponent, OtpChangedEventArgs } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';

function App() {
  const handleValueChanged = (args: OtpChangedEventArgs) => {
    console.log('Complete OTP:', args.value);
    // Call your API verification here
  };

  return (
    <OtpInputComponent
      id="otpinput"
      length={6}
      autoFocus={true}
      valueChanged={handleValueChanged}
    />
  );
}

エラー状態付きのパスワードマスク OTP

import { OtpInputComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';

function App() {
  return (
    <OtpInputComponent
      id="otpinput"
      type="password"
      length={6}
      cssClass="e-error"
      placeholder="*"
    />
  );
}

区切り文字付きの英数字 OTP

import { OtpInputComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';

function App() {
  return (
    <OtpInputComponent
      id="otpinput"
      type="text"
      length={6}
      separator="-"
      textTransform="uppercase"
      stylingMode="filled"
    />
  );
}

主なプロパティ

プロパティ	型	デフォルト	用途
length	number	4	OTP 入力フィールドの数
value	string | number	''	現在の OTP 値
type	'number' | 'text' | 'password'	'number'	入力文字の種類
stylingMode	'outlined' | 'filled' | 'underlined'	'outlined'	視覚スタイルのバリエーション
placeholder	string	''	各フィールドのヒント文字
separator	string	''	フィールド間の文字
cssClass	string	''	カスタム／事前定義 CSS クラス（e-success、e-warning、e-error）
disabled	boolean	false	ユーザー入力を無効にします
autoFocus	boolean	false	レンダリング時に自動でフォーカスします
enableRtl	boolean	false	右から左へのレイアウト
textTransform	'none' | 'uppercase' | 'lowercase'	'none'	大文字／小文字の変換
ariaLabels	string[]	[]	各フィールドの ARIA ラベル
htmlAttributes	{ [key: string]: string }	{}	追加の HTML 属性

ナビゲーションガイド

インストール、セットアップ、基本的な使い方

📄 参照： 入門ガイド

• npm のインストールと Vite プロジェクトのセットアップ
• CSS テーマのインポート
• 最小限の動作するサンプル
• OTP の長さの設定
• デフォルト値の設定
• 読み込み時の自動フォーカス
• トラブルシューティング

入力タイプ、スタイル、視覚設定

📄 参照： 設定ガイド

• 入力タイプ：number、text、password
• スタイルモード：outlined、filled、underlined
• プレースホルダーテキスト（共通／フィールドごと）
• 区切り文字
• 無効状態
• CSS クラスのカスタマイズ（e-success、e-warning、e-error）
• RTL 対応
• テキスト変換（大文字／小文字）
• 状態の永続化

イベントと操作の処理

📄 参照： イベントガイド

• created イベント（レンダリング後の初期化）
• OtpFocusEventArgs を使用する focus および blur イベント
• OtpInputEventArgs を使用したリアルタイム追跡のための input イベント
• OtpChangedEventArgs を使用した OTP 送信のための valueChanged イベント
• focusIn()／focusOut() メソッドによるプログラムからのフォーカス制御
• パターン：条件付き送信ボタン、確認フィードバック

アクセシビリティ

📄 読む: references/accessibility.md

• WCAG 2.2、Section 508 への準拠
• WAI-ARIA のロールと属性
• キーボードナビゲーションのショートカット
• フィールドごとの ariaLabels 設定
• カスタムのアクセシビリティメタデータ用 htmlAttributes
• RTL サポート
• Axe-core と accessibility-checker による検証

API リファレンス全般

📄 読む: references/api.md

• すべてのプロパティ、型、デフォルト値、使用例
• メソッド：destroy()、focusIn()、focusOut()
• すべてのイベントと引数のインターフェース
• 型の列挙：OtpInputType、OtpInputStyle、TextTransform
• イベント引数のインターフェース：OtpFocusEventArgs、OtpInputEventArgs、OtpChangedEventArgs

選択ガイド

どのタイプを使用しますか？

• 数字のみを入力する場合 → type="number"（デフォルト）
• 文字と数字を入力する場合 → type="text"
• 入力内容を非表示またはマスクする場合 → type="password"

どのイベントを使用しますか？

• OTP の入力完了時に検証を実行する → valueChanged
• 入力途中の内容をリアルタイムで追跡する → input
• ユーザーがフィールドに入ったとき、またはフィールドから出たときを把握する → focus / blur

どのスタイルモードを使用しますか？

• 標準的なフォーム → outlined（デフォルト）
• カード／ダッシュボード UI → filled
• マテリアルデザインのフォーム → underlined

検証後に視覚的なフィードバックを表示しますか？

• OTP が正しい場合 → cssClass="e-success" を設定します
• OTP が間違っている場合 → cssClass="e-error" を設定します
• 保留中／注意が必要な場合 → cssClass="e-warning" を設定します

TextArea

TextArea コンポーネントを使用すると、フォームやアプリケーションで複数行のテキスト入力を効率よく収集できます。ユーザーフィードバック、コメント、説明など、長文の入力が必要なあらゆる場面で役立つ基本機能を提供します。

ナビゲーションガイド

はじめに

📄 読む: references/getting-started.md

• インストールと npm のセットアップ
• Vite／React プロジェクトの構成
• TextArea の基本的な実装
• CSS のインポートとテーマ設定
• プロパティ、状態、イベントを使った値の取得と設定

コア機能とコンテンツ

📄 読む: references/value-and-content.md

• プロパティと状態を使った初期値の設定
• textarea の現在の値の取得
• 値のバインディングパターン
• 変更の検出と状態管理

フローティングラベルとプレースホルダー

📄 読む: references/floating-label.md

• フローティングラベルの種類（自動、常時、なし）
• ユーザー操作中のプレースホルダーの動作
• フローティングラベルのローカライズ
• 各種言語・地域設定に応じたプレースホルダーテキストの翻訳

装飾要素（カスタム要素）

📄 読む: references/adornments.md

• textarea の前後にアイコン、ボタン、テキストを追加する
• 前置きおよび後置きのテンプレート
• 装飾要素のフローと向き（水平／垂直）
• よくある用途：文字数カウント、書式設定ツール、検証アイコン

フォーム連携

📄 読む: references/form-support.md

• textarea を使った HTML フォームの送信
• name 属性とフォームデータ
• 検証ルールのための FormValidator との連携
• 必須フィールド、最小／最大文字数の制約
• 検証メッセージとエラー状態

コンテンツの制約

📄 読む: references/max-length.md

• maxLength による文字数制限の適用
• 制限を超えるユーザー入力の防止
• 文字数制限に関するユーザーフィードバック
• エッジケースとベストプラクティス

サイズと寸法

📄 読む: references/rows-columns-sizing.md

• rows プロパティによる表示高さの設定
• cols プロパティによる表示幅の設定
• レスポンシブなサイズ設定の方法
• textarea の寸法の制御

リサイズの動作

📄 読む: references/resize.md

• リサイズモード：垂直、水平、両方、なし
• ユーザーによるリサイズ
• 幅のカスタマイズ
• 固定サイズの textarea に関するレイアウト上の考慮事項

スタイルと外観

📄 参照： references/styling-appearance.md

• サイズクラス（e-small、e-bigger）
• 塗りつぶしとアウトラインの外観モード
• cssClass プロパティを使用したカスタム CSS
• 無効状態と読み取り専用状態
• 検証状態のスタイル（成功、警告、エラー）
• クリアボタンの設定
• 色のカスタマイズと角丸

イベントとユーザー操作

📄 参照： references/events.md

• created：初期化イベント
• input：リアルタイムの値変更の検出
• change：フォーカスアウト時の値変更
• focus：フォーカス取得
• blur：フォーカス喪失
• destroyed：コンポーネントのクリーンアップ
• イベント引数と使用パターン

メソッドとプログラムによる制御

📄 参照： references/methods.md

• focusIn()：プログラムによるフォーカスの設定
• focusOut()：フォーカスの解除
• getPersistData()：永続化状態の取得
• addAttributes()：HTML 属性の動的な追加
• removeAttributes()：HTML 属性の削除
• destroy()：コンポーネントのクリーンアップ

API リファレンス全文

📄 参照： references/api.md

• すべてのプロパティの説明とデフォルト値
• すべてのメソッドのパラメーターと戻り値の型
• すべてのイベントの引数の型
• 型定義と列挙型
• 各 API の使用例

クイックスタート

import { TextAreaComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import './App.css';

function App() {
  const [textValue, setTextValue] = React.useState('');

  const handleChange = (args) => {
    console.log('TextArea value changed:', args.value);
  };

  return (
    <div className='wrap'>
      <TextAreaComponent
        id='default'
        placeholder='Enter your comments'
        value={textValue}
        change={handleChange}
        floatLabelType='Auto'
        rows={5}
        cols={40}
      />
    </div>
  );
}

export default App;

よくあるパターン

パターン 1：検証機能付きフォーム

<TextAreaComponent
  name='comments'
  placeholder='Your feedback'
  floatLabelType='Auto'
  required={true}
  maxLength={500}
  showClearButton={true}
/>

パターン 2：状態を持つ制御コンポーネント

const [value, setValue] = React.useState('');

<TextAreaComponent
  value={value}
  input={(args) => setValue(args.value)}
/>

パターン 3：カスタム CSS によるスタイル設定

<TextAreaComponent
  placeholder='Enter text'
  cssClass='e-outline e-small'
  floatLabelType='Auto'
/>

パターン 4：無効状態と読み取り専用状態

<TextAreaComponent placeholder='Disabled' enabled={false} />
<TextAreaComponent placeholder='Read-only' readonly={true} />

パターン 5：装飾要素付き

<TextAreaComponent
  placeholder='Message'
  prependTemplate={() => <span className='icon'>📝</span>}
  appendTemplate={() => <button>Send</button>}
/>

主要なプロパティの概要

プロパティ	用途	一般的な値
value	テキストエリアの内容を設定／取得	string
placeholder	ヒントテキスト	string
rows	表示する行数	3-10
cols	表示する文字数	30-80
floatLabelType	フローティング動作	'Auto'、'Always'、'Never'
maxLength	文字数制限	number
resizeMode	ユーザーによるサイズ変更	'Both'、'Vertical'、'Horizontal'、'None'
enabled	入力の有効化／無効化	boolean
readonly	読み取り専用モード	boolean
cssClass	カスタムスタイル	'e-outline'、'e-small'、'e-filled'
showClearButton	クリアボタンの表示	boolean

Slider（RangeSlider）

React アプリケーションで Syncfusion Essential JS 2 の SliderComponent を実装するための包括的なガイドです。ツールチップ、目盛り、制限、色の範囲、カスタム値、書式設定、アクセシビリティ、イベントなどに対応し、単一値（Default）、最小範囲の塗りつぶし（MinRange）、デュアルハンドルによる範囲選択（Range）をサポートします。

パッケージ： @syncfusion/ej2-react-inputs

ナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

• インストールとパッケージのセットアップ
• 3 種類のスライダーの基本的な実装
• CSS のインポートとテーマのセットアップ
• 最小限の実行可能な例
• 初期設定

種類と方向

📄 参照： references/types-and-orientation.md

• 3 種類のスライダー：Default、MinRange、Range
• シャドウ／塗りつぶし動作の理解
• 水平方向と垂直方向
• 種類の選択ガイド
• 各種類のコード例

ツールチップと目盛り

📄 参照： references/tooltips-and-ticks.md

• ツールチップの設定と配置
• ツールチップの表示モード（Always、Focus、Click）
• 目盛りと目盛り表示
• largeStep と smallStep の設定
• 小目盛りの表示
• ツールチップと目盛りを組み合わせた例

書式設定と制限

📄 参照： references/formatting-and-limits.md

• 値の書式設定（通貨、パーセンテージ、カスタム書式）
• format API の使用
• スライダーの制限と制約付き範囲
• ハンドルの固定（開始／終了位置の固定）
• 各ハンドルの最小／最大境界
• エッジケースと制約の処理

スタイル設定とカスタマイズ

📄 お読みください： references/styling.md

• トラック、ハンドル、制限、目盛り、ボタンの CSS セレクター
• トラックの色と高さのカスタマイズ
• ハンドルのスタイル設定（色、枠線、サイズ）
• テーマとの統合と組み込みテーマ
• CSS 変数のカスタマイズ
• 高度なスタイル設定パターン

アクセシビリティ

📄 お読みください： references/accessibility.md

• WCAG 2.2 および Section 508 への準拠
• WAI-ARIA 属性とロール（role="slider"、aria-valuemin、aria-valuemax、aria-valuenow、aria-orientation）
• キーボード操作（矢印キー、Home、End、Page Up／Down）
• スクリーンリーダーのサポートと aria-live 領域
• フォーカス管理と色のコントラスト要件
• モバイルでのタッチ操作のアクセシビリティ

カラーレンジ

📄 お読みください： references/color-range.md

• colorRange プロパティと ColorRangeDataModel インターフェース
• 3 ゾーンおよび複数ゾーンのパターン（赤／アンバー／緑）
• Range 型（デュアルハンドル）でのカラーレンジ
• 実行時データに基づく動的なカラーゾーン
• 実際の用途：バッテリー、リスク、パフォーマンス、スコアのパターン
• colorRange と limits、ticks、tooltip の組み合わせ

イベントとメソッド

📄 お読みください： references/events-and-methods.md

• change イベント — ドラッグ中の連続的な値の更新
• changed イベント — ドラッグ終了時に確定した値
• created イベント — レンダリング後の初期化
• renderingTicks — 目盛りごとのラベルテキストをカスタマイズ
• renderedTicks — すべての目盛りのレンダリング後に目盛りの DOM を後処理
• tooltipChange — ツールチップの表示テキストをカスタマイズ
• reposition() メソッド — 呼び出すタイミングと方法
• destroy() メソッド — クリーンアップと削除
• プログラム制御のための React ref パターン
• 一般的なパターン：API 同期、条件分岐、ライブプレビュー

API リファレンス

📄 お読みください： references/api-reference.md

• 公式 SliderComponent プロパティ一覧：value、type、min、max、step、orientation、ticks、tooltip、limits、colorRange、customValues、showButtons、enableAnimation、enabled、readonly、cssClass、width、enableRtl、enablePersistence、enableHtmlSanitizer、locale
• 公式メソッド：reposition()、destroy()
• 正しい引数インターフェースを含む公式イベント一覧：change、changed、created、renderingTicks、renderedTicks、tooltipChange
• インターフェース：TicksDataModel — placement（'Before'／'After'／'Both'／'None'）、largeStep、smallStep、showSmallTicks、format
• インターフェース：TooltipDataModel — isVisible、placement、showOn（'Always'／'Focus'／'Click'）、format、cssClass
• インターフェース：LimitDataModel — enabled、minStart、minEnd、maxStart、maxEnd、startHandleFixed、endHandleFixed
• インターフェース：ColorRangeDataModel — color、start、end
• インターフェース：SliderChangeEventArgs — value、previousValue、action、isInteracted、text
• インターフェース：SliderTickEventArgs — value、text、tickElement
• インターフェース：SliderTickRenderedEventArgs — ticksWrapper、tickElements
• インターフェース：SliderTooltipEventArgs — value、text
• 列挙型：SliderType（'Default' | 'MinRange' | 'Range'）
• 列挙型：SliderOrientation（'Horizontal' | 'Vertical'）

クイックスタート

基本的な単一値スライダー

import React from 'react';
import { SliderComponent } from '@syncfusion/ej2-react-inputs';
import '@syncfusion/ej2-react-inputs/styles/material.css';

function App() {
  return (
    <div>
      <SliderComponent 
        id="slider" 
        value={30}
        min={0}
        max={100}
      />
    </div>
  );
}
export default App;

レンジスライダー（2 つのハンドル）

import React from 'react';
import { SliderComponent } from '@syncfusion/ej2-react-inputs';
import '@syncfusion/ej2-react-inputs/styles/material.css';

function App() {
  const [range, setRange] = React.useState([30, 70]);

  return (
    <div>
      <SliderComponent 
        id="range-slider" 
        type="Range"
        value={range}
        change={(e) => setRange(e.value)}
        min={0}
        max={100}
      />
    </div>
  );
}
export default App;

価格範囲セレクター

import React from 'react';
import { SliderComponent } from '@syncfusion/ej2-react-inputs';
import '@syncfusion/ej2-react-inputs/styles/material.css';

function PriceRangeSelector() {
  const [priceRange, setPriceRange] = React.useState([100, 500]);
  
  const tooltip = {
    placement: 'Before',
    isVisible: true,
    format: 'C2'  // Currency format
  };

  return (
    <div>
      <h3>Price Range: ${priceRange[0]} - ${priceRange[1]}</h3>
      <SliderComponent 
        id="price-slider"
        type="Range"
        value={priceRange}
        change={(e) => setPriceRange(e.value)}
        min={0}
        max={1000}
        step={10}
        tooltip={tooltip}
      />
    </div>
  );
}
export default PriceRangeSelector;

一般的なパターン

パターン 1：目盛り付きの単一値

視覚的な目盛りを使ったシンプルな数値選択には、Default 型を使用します。

<SliderComponent
  id="default-slider"
  value={40}
  min={0}
  max={100}
  step={5}
  ticks={{
    placement: 'After',
    largeStep: 20,
    smallStep: 5,
    showSmallTicks: true
  }}
/>

パターン 2：固定制限付きの範囲

Range 型と制限を使用して、ハンドルの移動を特定の領域に制限します。

<SliderComponent
  id="limited-range"
  type="Range"
  value={[25, 75]}
  limits={{
    enabled: true,
    minStart: 10,
    minEnd: 40,
    maxStart: 60,
    maxEnd: 90
  }}
  tooltip={{ isVisible: true }}
/>

パターン 3：書式設定された値（通貨）

format API を使って、値を通貨として表示します。

<SliderComponent
  id="currency-slider"
  type="Range"
  value={[1000, 5000]}
  min={0}
  max={10000}
  step={100}
  tooltip={{
    isVisible: true,
    format: 'C0'  // Currency without decimals
  }}
  ticks={{
    placement: 'After',
    largeStep: 2000,
    format: 'C0'
  }}
/>

パターン 4：垂直方向

スペースが限られたレイアウトでは、スライダーを垂直方向に表示します。

<div style={{ height: '300px', width: '100px' }}>
  <SliderComponent
    id="vertical-slider"
    value={50}
    orientation="Vertical"
    tooltip={{ isVisible: true }}
  />
</div>

パターン 5：増減ボタン付き

ボタンを追加して、スライダーの値を手動で調整します。

<SliderComponent
  id="button-slider"
  type="Range"
  value={[30, 70]}
  showButtons={true}
  tooltip={{ isVisible: true }}
/>

パターン 6：カラー範囲（ゾーン）

colorRange を使って、スライダートラックに異なる色のセクションを表示します。

import { ColorRangeDataModel } from '@syncfusion/ej2-react-inputs';

const colorRange: ColorRangeDataModel[] = [
  { color: '#ff4040', start: 0,  end: 33  },   // Low zone — red
  { color: '#ffb300', start: 34, end: 66  },   // Mid zone — amber
  { color: '#00c853', start: 67, end: 100 }    // High zone — green
];

<SliderComponent
  id="color-slider"
  type="MinRange"
  value={50}
  colorRange={colorRange}
  tooltip={{ isVisible: true, showOn: 'Always' }}
/>

パターン 7：カスタム値スケール

customValues を使って、数値以外のラベルをスライダーの値として使用します。

<SliderComponent
  id="size-slider"
  customValues={['XS', 'S', 'M', 'L', 'XL', 'XXL']}
  value="M"
  tooltip={{ isVisible: true }}
/>

パターン 8：読み取り専用表示

情報表示用に、ロックされたスライダーを表示します。

<SliderComponent
  id="status-slider"
  type="MinRange"
  value={65}
  min={0}
  max={100}
  readonly={true}
  tooltip={{ isVisible: true, showOn: 'Always' }}
  ticks={{ placement: 'After', largeStep: 20 }}
/>

主なプロパティ

プロパティ	型	デフォルト	目的
value	number | number[]	null	単一の値、または Range 型の [start, end] 配列
type	'Default' | 'MinRange' | 'Range'	'Default'	スライダーのモード
min	number	0	選択可能な最小値
max	number	100	選択可能な最大値
step	number	1	1 ステップごとの値の増減幅
orientation	'Horizontal' | 'Vertical'	'Horizontal'	スライダーの方向
tooltip	TooltipDataModel	{ isVisible: false }	ツールチップの設定
ticks	TicksDataModel	{ placement: 'before' }	目盛りの設定
limits	LimitDataModel	{ enabled: false }	つまみの移動制限
colorRange	ColorRangeDataModel[]	[]	トラック上のカラーゾーン
customValues	string[] | number[]	null	カスタム値スケール（min/max/step を無視）
showButtons	boolean	false	+/- 増減ボタンを表示
enabled	boolean	true	スライダーを有効または無効にする
readonly	boolean	false	読み取り専用の表示モード
enableRtl	boolean	false	右から左へのレイアウト
width	number | string	null	スライダー要素の幅
cssClass	string	''	ルート要素に適用するカスタム CSS クラス

型の比較

型	つまみ	塗りつぶしの動作	用途
Default	1 個	塗りつぶしなし	シンプルな数値選択
MinRange	1 個	最小値から塗りつぶし	視覚的な進捗／レベル表示
Range	2 個	つまみの間を塗りつぶし	最小値／最大値の範囲選択

一般的なユースケース

予算範囲セレクター

ステップ増分と通貨形式を使って、予算の最小値と最大値を選択します。 → type="Range"、step={50}、形式 'C0'、ツールチップ有効を使用

時間範囲ピッカー

時間枠（時間、分、日）を選択します。 → type="Range" と、renderingTicks イベントによるカスタム書式設定を使用

音量／明るさコントロール

すぐにフィードバックを得られる、単一のつまみによる調整です。 → type="Default"、目盛りなし、常時表示のツールチップを使用

スコア／評価の範囲

現在のレベルを影付きで表示する MinRange モードです。 → type="MinRange"、min={0}、max={10}、ステップ単位の値を使用

商品フィルター

価格範囲を指定して、複数の商品カテゴリを絞り込みます。 → type="Range"、各カテゴリの制限、イベントハンドラーを使用

イベント

イベント	発生条件	用途
created	コンポーネントの作成とレンダリングが完了したとき	一度だけ実行するセットアップ処理
change	ドラッグ中に値が変化しているとき	リアルタイムのフィードバック（継続的）
changed	ドラッグが完了したとき（つまみを離したとき）	最終的に確定した値の取得
tooltipChange	ツールチップのレンダリング直前	ツールチップテキストのカスタム書式設定
renderingTicks	各目盛りのレンダリング中	目盛りラベルテキストのカスタマイズ
renderedTicks	すべての目盛りのレンダリング後	目盛りの DOM 要素の後処理

⚠️ 注意： ドラッグ中の継続的な更新に使う公式イベントは changing ではなく change です。ドラッグ完了後に発生するイベントは changed です。onChange プロパティ（React のネイティブ入力プロパティです）は使用しないでください。change と changed を直接使用してください。

トラブルシューティングのクイックリンク

コンポーネントが表示されない場合 → getting-started.mdでCSSのインポートとテーマを確認してください

値が更新されない場合 → change（連続更新）またはchanged（リリース時）イベントを使用してください。onChangeは使用しないでください

書式設定が機能しない場合 → formatting-and-limits.mdのformat APIの例を参照してください

アクセシビリティに問題がある場合 → ARIAとキーボードのサポートについてはaccessibility.mdを参照してください

垂直スライダーが描画されない場合 → 明示的なheight（例：style={{ height: '300px' }}）を指定したコンテナーでラップしてください

値が1つのRangeタイプの場合 → type="Range"には必ずvalue={[start, end]}の配列を渡してください

色のゾーンが表示されない場合 → colorRange配列に有効なstart／end／colorプロパティがあることを確認してください

次のステップ

1. 用途に応じてスライダーのタイプ（Default、MinRange、Range）を選択します
2. インストールについてはgetting-started.mdをお読みください
3. 必要な機能に対応するリファレンスに移動します
4. リファレンスファイルの例を使ってテストします
5. styling.mdを使ってスタイルをカスタマイズします
6. accessibility.mdに従ってアクセシビリティを確保します
7. api-reference.mdを参照し、すべてのAPIの使用方法を確認します

⚠️ 重要： references/api-reference.mdに明記されたAPIのみを使用してください。onChange（change／changedを使用）、toggle()、open()、close()、またはドキュメントに記載されていないメソッドは参照しないでください。

ColorPicker

Syncfusion React ColorPickerでは、ビジュアルピッカー（HSV＋不透明度）またはスウォッチのパレットを使って色を選択できます。デフォルトではSplitButtonとして描画され（ポップアップを開きます）、インライン表示にも対応しています。また、RGB、HSV、Hexの色形式をサポートしています。

パッケージ： @syncfusion/ej2-react-inputs
コンポーネント： <ColorPickerComponent>

ナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

• ViteまたはCreate React Appを使用したインストール
• npmパッケージのセットアップ
• CSSテーマのインポート
• 最小限の動作例
• アプリケーションの実行

モードと色の値

📄 参照： references/modes-and-value.md

• インライン描画とポップアップ（SplitButton）
• PickerモードとPaletteモード
• 初期色の値の設定（16進コード）
• 不透明度のサポート
• パレットのみの描画（モードのロック）

パレットの機能

📄 参照： references/palette-features.md

• カスタムカラーパレット（presetColors）
• カスタムパレットタイルの描画（beforeTileRender）
• 色なし／色のクリアのサポート（noColor）
• カスタムの色なしオプション
• 最近使用した色の表示（showRecentColors）
• パレットの列数（columns）

UIのカスタマイズ

📄 参照： references/ui-customization.md

• 入力値の領域を非表示にする
• ピッカーのハンドルをカスタマイズする
• アイコン付きのカスタムプライマリボタン
• 入力要素に16進コードを表示する
• コントロールボタン（Apply／Cancel）を非表示にする
• CSSクラスのオーバーライドとTheme Studio
• SplitButtonとDialogを使ったExcel風のカスタムUI

統合と応用

📄 参照： references/integration-and-advanced.md

• ColorPickerをDropDownButtonに埋め込む
• ポップアップの切り替え制御
• ページの再読み込み後も状態を保持する
• モードスイッチャーの表示とイベント
• 無効状態

ローカライズとRTL

📄 参照： references/localization-and-rtl.md

• Apply／Cancel／ModeSwitcherのラベルをローカライズする
• L10nで翻訳オブジェクトを読み込む
• 右から左への描画（enableRtl）

アクセシビリティ

📄 参照： references/accessibility.md

• WCAG 2.2／Section 508 への準拠
• WAI-ARIA 属性
• キーボードナビゲーションのショートカット
• アクセシビリティの検証

API リファレンス

📄 参照： references/api.md

• 型とデフォルト値を含むすべてのプロパティ
• シグネチャを含むすべてのメソッド
• ペイロード型を含むすべてのイベント

---

クイックスタート

npm install @syncfusion/ej2-react-inputs --save

/* src/App.css */
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-react-inputs/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";

import { ColorPickerComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import './App.css';

function App() {
  return (
    <div id="container">
      <div className="wrap">
        <h4>Choose Color</h4>
        <ColorPickerComponent id="color-picker" />
      </div>
    </div>
  );
}
export default App;

---

よく使われるパターン

インラインピッカー（ポップアップなし）

<ColorPickerComponent inline={true} showButtons={false} />

パレットのみのモード

<ColorPickerComponent mode="Palette" modeSwitcher={false} showButtons={false} />

初期色の設定と変更の処理

import { ColorPickerEventArgs } from '@syncfusion/ej2-react-inputs';

function App() {
  function onChange(args: ColorPickerEventArgs): void {
    console.log(args.currentValue.hex);  // e.g. "#ff5733"
    console.log(args.currentValue.rgba); // e.g. "rgba(255,87,51,1)"
  }
  return <ColorPickerComponent value="#ff5733" change={onChange} />;
}

プリセットカラーを使ったカスタムパレット

const presets: { [key: string]: string[] } = {
  'brand': ['#0078d4', '#106ebe', '#005a9e', '#004578'],
  'accents': ['#e81123', '#ff8c00', '#00b294', '#68217a']
};

<ColorPickerComponent
  mode="Palette"
  presetColors={presets}
  columns={4}
  modeSwitcher={false}
  inline={true}
  showButtons={false}
/>

不透明度スライダーを無効にする

<ColorPickerComponent enableOpacity={false} />

色なしに対応する（選択をクリア）

<ColorPickerComponent
  mode="Palette"
  noColor={true}
  modeSwitcher={false}
  showButtons={false}
/>

ローカライズ（ドイツ語）

import { L10n } from '@syncfusion/ej2-base';

L10n.load({
  'de-DE': {
    'colorpicker': { Apply: 'Anwenden', Cancel: 'Abbrechen', ModeSwitcher: 'Modus wechseln' }
  }
});

<ColorPickerComponent locale="de-DE" />

---

主なプロパティ

プロパティ	型	デフォルト	用途
value	string	'#008000ff'	初期色（3／4／6／8 桁の 16 進数）
mode	'Picker' | 'Palette'	'Picker'	初期表示するパネル
inline	boolean	false	コンポーネントを直接表示（ポップアップなし）
showButtons	boolean	true	適用／キャンセルボタンを表示
modeSwitcher	boolean	true	モード切り替えボタンを表示
noColor	boolean	false	パレットに「色なし」タイルを追加
presetColors	object	null	パレット用のカスタムカラーグループ
columns	number	10	パレットの列数
enableOpacity	boolean	true	不透明度スライダーを表示
showRecentColors	boolean	false	最近使用した色のタイルを表示（パレットのみ）
disabled	boolean	false	コンポーネントを無効化
cssClass	string	''	ルート要素に適用するカスタム CSS クラス
enableRtl	boolean	false	右から左への表示
locale	string	''	ローカライズ用のロケール文字列

MaskedTextBox

Syncfusion React MaskedTextBox コンポーネントは、マスクパターンを適用して特定の入力形式を強制し、ユーザーが正しい構造でデータを入力できるようにします。電話番号、郵便番号、日付、IP アドレス、プロダクトキーなど、入力が定義済みの形式に従う必要があるあらゆる用途に最適です。

ナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

• npm（@syncfusion/ej2-react-inputs）によるインストール
• Vite／Create-React-App のセットアップ
• テーマ設定用の CSS インポート
• 基本的な MaskedTextBox のレンダリング
• 形式を強制するための mask プロパティの設定

マスクの設定

📄 参照： references/mask-configuration.md

• 標準のマスク要素トークン（0、9、#、L、?、&、C、A、a、<、>、|、\）
• customCharacters プロパティによるカスタム文字
• 柔軟なパターンに対応する正規表現マスク（例：IP アドレス）
• promptChar によるプロンプト文字のカスタマイズ

装飾要素（入力欄の前後に追加する要素）

📄 参照： references/adornments.md

• prependTemplate と appendTemplate を使って入力欄の前後にアイコンやボタンを追加
• 入力ガイド、クイックアクション、コンテキストラベル
• クラスコンポーネントと関数コンポーネントの例

React Hooks との連携

📄 参照： references/react-hooks.md

• useState を使った制御コンポーネント
• useEffect + useRef + focusIn() を使ったマウント時の自動フォーカス
• useReducer を使った複数のマスク付き入力欄
• 関数コンポーネントでの change イベントの処理

スタイル、外観、カスタマイズ

📄 参照： references/style-and-customization.md

• cssClass によるカスタムスタイルの適用
• ラッパー、ホバー、フォーカス状態の CSS オーバーライド
• focus イベント（selectionStart、selectionEnd）を使ったフォーカス時のカーソル位置の設定
• type="tel" によるモバイルでのテンキー表示
• floatLabelType のオプション（Never、Always、Auto）

フォームの検証

📄 参照: references/form-validation.md

• Syncfusion の FormValidator との統合
• ej2_instances を使用したカスタム検証ルールの定義
• customPlacement によるカスタムエラー配置
• promptChar を使用した未入力のマスク値の確認

API リファレンス

📄 参照: references/api.md

• すべてのプロパティ：mask、value、placeholder、floatLabelType、promptChar、customCharacters、cssClass、enabled、readonly、showClearButton、enableRtl、enablePersistence、htmlAttributes、locale、width、prependTemplate、appendTemplate
• メソッド：focusIn()、focusOut()、getMaskedValue()、destroy()、getPersistData()
• イベント：change、focus、blur、created、destroyed

クイックスタート

import * as React from 'react';
import { MaskedTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
import '../node_modules/@syncfusion/ej2-react-inputs/styles/tailwind3.css';

export default function App() {
  return (
    <MaskedTextBoxComponent
      mask="000-000-0000"
      placeholder="Enter phone number"
      floatLabelType="Auto"
    />
  );
}

一般的なパターン

電話番号の入力

<MaskedTextBoxComponent mask="000-000-0000" placeholder="Phone" floatLabelType="Always" />

正規表現マスクを使った IP アドレス

<MaskedTextBoxComponent
  mask="[0-2][0-9][0-9].[0-2][0-9][0-9].[0-2][0-9][0-9].[0-2][0-9][0-9]"
  placeholder="IP Address (ex: 212.212.111.222)"
  floatLabelType="Always"
/>

カスタム AM/PM 時刻入力

const chars = { P: 'P,A,p,a', M: 'M,m' };
<MaskedTextBoxComponent
  mask="00:00 >PM"
  customCharacters={chars}
  placeholder="Time (ex: 10:00 PM)"
  floatLabelType="Always"
/>

マスクされた値をプログラムで読み取る

const maskRef = React.useRef(null);
// Later:
const maskedVal = maskRef.current.getMaskedValue(); // e.g., "123-456-7890"
const rawVal = maskRef.current.value;               // e.g., "1234567890"

変更イベントを使った制御入力

const [phone, setPhone] = React.useState('');
<MaskedTextBoxComponent
  mask="000-000-0000"
  value={phone}
  change={(e) => setPhone(e.value)}
  placeholder="Phone"
  floatLabelType="Auto"
/>

評価

Syncfusion React の RatingComponent を使用すると、ユーザーは星をはじめとする視覚的な記号から評価値を選択できます。精度モード、カスタムテンプレート、ツールチップ、ラベル、リセット、読み取り専用／無効状態に対応し、完全なアクセシビリティ準拠と柔軟な CSS カスタマイズ機能を備えています。

パッケージ： @syncfusion/ej2-react-inputs

---

ナビゲーションガイド

はじめに

📄 参照: references/getting-started.md

• @syncfusion/ej2-react-inputs のインストール
• Tailwind3 用 CSS テーマのインポート
• RatingComponent の最小構成
• 初期 value プロパティの設定
• Vite／React アプリの実行

選択とリセット

📄 参照: references/selection.md

• value を使った評価値の設定
• min による最小評価値の設定
• enableSingleSelection による単一選択モード
• allowReset によるリセットボタンの表示／非表示
• プログラムによる reset() メソッドの呼び出し

精度モード

📄 参照: references/precision-modes.md

• PrecisionType.Full — 整数単位の増分
• PrecisionType.Half — 0.5 単位の増分
• PrecisionType.Quarter — 0.25 単位の増分
• PrecisionType.Exact — 0.1 単位の増分
• 精度と初期値の組み合わせ

外観とカスタマイズ

📄 参照: references/appearance.md

• itemsCount によるアイテム数の制御
• disabled によるコンポーネントの無効化
• visible によるコンポーネントの表示／非表示
• readOnly による読み取り専用モード
• cssClass による CSS カスタマイズ（境界線の色、塗りつぶしの色、アイテム間隔、アイコン）
• CSS による評価アイコンの変更

ラベル

📄 参照: references/labels.md

• showLabel による現在値ラベルの表示
• labelPosition のオプション：Top、Bottom、Left、Right
• labelTemplate によるラベル内容のカスタマイズ

ツールチップ

📄 参照: references/tooltip.md

• showTooltip によるツールチップの有効化
• tooltipTemplate によるツールチップ内容のカスタマイズ
• cssClass によるツールチップの外観設定

テンプレート

📄 参照: references/templates.md

• 評価されていないアイテム用の emptyTemplate
• 評価済みアイテム用の fullTemplate
• 絵文字の評価記号
• SVG アイコンの評価記号
• PNG 画像の評価記号
• --rating-value によるテンプレートの精度サポート

イベント

📄 参照: references/events.md

• beforeItemRender — 描画前のアイテムをカスタマイズ
• created — コンポーネントの初期化後
• onItemHover — ホバー中のアイテムを追跡
• valueChanged — ユーザーによる評価の変更に対応

アクセシビリティ

📄 参照: references/accessibility.md

• WCAG 2.2／Section 508／ADA への準拠
• WAI-ARIA 属性（role=slider、aria-valuemin/max/now）
• キーボードナビゲーションのショートカット
• enableRtl による RTL サポート
• スクリーンリーダーのサポート

API リファレンス

📄 参照: references/api.md

• すべてのプロパティ、メソッド、イベントとその型およびデフォルト値
• RatingItemEventArgs、RatingHoverEventArgs、RatingChangedEventArgs
• LabelPosition および PrecisionType 列挙型

---

クイックスタート

npm install @syncfusion/ej2-react-inputs --save

/* src/App.css */
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-react-inputs/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";

import { RatingComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import './App.css';

function App() {
  return (
    <RatingComponent id="rating" value={3} />
  );
}
export default App;

---

よく使われるパターン

値変更ハンドラー付きの評価

import { RatingComponent, RatingChangedEventArgs } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';

function App() {
  const [rating, setRating] = React.useState(3);

  const handleValueChanged = (args: RatingChangedEventArgs) => {
    setRating(args.value);
  };

  return (
    <RatingComponent
      id="rating"
      value={rating}
      valueChanged={handleValueChanged}
    />
  );
}
export default App;

ラベル付きの半精度評価

import { RatingComponent, PrecisionType } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';

function App() {
  return (
    <RatingComponent
      id="rating"
      value={3.5}
      precision={PrecisionType.Half}
      showLabel={true}
    />
  );
}
export default App;

読み取り専用の評価（表示のみ）

import { RatingComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';

function App() {
  return (
    <RatingComponent id="rating" value={4} readOnly={true} showTooltip={false} />
  );
}
export default App;

リセットボタン付きの評価

import { RatingComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';

function App() {
  return (
    <RatingComponent id="rating" value={3} allowReset={true} />
  );
}
export default App;

---

主要なプロパティ一覧

プロパティ	型	デフォルト	目的
value	number	0.0	現在の評価値
itemsCount	number	5	評価項目の数
min	number	0.0	選択可能な最小値
precision	PrecisionType | string	Full	評価の刻み幅
allowReset	boolean	false	リセットボタンを表示
readOnly	boolean	false	ユーザー操作を無効化
disabled	boolean	false	コンポーネントを無効化
visible	boolean	true	コンポーネントを表示／非表示
showLabel	boolean	false	現在値のラベルを表示
labelPosition	LabelPosition | string	Right	ラベルの配置
showTooltip	boolean	true	ホバーツールチップを表示
enableSingleSelection	boolean	false	選択できる項目を1つだけにする
enableAnimation	boolean	true	ホバーアニメーション
enableRtl	boolean	false	右から左への表示モード
cssClass	string	''	カスタム CSS クラス

---