syncfusion-javascript-inputs

Syncfusion JavaScript 入力

ColorPicker

ColorPicker コンポーネントは、色の値を選択および調整するためのユーザーインターフェイスです。HEX、RGB、HSV のカラーモデル、パレットモードとピッカーモード、不透明度の制御、インライン描画、カスタムプリセットパレット、2 つのモードの切り替えに対応しています。

---

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

はじめに

📄 参照: references/getting-started.md

• インストールとパッケージの設定（@syncfusion/ej2-inputs）
• 必須の CSS インポートとテーマ設定
• <input type="color"> を使った基本的な初期化
• ピッカーモードとパレットモード
• inline: true によるインライン描画
• 色の値の事前設定
• ライフサイクルイベント：created

モードと表示

📄 参照: references/modes-display.md

• mode: 'Picker' — HSV グラデーション領域、色相スライダー、不透明度スライダー
• mode: 'Palette' — 色のグリッドタイル
• modeSwitcher — モード切り替えボタンの表示／非表示
• inline: true — ポップアップを使わずに埋め込み表示
• createPopupOnClick — ポップアップを遅延作成
• showButtons — 適用／キャンセルボタンの表示／非表示
• showRecentColors — 最近使用した色のストリップ（パレットモードのみ）

パレットのカスタマイズ

📄 参照: references/palette-customization.md

• デフォルトのパレット色（100 色のグリッド）
• presetColors — 名前付きセクションを含むカスタム色グループ
• columns — 1 行あたりのタイル数
• noColor — 色なしを示す透明なタイル
• beforeTileRender イベント — タイル要素のカスタマイズ
• カスタムパレットグループ（複数の名前付きセクション）

色の値と変換

📄 参照: references/color-value-conversion.md

• value プロパティ — HEX8 形式（#rrggbbaa）
• getValue(value?, type?) — HEX、HEXA、RGB、RGBA、HSV、HSVA 間の変換
• change および select イベントから色を取得（currentValue.hex、currentValue.rgba）
• enableOpacity による不透明度の処理
• value と dataBind() を使ったプログラムからの色変更の設定

不透明度とアクセシビリティ

📄 参照: references/opacity-accessibility.md

• enableOpacity — 不透明度スライダーとアルファチャンネルの表示／非表示
• enableRtl — 右から左へのレイアウト
• disabled — コンポーネントを無効化
• enablePersistence — 再読み込み後も選択した値を保持
• cssClass — スタイル設定用のカスタム CSS クラス
• ピッカーモードとパレットモードでのキーボード操作
• focusIn() — プログラムからフォーカスを設定

イベント

📄 参照: references/events.md

• change — 色が適用されたときに発生（適用ボタンのクリック時、または showButtons: false の場合は即時）
• select — showButtons: true のとき、色を選択すると発生
• beforeOpen / open — ポップアップを開くライフサイクル（キャンセル対応）
• beforeClose — ポップアップを閉じるライフサイクル（キャンセル対応）
• beforeModeSwitch / onModeSwitch — モード切り替えのライフサイクル
• beforeTileRender — パレットタイルのカスタマイズ
• created — コンポーネントの準備完了

API リファレンス

📄 参照: references/api.md

• 14 個すべてのプロパティと型およびデフォルト値
• 11 個すべてのメソッドとパラメーター表
• 9 個すべてのイベントと引数インターフェイス
• イベント引数インターフェイス：ColorPickerEventArgs、PaletteTileEventArgs、BeforeOpenCloseEventArgs、OpenEventArgs、ModeSwitchEventArgs

---

クイックスタート

最小構成のピッカー（ポップアップモード）

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

const colorPicker: ColorPicker = new ColorPicker({
  value: '#008000ff',
  change: (args) => {
    console.log('Selected hex:', args.currentValue.hex);
    console.log('Selected rgba:', args.currentValue.rgba);
  }
});
colorPicker.appendTo('#color-picker');

<input type="color" id="color-picker" />

パレットモード（インライン）

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

const colorPicker: ColorPicker = new ColorPicker({
  mode: 'Palette',
  inline: true,
  showButtons: false,
  change: (args) => {
    document.getElementById('preview').style.backgroundColor = args.currentValue.rgba;
  }
});
colorPicker.appendTo('#color-picker');

---

共通パターン

目的	プロパティ／メソッド
初期色を設定する	value: '#ff5733ff'
パレットのグリッドレイアウト	mode: 'Palette'
ページに埋め込む	inline: true
適用／キャンセルボタンを非表示にする	showButtons: false
カラーグループをカスタマイズする	presetColors: { primary: [...], accent: [...] }
透明度を無効にする	enableOpacity: false
透明色のオプション	noColor: true（パレットモードのみ）
最近使用した色を表示する	showRecentColors: true（パレットモードのみ）
色の形式を変換する	colorPicker.getValue(hex, 'rgba')
ポップアップを切り替える	colorPicker.toggle()
コンポーネントにフォーカスする	colorPicker.focusIn()
変更を適用する	colorPicker.value = '#ff0000'; colorPicker.dataBind()

MaskedTextBox

MaskedTextBox（@syncfusion/ej2-inputs）は、入力を1文字ずつ誘導・検証するマスクパターンを適用し、構造化された入力を強制します。電話番号、日付、IPアドレス、SSN、郵便番号など、入力が特定の形式に従うようにする必要がある場合に使用してください。

ナビゲーションガイド

はじめに

📄 参照: references/getting-started.md

• インストールと CSS のインポート
• MaskedTextBox の基本的なセットアップ
• mask プロパティの設定
• プレースホルダーとフローティングラベル
• 最小限の実用例

マスクの設定

📄 参照: references/mask-configuration.md

• 標準マスク要素の一覧（0、9、#、L、?、&、C、A、a、<、>、|、\）
• customCharacters によるカスタム文字
• 正規表現マスク
• プロンプト文字のカスタマイズ（promptChar）

値へのアクセスとプログラムによる制御

📄 参照: references/value-access.md

• value プロパティ（生の値、マスクなし）
• getMaskedValue() メソッド（マスク形式）
• プログラムによる値の設定
• change イベントでの入力値の読み取り
• focusIn()／focusOut() メソッド

カスタマイズと外観

📄 参照: references/customization.md

• カスタムスタイル用の cssClass
• floatLabelType（Never／Always／Auto）
• enableRtl、enabled、readonly
• showClearButton
• 追加の HTML 属性を指定する htmlAttributes
• width、placeholder
• ラッパーとホバー状態の CSS オーバーライド

装飾要素

📄 参照: references/adornments.md

• prependTemplate — 入力欄の前に HTML を挿入します（アイコン、ラベル、国番号など）
• appendTemplate — 入力欄の後に HTML を挿入します（ボタン、アイコン、単位の接尾辞など）
• 視覚的な区切り用の e-input-separator クラス
• 一般的な装飾パターンの一覧
• ⚠️ セキュリティ: テンプレート HTML にユーザー入力やリモートソースに由来する値が含まれる場合は、XSS インジェクションを防ぐため、バインドする前にサニタイズまたはエンコードしてください。

イベントと操作

📄 参照: references/events.md

• MaskChangeEventArgs を伴う change イベント
• MaskFocusEventArgs を伴う focus イベント（カーソル位置の制御）
• MaskBlurEventArgs を伴う blur イベント
• created イベントと destroyed イベント
• 開始位置／終了位置／任意の位置へのカーソル設定

検証と使用方法

📄 参照: references/validation-how-to.md

• カスタムルールを使用した FormValidator との連携
• モバイルでのテンキー表示（htmlAttributes: { type: 'tel' }）
• 入力が完了しているか、一部のみかの確認
• アクセシビリティ（ARIA 属性、WCAG 準拠）

API リファレンス

📄 参照: references/api.md

• すべてのプロパティ、メソッド、イベント、インターフェース
• MaskedTextBox API の全容

---

クイックスタート

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

// CSS in styles.css:
// @import '../node_modules/@syncfusion/ej2-base/styles/material.css';
// @import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';

// HTML: <input id="mask" type="text" />

let mask: MaskedTextBox = new MaskedTextBox({
    mask: '000-000-0000',
    placeholder: 'Phone Number',
    floatLabelType: 'Always'
});
mask.appendTo('#mask');

---

一般的なパターン

シナリオ	パターン
電話番号	mask: '(999) 999-9999'
米国の郵便番号	mask: '00000' または mask: '00000-9999'
日付	mask: '00/00/0000'
IP アドレス	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]'
クレジットカード	mask: '0000 0000 0000 0000'
時刻（AM/PM）	mask: '00:00 >PM' と customCharacters: { P: 'P,A,p,a', M: 'M,m' }
英字のみ	mask: 'LLLLLL'
英数字	mask: 'AAAAAA'
大文字・小文字の制御	mask: '>LLL<LLL'（最初の3文字は大文字、次の3文字は小文字）

生の値を読み取る

let mask: MaskedTextBox = new MaskedTextBox({
    mask: '(999) 999-9999',
    change: (args) => {
        console.log('Raw value:', args.value);           // digits only
        console.log('Masked value:', args.maskedValue);  // with mask chars
    }
});
mask.appendTo('#mask');

// Or programmatically:
const raw = mask.value;
const formatted = mask.getMaskedValue();

値を事前入力したフローティングラベル

let mask: MaskedTextBox = new MaskedTextBox({
    mask: '(999) 9999-999',
    value: '8674321756',
    placeholder: 'Mobile Number',
    floatLabelType: 'Auto'
});
mask.appendTo('#mask');

OTP 入力

OTP 入力（@syncfusion/ej2-inputs）は、ワンタイムパスワードの入力用に個別の入力フィールドを表示します。長さ、入力タイプ（数値／テキスト／パスワード）、スタイルモード、区切り文字、プレースホルダー、アクセシビリティ属性を設定でき、イベントもすべて処理できます。2FA 画面、OTP 検証フォーム、PIN 入力フローで使用します。

ナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

• インストールと CSS のインポート
• OTP 入力の基本的な初期化
• value プロパティの設定と読み取り
• レンダリング時に自動フォーカスする autoFocus
• 最小限の動作例

入力タイプと値

📄 参照： references/input-types.md

• type — number（デフォルト）、text、password
• value — OTP 値の事前設定または読み取り
• 数値 OTP と英数字 OTP に適したタイプの選択

外観と設定

📄 参照： references/appearance.md

• length — OTP 入力フィールドの数（デフォルトは4）
• disabled — コントロール全体の無効化
• cssClass — カスタムクラスと定義済みクラス（e-success、e-warning、e-error）
• enableRtl — 右から左への表示

スタイルモード

📄 参照： references/styling-modes.md

• stylingMode — outlined（デフォルト）、filled、underlined
• 各モードの使い分け

プレースホルダー

📄 参照： references/placeholder.md

• 1文字のプレースホルダー（すべてのフィールドで共通）
• 複数文字のプレースホルダー（フィールドごとに1文字）

区切り文字

📄 参照： references/separator.md

• separator — 各入力フィールド間に表示する文字
• 一般的な区切り文字のパターン（/、-、·）

イベント

📄 参照： references/events.md

• created — コンポーネントのレンダリング後に発生
• focus / blur — フォーカスイン／フォーカスアウトイベント（OtpFocusEventArgs）
• input — 個々のフィールドが変更されるたびに発生（OtpInputEventArgs）
• valueChanged — すべてのフィールドに入力され、フォーカスアウトしたときに発生（OtpChangedEventArgs）

アクセシビリティ

📄 参照： references/accessibility.md

• WCAG 2.2、Section 508、ARIA への準拠
• ariaLabels — フィールドごとの ARIA ラベル配列
• htmlAttributes — カスタム HTML 属性
• キーボードナビゲーション（矢印キー、Tab、Shift+Tab）

API リファレンス

📄 参照： references/api.md

• すべてのプロパティ、メソッド、イベント、インターフェイス
• OTP 入力 API の全項目

---

クイックスタート

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

// CSS in styles.css:
// @import '../node_modules/@syncfusion/ej2-base/styles/material.css';
// @import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';

// HTML: <div id="otp_input"></div>

let otpInput: OtpInput = new OtpInput({
    length: 6,
    placeholder: 'x',
    stylingMode: 'outlined'
});
otpInput.appendTo('#otp_input');

---

一般的なパターン

シナリオ	主なプロパティ
4桁の数値 OTP	type: 'number'（デフォルト）
6桁の数値 OTP	length: 6
英数字コード	type: 'text'
非表示／パスワード入力	type: 'password'
ハイフン区切り	separator: '-'
読み込み時に自動フォーカス	autoFocus: true
アウトラインスタイル（デフォルト）	stylingMode: 'outlined'
塗りつぶしスタイル	stylingMode: 'filled'
下線スタイル	stylingMode: 'underlined'
事前入力された値	value: '1234'
無効状態	disabled: true
成功状態のスタイル	cssClass: 'e-success'
エラー状態のスタイル	cssClass: 'e-error'

入力済みの OTP 値を取得

import { OtpInput, OtpChangedEventArgs } from '@syncfusion/ej2-inputs';

let otpInput: OtpInput = new OtpInput({
    length: 6,
    valueChanged: (args: OtpChangedEventArgs) => {
        console.log('Entered OTP:', args.value);
        // Trigger verification here
    }
});
otpInput.appendTo('#otp_input');

区切り文字付きのパスワードマスク OTP

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

let otpInput: OtpInput = new OtpInput({
    length: 6,
    type: 'password',
    separator: '-',
    stylingMode: 'outlined',
    autoFocus: true
});
otpInput.appendTo('#otp_input');

Range Slider

Range Slider（@syncfusion/ej2-inputs）を使用すると、トラック上のハンドルをドラッグして、単一の値または値の範囲を選択できます。3 種類（Default、MinRange、Range）、目盛り、ツールチップ、制限、向き、書式設定、アクセシビリティ、フォーム検証に対応しています。

ナビゲーションガイド

はじめに

📄 読む： references/getting-started.md

• インストールと依存関係（@syncfusion/ej2-inputs、@syncfusion/ej2-base、@syncfusion/ej2-popups、@syncfusion/ej2-buttons）
• CSS テーマのインポート
• Slider の基本的な初期化と appendTo
• value、min、max、step の設定
• 向き（水平／垂直）
• ボタンの表示／非表示（showButtons）

スライダーの種類と基本設定

📄 読む： references/types-and-configuration.md

• type — Default、MinRange、Range
• 単一の値と範囲の値（value: 30 と value: [30, 70]）
• min、max、step の設定
• enabled、readonly、enableRtl
• enableAnimation、cssClass、width
• 反転スライダー（min/max の値を入れ替えます）

目盛りと書式設定

📄 読む： references/ticks-and-format.md

• ticks オブジェクト：placement、largeStep、smallStep、showSmallTicks、format
• 目盛りの配置オプション：Before、After、Both、None
• 書式設定 API（Numeric N、Percentage P、Currency C、# 指定子）
• renderingTicks イベントと tooltipChange イベントを使用したカスタム書式設定
• 日付／時刻の書式パターン
• 数値のカスタム書式設定

ツールチップ

📄 読む： references/tooltip-and-buttons.md

• tooltip オブジェクト：isVisible、placement、showOn、format、cssClass
• ツールチップの配置：Before、After
• showOn の値：Auto、Always、Hover、Focus、Click
• showButtons — 増減ボタン
• ボタンのラベルを L10n でローカライズ

制限

📄 読む： references/limits.md

• limits オブジェクト：enabled、minStart、minEnd、maxStart、maxEnd、startHandleFixed、endHandleFixed
• ハンドルの移動範囲を制限する
• ハンドルを所定の位置に固定する
• Default／MinRange の制限と Range の制限

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

📄 読む： references/customization.md

• トラック、ハンドル、制限、目盛り、ボタンの CSS クラスを上書きする
• change イベントによる動的な色の変更
• グラデーション／カラーバンドのスタイル設定
• つまみの形状のカスタマイズ（四角形、円形、楕円形、画像）
• renderedTicks イベントによる目盛りラベルのカスタマイズ

応用ガイド

📄 読む： references/advanced-how-to.md

• 日付書式スライダー（ミリ秒ベース）
• 時刻書式スライダー
• 数値のカスタム書式設定（Km、小数、先行ゼロ）
• 反転スライダーのパターン
• refresh() を使用して非表示状態からスライダーを表示する
• FormValidator と changed イベントによるフォーム検証

アクセシビリティ

📄 読む： references/accessibility.md

• WCAG 2.2、Section 508 に準拠
• WAI-ARIA 属性（role=slider、aria-valuemin/max/now/text、aria-orientation、aria-label）
• キーボード操作（矢印キー、Home、End、Page Up／Down）

API リファレンス

📄 読む： references/api.md

• すべてのプロパティ、メソッド、イベント、サブモデルのインターフェイス
• TicksDataModel、TooltipDataModel、LimitDataModel
• イベント引数の型

---

クイックスタート

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

// CSS in styles.css:
// @import '../node_modules/@syncfusion/ej2-base/styles/material.css';
// @import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
// @import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
// @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';

// HTML: <div id="slider"></div>

let slider: Slider = new Slider({
    value: 30,
    min: 0,
    max: 100,
    step: 1
});
slider.appendTo('#slider');

---

一般的なパターン

シナリオ	主な設定
単一値スライダー	type: 'Default'（デフォルト）、value: 30
最小範囲のシャドウ	type: 'MinRange'、value: 30
2 つのハンドルを持つ範囲	type: 'Range'、value: [30, 70]
垂直方向	orientation: 'Vertical'
目盛りを表示	ticks: { placement: 'After', largeStep: 20 }
ツールチップを常に表示	tooltip: { isVisible: true, showOn: 'Always' }
増減ボタン	showButtons: true
ハンドルの移動を制限	limits: { enabled: true, minStart: 10, minEnd: 40 }
通貨形式のツールチップ	tooltip: { isVisible: true, format: 'C2' }
パーセント形式	ticks: { format: 'P0' }
反転（降順）	min: 100, max: 0
RTL レイアウト	enableRtl: true
無効なスライダー	enabled: false
読み取り専用スライダー	readonly: true

目盛りとツールチップ付きの範囲スライダー

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

let rangeSlider: Slider = new Slider({
    type: 'Range',
    value: [20, 80],
    min: 0,
    max: 100,
    step: 5,
    ticks: { placement: 'After', largeStep: 20, smallStep: 5, showSmallTicks: true },
    tooltip: { isVisible: true, placement: 'Before', showOn: 'Always' }
});
rangeSlider.appendTo('#range-slider');

値の変更を監視

import { Slider, SliderChangeEventArgs } from '@syncfusion/ej2-inputs';

let slider: Slider = new Slider({
    value: 30,
    changed: (args: SliderChangeEventArgs) => {
        console.log('Final value:', args.value);
    },
    change: (args: SliderChangeEventArgs) => {
        console.log('While dragging:', args.value);
    }
});
slider.appendTo('#slider');

テキストエリア

TextArea（@syncfusion/ej2-inputs）は、フローティングラベル、サイズ変更モード、装飾要素、最大文字数の制限、フォーム連携、完全なイベント処理に標準対応した、多機能な複数行テキスト入力コンポーネントです。コメント欄、フィードバックフォーム、説明フィールドなど、複数行のユーザー入力が必要な場面で使用します。

ナビゲーションガイド

はじめに

📄 参照: references/getting-started.md

• インストールとパッケージの依存関係
• CSS のインポートとテーマの設定
• TextArea の基本的な初期化
• 値の設定と取得（value プロパティ）
• change イベントから値を読み取る
• 最小限の動作例

フローティングラベルとローカライズ

📄 参照: references/floating-label.md

• floatLabelType — Never、Always、Auto の動作
• placeholder プロパティの使用方法
• locale プロパティによるローカライズ
• L10n による翻訳の読み込み

サイズ変更と寸法

📄 参照: references/resize.md

• resizeMode — Vertical、Horizontal、Both、None
• 幅を明示的に制御する width プロパティ
• 表示寸法を指定する rows および cols プロパティ

スタイルと外観

📄 参照: references/styles-appearance.md

• サイズ指定クラス：e-small、e-bigger
• Filled（e-filled）モードと Outline（e-outline）モード
• カスタムスタイル設定用の cssClass
• enabled（無効状態）および readonly プロパティ
• showClearButton と e-static-clear クラス
• 角丸、背景色・テキスト色のカスタマイズ
• フローティングラベルの色（成功／警告状態）
• プレースホルダーに必須項目を示すアスタリスクを表示

装飾要素

📄 参照: references/adornments.md

• prependTemplate — テキストエリアの前に表示する HTML（アイコン、ボタン）
• appendTemplate — テキストエリアの後に表示する HTML（アクションボタン）
• adornmentFlow — Horizontal または Vertical のレイアウト
• adornmentOrientation — 装飾要素内の項目の配置方法
• AdornmentsDirection 型の使用方法

最大文字数

📄 参照: references/max-length.md

• 文字数を制限する maxLength プロパティ
• 制限に達したときのユーザーへの通知

イベント

📄 参照: references/events.md

• created、destroyed イベント
• input イベント — キー入力のたびに発生（InputEventArgs）
• change イベント — 値が変更された場合、フォーカスアウト時に発生（ChangedEventArgs）
• focus イベント — フォーカスイン時に発生（FocusInEventArgs）
• blur イベント — フォーカスアウト時に発生（FocusOutEventArgs）

メソッド

📄 参照： references/methods.md

• focusIn() — プログラムでフォーカスを設定します
• focusOut() — プログラムでフォーカスを解除します
• getPersistData() — 保存された状態のプロパティを取得します
• addAttributes() / removeAttributes() — HTML 属性を動的に設定・削除します
• dataBind() — 保留中のプロパティ変更をすぐに適用します
• refresh() — コンポーネントを再描画します
• destroy() — コンポーネントを DOM から削除します

フォームのサポート

📄 参照： references/form-support.md

• HTML フォームとの連携
• 検証ルールを使用した FormValidator との連携
• 必須、最小文字数、最大文字数のルール
• エラーメッセージの表示位置のカスタマイズ

API リファレンス

📄 参照： references/api.md

• すべてのプロパティ、メソッド、イベント、インターフェイス
• TextArea API の全機能

---

クイックスタート

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

// CSS in styles.css:
// @import '../node_modules/@syncfusion/ej2-base/styles/material.css';
// @import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';

// HTML: <textarea id="default"></textarea>

let textareaObj: TextArea = new TextArea({
    placeholder: 'Enter your comments',
    floatLabelType: 'Auto',
    resizeMode: 'Vertical'
});
textareaObj.appendTo('#default');

---

よく使われるパターン

シナリオ	主なプロパティ
自動フローティングラベル	floatLabelType: 'Auto'
最大 200 文字	maxLength: 200
垂直方向のみサイズ変更	resizeMode: 'Vertical'
アウトラインスタイル（Material）	cssClass: 'e-outline'
塗りつぶしスタイル（Material）	cssClass: 'e-filled'
読み取り専用の内容	readonly: true
無効状態	enabled: false
クリアボタンを常に表示	showClearButton: true, cssClass: 'e-static-clear'
値を事前設定	value: 'Initial text'
寸法をカスタマイズ	rows: 5, cols: 40
RTL レイアウト	enableRtl: true

変更時に値を読み取る

import { TextArea, ChangedEventArgs } from '@syncfusion/ej2-inputs';

let textareaObj: TextArea = new TextArea({
    placeholder: 'Enter your comments',
    floatLabelType: 'Auto',
    change: (args: ChangedEventArgs) => {
        console.log('Value:', args.value);
    }
});
textareaObj.appendTo('#default');

フローティングラベルと最大文字数を設定したアウトライン TextArea

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

let textareaObj: TextArea = new TextArea({
    placeholder: 'Feedback',
    floatLabelType: 'Auto',
    cssClass: 'e-outline',
    maxLength: 500,
    resizeMode: 'Vertical',
    rows: 4
});
textareaObj.appendTo('#default');

NumericTextBox

Syncfusion EJ2 TypeScript NumericTextBox（@syncfusion/ej2-inputs）は、範囲検証、数値書式（標準およびカスタム）、小数精度、スピンボタン、装飾要素、ローカライズ、RTL、WCAG 2.2 に完全準拠したアクセシビリティをサポートする、機能豊富な数値入力コントロールです。

ナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

• インストールとパッケージの依存関係
• プロジェクトのセットアップ（webpack クイックスタート）
• CSS テーマのインポート
• NumericTextBox の基本的な初期化
• min、max、step による範囲検証
• format による書式設定
• decimals と validateDecimalOnType による小数精度の設定

書式

📄 参照： references/formats.md

• 標準書式：n、p（パーセンテージ）、c（通貨）
• # と 0 の指定子を使ったカスタム書式文字列
• パーセンテージ入力での format と min、max の組み合わせ
• currency プロパティによる通貨書式

装飾要素（プレフィックス／サフィックスのテンプレート）

📄 参照： references/adornments.md

• prependTemplate — 入力欄の前に要素を追加します（通貨記号、アイコンなど）
• appendTemplate — 入力欄の後に要素を追加します（単位、アクションボタンなど）
• change イベントを介した 2 つの NumericTextBox インスタンスの連携
• クリックイベントハンドラーを使ったカスタムアクションアイコン

グローバル化とローカライズ

📄 参照： references/globalization.md

• 文化圏に応じた書式設定を行う locale プロパティ
• スピンボタンのツールチップテキストを上書きする L10n.load()
• 英語以外の文化圏向けの CLDR データ設定
• enableRtl による RTL サポート
• currency と format: 'c2' による通貨書式

スタイルと外観

📄 参照： references/style-appearance.md

• ラッパー要素の高さとフォントサイズのカスタマイズ
• スピンボタンアイコンの CSS のカスタマイズ
• UI の外観を変更するためのカスタム cssClass の適用
• e-spin-up および e-spin-down アイコンのグリフの上書き

方法のレシピ

📄 参照： references/how-to.md

• スピンボタンの上向き／下向き矢印アイコンをカスタマイズする
• ステップ値をカスタマイズし、スピンボタンを非表示にする
• cssClass で UI の外観をカスタマイズする
• フォーカス中も末尾のゼロを維持する
• FormValidator を使用してカスタム検証を実行する
• null の入力を防止する（null ではなく、デフォルトで 0 にする）

アクセシビリティ

📄 参照： references/accessibility.md

• WAI-ARIA のロールと属性（spinbutton ロール）
• キーボード操作（上／下矢印キー）
• WCAG 2.2、Section 508 への準拠
• スクリーンリーダーのサポートに関する詳細

API リファレンス

📄 参照： references/api.md

• すべてのプロパティと型、デフォルト値
• すべてのメソッド（increment、decrement、getText、focusIn、focusOut、dataBind など）
• すべてのイベント（change、blur、focus、created、destroyed）
• イベント引数の型（ChangeEventArgs、NumericBlurEventArgs、NumericFocusEventArgs）

---

クイックスタート

npm install @syncfusion/ej2-inputs
npm audit

<input id="numeric" type="text" />

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

let numeric: NumericTextBox = new NumericTextBox({
  value: 10,
  min: 0,
  max: 100,
  step: 1,
  format: 'n2',
  placeholder: 'Enter a number',
  floatLabelType: 'Auto'
});

numeric.appendTo('#numeric');

/* styles.css – import one theme */
@import '../../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-inputs/styles/material.css';

---

よく使われるパターン

通貨入力

let currency: NumericTextBox = new NumericTextBox({
  format: 'c2',
  value: 100,
  placeholder: 'Price',
  floatLabelType: 'Auto'
});
currency.appendTo('#currency');

パーセント入力

let percent: NumericTextBox = new NumericTextBox({
  format: 'p2',
  value: 0.5,
  min: 0,
  max: 1,
  step: 0.01,
  placeholder: 'Percentage',
  floatLabelType: 'Auto'
});
percent.appendTo('#percent');

カスタムステップを設定したスピンボタンの非表示

let numeric: NumericTextBox = new NumericTextBox({
  step: 5,
  showSpinButton: false,
  min: 0,
  max: 100,
  value: 20
});
numeric.appendTo('#numeric');

読み取り専用の NumericTextBox

let numeric: NumericTextBox = new NumericTextBox({
  value: 42,
  readonly: true
});
numeric.appendTo('#numeric');

プログラムによる増減

numeric.increment(5);   // increase value by 5
numeric.decrement(2);   // decrease value by 2

コンポーネントを無効にする

let numeric: NumericTextBox = new NumericTextBox({
  value: 10,
  enabled: false
});
numeric.appendTo('#numeric');

クリアボタン

let numeric: NumericTextBox = new NumericTextBox({
  value: 10,
  showClearButton: true
});
numeric.appendTo('#numeric');

マウスホイールを無効にする

let numeric: NumericTextBox = new NumericTextBox({
  value: 10,
  allowMouseWheel: false
});
numeric.appendTo('#numeric');

---

主な Props 一覧

プロパティ	型	デフォルト	用途
value	number	null	現在の数値
min	number	null	許可される最小値
max	number	null	許可される最大値
step	number	1	増減のステップ
format	string	'n2'	フォーカスがないときの表示形式
decimals	number	null	フォーカス中の小数精度
validateDecimalOnType	boolean	false	入力中の小数桁を制限する
strictMode	boolean	true	フォーカスが外れたときに値を最小値／最大値の範囲内に収める
floatLabelType	FloatLabelType	'Never'	ラベルのフロート動作
placeholder	string	null	ヒントテキスト／フローティングラベル
showSpinButton	boolean	true	スピンボタンの表示／非表示
showClearButton	boolean	false	クリアアイコン（×）を表示する
readonly	boolean	false	読み取り専用モード
enabled	boolean	true	コントロールを有効／無効にする
enableRtl	boolean	false	右から左へのレイアウト
locale	string	''	カルチャーコード
currency	string	null	ISO 4217 通貨コード
cssClass	string	null	カスタム CSS クラス
width	number|string	null	コンポーネントの幅
allowMouseWheel	boolean	true	マウスホイールによる値の変更を有効にする
enablePersistence	boolean	false	再読み込み後も値を保持する
prependTemplate	string|Function	null	入力欄の前に表示する HTML
appendTemplate	string|Function	null	入力欄の後に表示する HTML
htmlAttributes	object	{}	追加の HTML 属性

Rating

Rating コンポーネント（@syncfusion/ej2-inputs）を使用すると、ユーザーは記号（デフォルトでは星）をクリックまたはタップして、数値スケール上の値を選択できます。精密な評価、カスタムテンプレート、ラベル、ツールチップをサポートし、アクセシビリティにも完全に準拠しています。

依存関係

@syncfusion/ej2-inputs
  └── @syncfusion/ej2-base
  └── @syncfusion/ej2-popups

クイックスタート

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

let rating: Rating = new Rating({ value: 3.0 });
rating.appendTo('#rating');

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

<input id="rating" />

---

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

はじめに

📄 参照： references/getting-started.md

• インストールとパッケージのセットアップ
• CSS のインポートとテーマの設定
• Rating の基本的な初期化
• value プロパティの設定
• アプリケーションの実行

選択と値の制御

📄 参照： references/selection.md

• 評価値の設定と取得
• min プロパティによる最小値の設定
• 単一選択モード（enableSingleSelection）
• リセットボタンの表示／非表示（allowReset）
• reset() メソッドによるプログラムからのリセット

精度モード

📄 参照： references/precision-modes.md

• フル精度（整数）
• ハーフ精度（0.5 刻み）
• クォーター精度（0.25 刻み）
• 厳密精度（0.1 刻み）
• PrecisionType 列挙型の使用

ラベル

📄 参照： references/labels.md

• 現在の値をラベルとして表示する（showLabel）
• ラベルの位置：上、下、左、右（labelPosition）
• カスタムラベルテンプレート（labelTemplate）
• LabelPosition 列挙型の値

ツールチップ

📄 参照： references/tooltip.md

• ホバー時のツールチップの有効化／無効化（showTooltip）
• カスタムツールチップテンプレート（tooltipTemplate）
• cssClass によるツールチップの外観のカスタマイズ

テンプレート（カスタムシンボル）

📄 参照： references/templates.md

• 評価されていない項目用の emptyTemplate
• 評価済みの項目用の fullTemplate
• 評価シンボルとしての絵文字アイコン
• 評価シンボルとしての SVG アイコン
• 評価シンボルとしての PNG 画像
• テンプレートコンテキスト：value と index

外観とスタイル

📄 参照： references/appearance.md

• 項目数の変更（itemsCount）
• 無効状態（disabled）
• 表示の制御（visible）
• 読み取り専用モード（readOnly）
• cssClass によるカスタム CSS
• アイコンの枠線色、塗りつぶし色、項目間隔の変更
• CSS を使用したデフォルトアイコンの置き換え

イベント

📄 参照： references/events.md

• valueChanged – 評価が変更されたときに発生します
• beforeItemRender – 各項目の描画前に発生します
• onItemHover – 項目にホバーしたときに発生します
• created – 描画完了後に発生します
• イベント引数の型：RatingChangedEventArgs、RatingItemEventArgs、RatingHoverEventArgs

アクセシビリティ

📄 参照： references/accessibility.md

• WAI-ARIA 属性（role=slider、aria-valuenow など）
• キーボードナビゲーションのショートカット
• WCAG 2.2／Section 508 への準拠
• RTL サポート

API リファレンス

📄 参照： references/api.md

• 型とデフォルト値を含む全 16 個のプロパティ
• 全 7 個のメソッド
• 引数の型を含む全 4 個のイベント

---

一般的なパターン

リセットボタンとラベル付きの評価

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

let rating: Rating = new Rating({
  value: 3.0,
  allowReset: true,
  showLabel: true
});
rating.appendTo('#rating');

変更ハンドラー付きのハーフ精度評価

import { Rating, PrecisionType, RatingChangedEventArgs } from '@syncfusion/ej2-inputs';

let rating: Rating = new Rating({
  value: 2.5,
  precision: PrecisionType.Half,
  valueChanged: (args: RatingChangedEventArgs) => {
    console.log('New rating:', args.value);
  }
});
rating.appendTo('#rating');

読み取り専用の評価表示

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

let rating: Rating = new Rating({
  value: 4.0,
  readOnly: true,
  showLabel: true
});
rating.appendTo('#rating');

最小値を指定したカスタム項目数

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

let rating: Rating = new Rating({
  value: 3,
  itemsCount: 10,
  min: 1
});
rating.appendTo('#rating');

Signature

Syncfusion EJ2 TypeScript Signature（@syncfusion/ej2-inputs）は、キャンバスベースのコントロールです。マウス、タッチ、またはスタイラス入力を使用し、幅が可変のベジェ曲線補間によって滑らかな署名を描画できます。テキスト描画、ストロークと背景のカスタマイズ、保存／読み込み操作、元に戻す／やり直しの履歴、および WCAG 2.2 に準拠したアクセシビリティに対応しています。

ナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

• パッケージの依存関係（@syncfusion/ej2-inputs、@syncfusion/ej2-base）
• webpack クイックスタートを使用したプロジェクトのセットアップ
• CSS テーマのインポート
• HTML キャンバス要素のセットアップ
• Signature の基本的な初期化
• デフォルトのキャンバス寸法（300 × 150）

カスタマイズ

📄 参照： references/customization.md

• ストローク幅：maxStrokeWidth、minStrokeWidth、velocity
• strokeColor によるストローク色の指定（16 進数、RGB、名前付き色）
• backgroundColor による背景色の指定
• backgroundImage による背景画像の指定
• saveWithBackground を使用した背景付きの保存

開く／保存

📄 参照： references/open-save.md

• load(url, width?, height?) を使った描画済み署名の読み込み（Base64 またはホストされた URL）
• save(type?, fileName?) を使った画像（PNG／JPEG／SVG）としての保存
• getSignature() を使った Base64 文字列の取得
• saveAsBlob() を使った Blob としての保存
• getBlob(url) を使った Blob の取得
• saveWithBackground による背景を含めるかどうかの制御

ユーザー操作

📄 参照: references/user-interaction.md

• undo() で元に戻し、canUndo() で実行可能か確認します
• redo() でやり直し、canRedo() で実行可能か確認します
• clear() でキャンバスをクリアします
• isEmpty() で空の状態かどうかを確認します
• disabled プロパティでコンポーネントを無効にします
• isReadOnly プロパティで読み取り専用モードにします
• change イベントでストローク、元に戻す、やり直し、クリアに応答します
• 初回レンダリング時の created イベント
• キーボードでの保存（Ctrl+S）をカスタマイズする beforeSave イベント

ツールバーとの連携

📄 参照: references/toolbar-integration.md

• Signature と EJ2 Toolbar コンポーネントの連携
• ツールバーの「元に戻す」「やり直し」「クリア」「保存」ボタンの接続
• ストロークと背景色用の ColorPicker の追加
• ストローク幅を制御する DropDownList の追加
• canUndo、canRedo、isEmpty に基づくツールバー項目の有効化／無効化
• change イベントを使ってツールバーの状態を同期

アクセシビリティ

📄 参照: references/accessibility.md

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

API リファレンス

📄 参照: references/api.md

• すべてのプロパティと型、デフォルト値
• すべてのメソッド（draw、load、save、saveAsBlob、getSignature、getBlob、undo、redo、clear、canUndo、canRedo、isEmpty、refresh、destroy）
• すべてのイベント（change、created、beforeSave）
• 関連する型（SignatureFileType、SignatureChangeEventArgs、SignatureBeforeSaveEventArgs）

---

クイックスタート

npm install @syncfusion/ej2-inputs
npm audit

<canvas id="signature"></canvas>

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

let signature: Signature = new Signature({}, '#signature');

/* styles.css */
@import '../../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-inputs/styles/material.css';

キャンバス要素に width または height が明示的に設定されていない場合、Signature コンポーネントは HTML キャンバスのデフォルトサイズ（300 × 150）でレンダリングされます。

---

一般的なパターン

テキストを署名として描画

// Draw "John Doe" in Arial, size 30
signature.draw('John Doe', 'Arial', 30);

署名を PNG として保存

signature.save('Png', 'my-signature');

Base64 を取得して再読み込み

const base64 = signature.getSignature();       // returns base64 PNG string
signature.load(base64);                         // reload the same signature

ガード付きの元に戻す／やり直し

if (signature.canUndo()) { signature.undo(); }
if (signature.canRedo()) { signature.redo(); }

無効化と読み取り専用

signature.disabled   = true;   // user cannot draw; opacity shows disabled state
signature.isReadOnly = true;   // focusable but drawing is prevented

署名の変更に応答

let signature: Signature = new Signature({
  change: (args) => {
    console.log('Signature changed; empty?', signature.isEmpty());
  }
}, '#signature');

TextBox

Syncfusion EJ2 TypeScript TextBox（@syncfusion/ej2-inputs）は、フローティングラベル、複数行（textarea）モード、アイコングループ、装飾、検証状態、サイズ設定、RTL、自動補完、および WCAG 2.2 に完全準拠したアクセシビリティをサポートする、多機能なテキスト入力コンポーネントです。

ナビゲーションガイド

はじめに

📄 参照: references/getting-started.md

• インストールとパッケージの依存関係
• プロジェクトのセットアップ（webpack クイックスタート）
• CSS テーマのインポート
• TextBox の基本的な初期化
• addIcon() によるアイコンの追加
• floatLabelType によるフローティングラベル

複数行（Textarea）モード

📄 参照: references/multiline.md

• multiline: true で複数行を有効化
• 複数行入力でのフローティングラベル
• コンテンツに応じた自動リサイズ
• CSS によるリサイズの無効化
• addAttributes({ maxlength }) によるテキストの長さ制限
• input イベントでの文字数カウント

グループ、アイコン、クリアボタン

📄 参照: references/groups.md

• addIcon('append' | 'prepend', iconClass) によるアイコンの追加
• フローティングラベル付きのアイコン
• クリア（×）アイコンを表示する showClearButton
• required 属性なしのフローティングラベル
• フローティングラベル付きの複数行入力

装飾（プレフィックス／サフィックスのテンプレート）

📄 参照: references/adornments.md

• prependTemplate – 入力欄の前にアイコンやテキストを追加
• appendTemplate – 入力欄の後ろにアイコンやボタンを追加
• パスワード表示切り替えのパターン
• dataBind() を使った削除／クリアアイコンのパターン

検証状態

📄 参照: references/validation.md

• cssClass で e-warning、e-error、e-success を適用
• 検証状態に応じたフローティングラベルの色の変更（CSS）
• 値に応じた TextBox の色の変更（keyup + 正規表現）

サイズ

📄 参照: references/sizing.md

• 標準サイズ（デフォルト）
• cssClass: 'e-small' で小さくする
• cssClass: 'e-bigger' で大きくする
• サイズ設定とアイコン、フローティングラベルの組み合わせ

スタイルと外観

📄 参照: references/style-appearance.md

• 塗りつぶしモード：cssClass: 'e-filled'
• アウトラインモード：cssClass: 'e-outline'
• 背景色と文字色をカスタマイズする（CSS の上書き）
• フローティングラベルの色をカスタマイズする（CSS）
• cssClass: 'e-corner' で角を丸くする
• cssClass でスタイルの適用範囲を指定する

実装レシピ

📄 参照: references/how-to.md

• Input.createInput() を使用して TextBox をプログラムで追加する
• フローティングラベルをプログラムで追加する
• 読み取り専用の TextBox にフローティングラベルを追加する
• 無効状態を設定する（enabled: false）
• 読み取り専用状態を設定する（readonly: true）
• 角を丸くする（cssClass: 'e-corner'）
• 検証状態に応じてフローティングラベルの色を変更する
• 値に応じて TextBox の色を変更する（keyup の正規表現）
• 背景色と文字色をカスタマイズする

アクセシビリティ

📄 参照: references/accessibility.md

• WAI-ARIA のロール textbox と属性
• aria-placeholder、aria-labelledby
• WCAG 2.2、Section 508、スクリーンリーダーのサポート
• RTL のサポート

API リファレンス

📄 参照: references/api.md

• すべてのプロパティと型、デフォルト値
• すべてのメソッド（addIcon、addAttributes、removeAttributes、focusIn、focusOut、dataBind など）
• すべてのイベント（change、input、blur、focus、created、destroyed）
• イベント引数の型

---

クイックスタート

npm install @syncfusion/ej2-inputs
npm audit

<input id="firstName" />

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

let textBox: TextBox = new TextBox({
  placeholder: 'Enter your name',
  floatLabelType: 'Auto'
});

textBox.appendTo('#firstName');

/* styles.css */
@import '../../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-inputs/styles/material.css';

---

よく使われるパターン

フローティングラベルの種類

// Auto – floats label above on focus or when value entered
let autoFloat: TextBox = new TextBox({ placeholder: 'Name', floatLabelType: 'Auto' });
autoFloat.appendTo('#auto');

// Always – label always floats above
let alwaysFloat: TextBox = new TextBox({ placeholder: 'Name', floatLabelType: 'Always' });
alwaysFloat.appendTo('#always');

// Never – label stays as placeholder (default)
let neverFloat: TextBox = new TextBox({ placeholder: 'Name', floatLabelType: 'Never' });
neverFloat.appendTo('#never');

アイコン付き TextBox

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

let iconTextBox: TextBox = new TextBox({
  placeholder: 'Enter Date',
  created: () => {
    iconTextBox.addIcon('append', 'e-icons e-date-range');
  }
});
iconTextBox.appendTo('#textbox');

複数行／テキストエリア

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

let textarea: TextBox = new TextBox({
  placeholder: 'Enter your address',
  multiline: true,
  floatLabelType: 'Auto'
});
textarea.appendTo('#textarea');

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

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

let passwordBox: TextBox = new TextBox({
  placeholder: 'Password',
  type: 'password',
  floatLabelType: 'Auto',
  appendTemplate: '<span class="e-input-separator"></span><span id="eye-icon" class="e-icons e-eye"></span>',
  created: () => {
    const eyeIcon = document.querySelector('#eye-icon') as HTMLElement;
    if (eyeIcon) {
      eyeIcon.addEventListener('click', () => {
        if (passwordBox.type === 'password') {
          passwordBox.type = 'text';
          eyeIcon.className = 'e-icons e-eye-slash';
        } else {
          passwordBox.type = 'password';
          eyeIcon.className = 'e-icons e-eye';
        }
        passwordBox.dataBind();
      });
    }
  }
});
passwordBox.appendTo('#password');

検証状態

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

let errorBox: TextBox = new TextBox({ placeholder: 'Error state', cssClass: 'e-error' });
errorBox.appendTo('#error');

let warningBox: TextBox = new TextBox({ placeholder: 'Warning state', cssClass: 'e-warning' });
warningBox.appendTo('#warning');

let successBox: TextBox = new TextBox({ placeholder: 'Success state', cssClass: 'e-success' });
successBox.appendTo('#success');

無効状態と読み取り専用

// Disabled
let disabled: TextBox = new TextBox({ placeholder: 'Disabled', enabled: false });
disabled.appendTo('#disabled');

// Read-only
let readOnly: TextBox = new TextBox({ placeholder: 'Read-only', readonly: true });
readOnly.appendTo('#readonly');

クリアボタン

let clearable: TextBox = new TextBox({
  placeholder: 'Type to clear',
  showClearButton: true,
  floatLabelType: 'Auto'
});
clearable.appendTo('#clearable');

---

主なプロパティ一覧

プロパティ	型	デフォルト	目的
value	string	null	テキストの内容
placeholder	string	null	ヒントテキスト／フローティングラベル
floatLabelType	FloatLabelType	'Never'	ラベルのフローティング動作
multiline	boolean	false	テキストエリアモードを有効にする
type	string	'text'	入力の種類（text、password、email など）
enabled	boolean	true	コントロールを有効／無効にする
readonly	boolean	false	読み取り専用モード
showClearButton	boolean	false	クリアアイコン（×）を表示する
cssClass	string	''	カスタム CSS クラス
width	number|string	null	コンポーネントの幅
enableRtl	boolean	false	右から左へのレイアウト
autocomplete	string	'on'	ブラウザーの自動補完（'on'|'off'）
locale	string	''	文化／ロケールの上書き
enablePersistence	boolean	false	再読み込み後も値を保持する
prependTemplate	string|Function	null	入力欄の前に表示する HTML
appendTemplate	string|Function	null	入力欄の後に表示する HTML
htmlAttributes	object	{}	追加の HTML 属性

Uploader

Syncfusion Uploader コンポーネントは、TypeScript アプリケーション向けに堅牢で機能豊富なファイルアップロードソリューションを提供します。複数のアップロードモード、ファイル検証、ドラッグ＆ドロップ、大容量ファイルのチャンクアップロード、幅広いカスタマイズオプションに対応しています。

コンポーネントの概要

Uploader コンポーネントは、次の機能を備えています。

• 複数のアップロードモード：非同期、チャンク、フォームベースのアップロード
• 包括的な検証：ファイル形式、サイズ、件数の制限
• 豊富な UI：カスタマイズ可能なテンプレート、テーマ、スタイル設定
• 高度な機能：JWT 認証、ローカライズ、画像のプレビュー／サイズ変更、進捗状況の追跡
• 開発者にやさしい設計：型定義、イベント、メソッドを含む TypeScript の完全なサポート

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

はじめに

📄 参照： references/uploader-getting-started.md

• 依存関係とパッケージ要件
• クイックスタートプロジェクト、npm、または CDN を使ったインストール
• TypeScript モジュールのインポート
• 基本的なコンポーネントの初期化
• HTML 構造と CSS のインポート
• ドロップ領域の設定
• 非同期設定の構成
• 成功イベントと失敗イベントの処理
• 最初のアップロード例
• 主な設定オプション

ファイルの検証

📄 参照： references/uploader-file-validation.md

• allowedExtensions を使ったファイル形式の検証
• ファイルサイズの制限（minFileSize、maxFileSize）
• isModified フラグを使ったファイル数の上限設定
• 重複ファイルの検証
• アップロード前の検証方法
• カスタム検証ロジック
• 検証イベントの処理

アップロードモードと機能

📄 参照： references/uploader-upload-modes.md

• 非同期アップロードの設定（単一／複数／順次）
• files プロパティを使った事前読み込み済みファイル
• サーバー側の例を使った保存／削除アクション
• アップロードリクエストへのカスタム HTTP ヘッダーの追加
• retryCount と retryAfterDelay を使ったチャンクアップロード
• dropArea プロパティを使ったドラッグ＆ドロップ
• クリップボードからの貼り付けによるアップロード
• directoryUpload プロパティを使ったディレクトリのアップロード
• ファイルアップロードを伴うフォーム送信
• ファイルソースのオプションとイベント
• イベント処理とコールバック（一時停止／再開／キャンセル）

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

📄 参照： references/uploader-customization-and-styling.md

• コンポーネント固有の CSS セレクター（ラッパー、参照ボタン、ドロップテキスト、ファイルコンテナー）
• CSS のカスタマイズとテーマ
• ボタンテンプレートのカスタマイズ
• プログレスバーのスタイル設定
• 外観の変更
• RTL（右から左へ）のサポート
• レスポンシブデザインのパターン

高度な機能

📄 参照： references/uploader-advanced-features.md

• JWT 認証（currentRequest を使ったアップロードイベントと削除イベント）
• サーバー側の JWT 検証（ASP.NET Core の例）
• ローカライズとキー一覧表
• ファイルプレビュー機能
• アップロード前の画像リサイズ
• ファイルリストテンプレートとカスタムテンプレート（showFileList）
• フォームデータのバインド
• ファイル削除とクリーンアップのハンドラー

ハウツーガイドとパターン

📄 参照： references/uploader-how-to-guides.md

• プログラムによるアップロードの開始
• 非表示のアップローダー UI
• アップロード時の追加データ
• 削除時の確認ダイアログ
• カスタムボタン要素
• MIME タイプの検証
• 画像をバイナリ形式に変換
• bytesToSize メソッドを使ったファイルサイズの確認
• ドロップ領域を非表示にする
• アップロード済みファイルを開く／編集する
• 選択したファイルを並べ替える
• 外部ボタンによる操作
• ドロップ時の画像検証
• WAI-ARIA アクセシビリティ準拠とキーボードショートカット

トラブルシューティングとパターン

📄 参照： references/uploader-troubleshooting-and-examples.md

• よくある問題と解決策（name 属性の不一致を含む）
• ブラウザーの互換性に関する注意事項
• パフォーマンス最適化の手法
• エッジケースと注意点
• フォームサポートのパターン（FormValidator を使った非同期でないアップロード）
• 実際の実装パターン
• デバッグのヒントと手法

API リファレンス

📄 参照： references/uploader-api.md

• 型、説明、デフォルト値を含む、プロパティの完全なリファレンス
• パラメーター表と戻り値の型を含む、すべての公開メソッド
• イベント引数の詳細と使用例を含む、すべてのイベント
• 関連インターフェース：AsyncSettingsModel、ButtonsPropsModel、FilesPropModel、FileInfo、ValidationMessages
• イベント引数インターフェース：SelectedEventArgs、UploadingEventArgs、RemovingEventArgs、BeforeRemoveEventArgs、BeforeUploadEventArgs、ActionCompleteEventArgs、CancelEventArgs、ClearingEventArgs、FileListRenderingEventArgs、PauseResumeEventArgs
• DropEffect の列挙値
• 非推奨の API と推奨される代替 API の記載

---

インストール

npm install @syncfusion/ej2-inputs
npm audit

クイックスタートの例

使い始めるための最小限の TypeScript の例を示します。

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

// Initialize Uploader component
// ⚠️ DEMO ONLY: Replace saveUrl and removeUrl with your own production server endpoints.
//    Do NOT use services.syncfusion.com URLs in production applications.
const uploaderObj = new Uploader({
  asyncSettings: {
    saveUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Save',  // Replace in production
    removeUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Remove'  // Replace in production
  },
  allowedExtensions: '.jpg,.png,.pdf'
});

// Render to DOM element with id 'fileupload'
uploaderObj.appendTo('#fileupload');

// Handle file selection
uploaderObj.selected = (args: any) => {
  console.log('Files selected:', args.filesData);
};

// Handle upload completion
uploaderObj.success = (args: any) => {
  console.log('Upload successful:', args.responseText);
};

HTML 要素：

<input type="file" id="fileupload" name="UploadFiles" />

---

一般的なパターン

パターン 1：検証付きファイルアップロード

アップロードできるファイルの種類とサイズを制限します。

// ⚠️ Replace saveUrl and removeUrl with your own server endpoints before deploying to production.
const uploader = new Uploader({
  asyncSettings: {
    saveUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/save',  // Replace in production
    removeUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/remove'  // Replace in production
  },
  allowedExtensions: '.jpg,.jpeg,.png,.gif',
  minFileSize: 5000,      // 5 KB
  maxFileSize: 5242880    // 5 MB
});
uploader.appendTo('#fileupload');

パターン 2：ドラッグ＆ドロップによるアップロード

最新のファイルアップロード UX を実現します。

// ⚠️ Replace saveUrl and removeUrl with your own server endpoints before deploying to production.
const uploader = new Uploader({
  asyncSettings: {
    saveUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/save',  // Replace in production
    removeUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/remove'  // Replace in production
  },
  dropEffect: 'Copy',
  multiple: true,
  allowedExtensions: '.pdf,.doc,.docx'
});
uploader.appendTo('#fileupload');

// Files that are dropped also trigger the selected event
uploader.selected = (args: SelectedEventArgs) => {
  console.log('Files selected/dropped:', args.filesData);
};

パターン 3：大容量ファイルのチャンク分割アップロード

再開可能なチャンクを使って大容量ファイルを処理します。

// ⚠️ Replace saveUrl and removeUrl with your own server endpoints before deploying to production.
const uploader = new Uploader({
  asyncSettings: {
    saveUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/save-chunk',  // Replace in production
    removeUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/remove',  // Replace in production
    chunkSize: 5242880 // 5 MB chunks
  },
  allowedExtensions: '.iso,.zip,.rar',
  minFileSize: 26214400  // 25 MB minimum
});
uploader.appendTo('#fileupload');

uploader.chunkSuccess = (args: any) => {
  console.log('Chunk uploaded:', args.chunkIndex, 'size:', args.chunkSize);
};

uploader.chunkFailure = (args: any) => {
  console.log('Chunk failed for:', args.file.name, 'chunk:', args.chunkIndex);
};

パターン 4：アップロード前のファイルプレビュー

アップロード前に画像と詳細を表示します。

// ⚠️ Replace saveUrl and removeUrl with your own server endpoints before deploying to production.
const uploader = new Uploader({
  asyncSettings: {
    saveUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/save',  // Replace in production
    removeUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/remove'  // Replace in production
  },
  allowedExtensions: '.jpg,.jpeg,.png'
});
uploader.appendTo('#fileupload');

uploader.selected = (args: any) => {
  // Render preview for each file
  args.filesData.forEach((file: any) => {
    const reader = new FileReader();
    reader.onload = (e: any) => {
      const preview = document.createElement('img');
      preview.src = e.target.result;
      preview.style.maxWidth = '100px';
      document.getElementById('preview')?.appendChild(preview);
    };
    reader.readAsDataURL(file.rawFile);
  });
};

---

主なプロパティとイベント

すべてのプロパティ、メソッド、イベント、型定義を含む API の完全なリファレンスについては、references/uploader-api.md を参照してください。

主なプロパティ

プロパティ	型	目的
asyncSettings	AsyncSettingsModel	アップロード先と動作を設定します
allowedExtensions	string	許可するファイル拡張子をカンマ区切りで指定します
minFileSize	number	ファイルの最小サイズをバイト単位で指定します
maxFileSize	number	ファイルの最大サイズをバイト単位で指定します
multiple	boolean	複数のファイル選択を許可します
autoUpload	boolean	ファイル選択時に自動でアップロードします
sequentialUpload	boolean	ファイルを順番にアップロードします
showFileList	boolean	デフォルトのファイルリストを表示または非表示にします
template	string | Function	ファイル項目のカスタムテンプレート
directoryUpload	boolean	フォルダー／ディレクトリーのアップロードを有効にします
dropArea	string | HTMLElement	カスタムのドラッグ＆ドロップ領域
dropEffect	DropEffect	ドラッグ＆ドロップ時の視覚効果
files	FilesPropModel[]	レンダリング時に読み込むファイル
enabled	boolean	コンポーネントを有効または無効にします
enableRtl	boolean	右から左への表示
enableHtmlSanitizer	boolean	ファイル名での XSS を防止します
buttons	ButtonsPropsModel	ボタンのラベルや内容をカスタマイズします
cssClass	string	ルート要素に設定するカスタム CSS クラス
htmlAttributes	object	追加の HTML 属性
locale	string	グローバルなローカライズ設定を上書きします

主なイベント

イベント	発生タイミング	用途
selected	ファイルが選択されたとき	ファイルの検証、プレビュー、変更
uploading	アップロード開始前	ヘッダーやメタデータの追加、進行状況の表示
beforeUpload	アップロード処理の前	アップロードリクエストへのパラメーターの追加
success	アップロードが正常に完了したとき	サーバーの応答の処理
failure	アップロードに失敗したとき	再試行ロジック、エラー処理
removing	ファイルの削除中	削除の確認、カスタムデータの追加
beforeRemove	サーバーへの削除リクエスト送信前	削除リクエストの阻止または変更
actionComplete	すべてのファイルの処理後	一括処理の完了処理
chunkUploading	各チャンクの開始時	チャンクリクエストへのデータの追加
chunkSuccess	チャンクのアップロード後	進行状況の追跡
chunkFailure	チャンクの失敗時	再試行またはエラー処理
pausing	チャンクのアップロード一時停止時	一時停止状態の追跡
resuming	一時停止したアップロードの再開時	再開状態の追跡
canceling	チャンクのアップロードキャンセル時	キャンセル状態の追跡
clearing	ファイルリストのクリア中	クリアの阻止または確認
fileListRendering	各ファイル項目のレンダリング時	ファイル項目の構造のカスタマイズ
progress	ファイルのアップロード中（AJAX の進行状況）	リアルタイムでの進行状況バーの更新
change	ファイルリストの変更時	追加／削除操作への対応
created	コンポーネントの作成時	初期化後のセットアップ

---

よくあるユースケース

ユースケース 1：商品画像のアップロード
画像の検証、アップロード前のサイズ変更、プレビューの表示 → references/uploader-advanced-features.mdを参照してください

ユースケース 2：ドキュメント管理
複数のファイル形式、大容量ファイルのサポート、フォームとの連携 → references/uploader-upload-modes.mdおよびreferences/uploader-advanced-features.mdを参照してください

ユースケース 3：ユーザーアバターのアップロード
単一画像、サイズの検証、スタイルのカスタマイズ → references/uploader-getting-started.mdおよびreferences/uploader-customization-and-styling.mdを参照してください

ユースケース 4：安全なファイルのアップロード
JWT 認証、サーバー側での検証、エラー処理 → references/uploader-advanced-features.mdおよびreferences/uploader-troubleshooting-and-examples.mdを参照してください

---

関連スキル

• フォームの検証の実装
• TypeScript での非同期処理
• カスタムイベントの処理

---

次のステップ： インストールと基本的なセットアップを学ぶには、references/uploader-getting-started.mdから始めてください。ユースケースに合ったリファレンスに直接進むか、完全な API リファレンスについてはreferences/uploader-api.mdを参照してください。

CheckBox

CheckBox コンポーネント（@syncfusion/ej2-buttons）は、ユーザーが一連の選択肢から 1 つ以上を選べる選択コントロールです。3 つの状態（チェック済み、未チェック、不確定）、ラベル、スタイルのカスタマイズ、フォームとの連携をサポートし、WCAG 2.2 に完全準拠しています。

クイックスタート

npm install @syncfusion/ej2-buttons
npm audit

<input type="checkbox" id="checkbox" />

import { CheckBox, ChangeEventArgs } from '@syncfusion/ej2-buttons';

let checkbox: CheckBox = new CheckBox({
  label: 'Accept terms and conditions',
  checked: false,
  change: (args: ChangeEventArgs) => {
    console.log('Checked:', args.checked);
  }
});
checkbox.appendTo('#checkbox');

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

はじめに

📄 参照： references/checkbox-getting-started.md

• インストールとパッケージのセットアップ（@syncfusion/ej2-buttons）
• 必須の CSS インポートとテーマ設定
• CheckBox の基本的な初期化
• ラベルの設定
• リップル効果のセットアップ
• アプリケーションの実行

ラベルとサイズ

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

• labelプロパティ — 文字列および HTML ラベル
• labelPosition — 前または後（デフォルト）
• cssClass: 'e-small' — 小サイズのバリエーション
• CSS の上書きによるサイズのカスタマイズ
• リンクや書式設定を含むリッチテキストラベル

状態

📄 参照： references/checkbox-states.md

• 3 つの状態：チェック済み、未チェック、不確定
• disabledプロパティ — 操作を無効化
• readonlyプロパティ — 編集不可だがフォーカス可能
• プログラムによる状態制御
• ChangeEventArgsを伴うchangeイベント
• マスター／詳細・全選択パターン
• フォームとの連携

スタイルと外観

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

• チェック時の色をカスタマイズ
• 枠線の幅と角丸
• ピル型／スイッチ型のチェックボックス
• 形状をカスタマイズ（四角形、円形）
• ホバー時とフォーカス時の効果
• ダークテーマとライトテーマ
• グラデーション効果とグラスモーフィズム効果
• チェックマークのアニメーション

実装パターン

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

• name と value を使ったフォーム送信
• 親子関係での全選択パターン
• 必須フィールドの検証
• 動的な有効化／無効化
• 3 状態チェックボックスの切り替え
• グループ選択（ラジオボタンのような動作）
• localStorage による状態の永続化
• AJAX によるフォーム送信
• ラベル内のカスタム HTML（リンクなど）

アクセシビリティ

📄 参照： references/checkbox-accessibility.md

• WAI-ARIA 属性（role="checkbox"、aria-checked）
• キーボード操作（Tab、Space、Enter）
• WCAG 2.2、Section 508、ADA への準拠
• スクリーンリーダーのサポート（JAWS、NVDA、VoiceOver）
• フォーカス管理と視覚的なインジケーター
• 色のコントラスト（最小 4.5:1）
• タッチしやすいターゲットサイズ（44x44px）
• RTL のサポート

API リファレンス

📄 参照： references/checkbox-api.md

• すべてのプロパティと型、デフォルト値
• すべてのメソッド（check、uncheck、toggle、focusIn、focusOut、click、destroy）
• すべてのイベント（change、created、destroyed）
• ChangeEventArgs インターフェース
• CheckBoxModel インターフェース
• LabelPosition 列挙型

---

よくあるパターン

シンプルな CheckBox

import { CheckBox } from '@syncfusion/ej2-buttons';

let checkbox: CheckBox = new CheckBox({
  label: 'I agree to the terms',
  checked: false
});
checkbox.appendTo('#checkbox');

事前チェックと検証

import { CheckBox, ChangeEventArgs } from '@syncfusion/ej2-buttons';
import { Button } from '@syncfusion/ej2-buttons';

let terms: CheckBox = new CheckBox({
  label: 'I accept the terms and conditions',
  change: (args: ChangeEventArgs) => {
    const submitBtn: Button = (document.getElementById('submit-btn') as any).ej2_instances[0];
    submitBtn.disabled = !args.checked;
  }
});
terms.appendTo('#terms');

let submitButton: Button = new Button({
  content: 'Continue',
  disabled: true,
  cssClass: 'e-primary'
});
submitButton.appendTo('#submit-btn');

親子関係（すべて選択）

import { CheckBox, ChangeEventArgs } from '@syncfusion/ej2-buttons';

const childCheckboxes: CheckBox[] = [];

let selectAll: CheckBox = new CheckBox({
  label: 'Select All',
  change: (args: ChangeEventArgs) => {
    childCheckboxes.forEach(cb => {
      cb.checked = args.checked;
    });
  }
});
selectAll.appendTo('#select-all');

['Option 1', 'Option 2', 'Option 3'].forEach((label, index) => {
  let child: CheckBox = new CheckBox({
    label: label,
    change: () => updateSelectAllState()
  });
  child.appendTo(`#child-${index}`);
  childCheckboxes.push(child);
});

function updateSelectAllState(): void {
  const checkedCount: number = childCheckboxes.filter(cb => cb.checked).length;
  if (checkedCount === 0) {
    selectAll.checked = false;
    selectAll.indeterminate = false;
  } else if (checkedCount === childCheckboxes.length) {
    selectAll.checked = true;
    selectAll.indeterminate = false;
  } else {
    selectAll.checked = false;
    selectAll.indeterminate = true;
  }
}

不確定状態

import { CheckBox } from '@syncfusion/ej2-buttons';

let parentCheckbox: CheckBox = new CheckBox({
  label: 'Select all (partial)',
  indeterminate: true
});
parentCheckbox.appendTo('#parent');

無効化されたチェックボックス

import { CheckBox } from '@syncfusion/ej2-buttons';

let disabledCheckbox: CheckBox = new CheckBox({
  label: 'This option is unavailable',
  disabled: true,
  checked: false
});
disabledCheckbox.appendTo('#disabled-checkbox');

小さいサイズ

import { CheckBox } from '@syncfusion/ej2-buttons';

let smallCheckbox: CheckBox = new CheckBox({
  label: 'Compact option',
  cssClass: 'e-small'
});
smallCheckbox.appendTo('#small-checkbox');

スタイルのカスタマイズ

import { CheckBox } from '@syncfusion/ej2-buttons';

let customCheckbox: CheckBox = new CheckBox({
  label: 'Custom branded',
  checked: true,
  cssClass: 'brand-checkbox'
});
customCheckbox.appendTo('#custom-checkbox');

.brand-checkbox .e-checkbox-wrapper .e-frame.e-check {
  background-color: #ff6b35;
  border-color: #ff6b35;
}

フォーム送信

import { CheckBox } from '@syncfusion/ej2-buttons';

let newsletter: CheckBox = new CheckBox({
  label: 'Subscribe to newsletter',
  name: 'newsletter',
  value: 'subscribed'
});
newsletter.appendTo('#newsletter');

<form id="signup-form">
  <input type="checkbox" id="newsletter" />
  <button type="submit">Submit</button>
</form>

---

主要なプロパティ一覧

プロパティ	型	デフォルト	用途
label	string | HTMLElement	''	チェックボックスのラベルテキスト
checked	boolean	false	チェック状態
indeterminate	boolean	false	不確定状態（親チェックボックス）
disabled	boolean	false	操作を無効化
readonly	boolean	false	読み取り専用モード
labelPosition	string	'After'	ラベルの位置：Before または After
name	string	''	フォーム送信時の名前
value	string	''	フォーム送信時の値
cssClass	string	''	カスタム CSS クラス（小さいサイズには e-small を使用）
enableRtl	boolean	false	右から左へのレイアウト
enablePersistence	boolean	false	再読み込み後も状態を保持
locale	string	'en-US'	文化コード

主要なメソッド一覧

メソッド	用途
check()	チェック状態を true に設定
uncheck()	チェック状態を false に設定
toggle()	チェック状態と未チェック状態を切り替え
focusIn()	プログラムからチェックボックスにフォーカスを設定
focusOut()	チェックボックスからフォーカスを外す
click()	プログラムからチェックボックスをクリック
destroy()	コンポーネントのインスタンスを破棄

主要なイベント一覧

イベント	発生条件	使用例
change	チェック状態が変化したとき	フォームの検証、条件分岐
created	コンポーネントの準備が完了したとき	初期化後のセットアップ
destroyed	コンポーネントが破棄されたとき	クリーンアップ

---

一般的な使用例

使用例 1：利用規約への同意 — フォームの送信前に、ユーザーに利用規約への同意を求めます 使用例 2：ニュースレターの購読 — ユーザーが配信を受け取るかどうかを選択できるようにします 使用例 3：複数選択リスト — リストから複数の項目を選択できるようにします 使用例 4：設定の切り替え — ユーザー設定で機能を有効化／無効化します 使用例 5：フィルターコントロール — 選択した条件に基づいてデータを絞り込みます 使用例 6：一括操作 — 複数の項目を選択して一括操作を行います 使用例 7：マスター／詳細 — 親子関係のある項目をすべて選択するパターンです 使用例 8：フォームの検証 — フォームの送信に特定のチェックボックスを必須にします

---

一般的な CSS クラス

クラス	用途
e-small	小さいサイズのチェックボックス
e-success	緑色の成功カラー
e-warning	黄色の警告カラー
e-danger	赤色のエラーカラー
e-info	青色の情報カラー

---

関連スキル

• フォーム検証の実装
• トグル／スイッチ UI の構築
• RadioButton（単一選択の対となるコンポーネント）
• ButtonGroup（複数ボタンの選択）

---

次のステップ： references/checkbox-getting-started.md から始めてインストールと基本設定を確認するか、使用例に合ったリファレンスに直接進むか、references/checkbox-api.md で API リファレンス全体を確認してください。