API リファレンス

forms の完全な仕様をここにまとめました。バインド、リッスン、プロジェクション、テーマ設定ができるすべてが一か所に集約されています。必要なものを接続し、好きなようにスタイリングしてください — standalone で signal フレンドリーです。

インプット

107 個のインプットで forms を調整。通常の Angular @Input と同じようにバインドできます。

名前	型	デフォルト	説明
`formControlName / [formControl]`	`string \| FormControl`	—	任意のフィールドをリアクティブコントロールにバインドします。コントロールが touched かつ無効な場合、エラーが自動的に表示されます。
`label`	`string`	`''`	フィールドのラベルテキスト。
`labelType (hub-input, hub-select, hub-datepicker)`	`'stacked' \| 'floating' \| 'horizontal' \| 'visually-hidden'`	`'stacked'`	ラベルの配置。`floating` はラベルをコントロールの内側に配置し、フィールドがフォーカスされるか値を持つまで、プレースホルダーの代わりを務めます。
`labelType (hub-textarea, hub-otp-input, hub-slider, hub-segmented, hub-timepicker)`	`'stacked' \| 'horizontal' \| 'visually-hidden'`	`'stacked'`	ラベルの配置。これらのフィールドに `floating` のバリアントはありません。`floating` を渡しても、stacked のラベルを描画します。
`labelType (hub-file-input)`	`'stacked' \| 'visually-hidden'`	`'stacked'`	ラベルの配置。これらのフィールドに `floating` のバリアントはありません。`floating` を渡しても、stacked のラベルを描画します。
`placeholder (hub-input, hub-select, hub-textarea, hub-datepicker)`	`string`	`'' / NgSelectConfig.placeholder (hub-select)`	プレースホルダーテキスト。
`formText`	`string`	—	コントロールの下に表示されるヘルパーテキスト。
`type (hub-input) — file is deprecated`	`'text' \| 'number' \| 'password' \| 'email' \| 'tel' \| 'url' \| 'color' \| 'checkbox' \| 'switch' \| 'counter' \| 'file'`	`'text'`	hub-input のフォーマット。
`passwordRevealed (hub-input)`	`boolean`	`false`	パスワードフィールドの表示状態を表す双方向モデル。目のアイコンをクリックすると更新され、値を設定すると表示または非表示になります。
`passwordToggle (hub-input)`	`boolean`	`true`	パスワードフィールドに統合された表示切り替えボタンをレンダリングするかどうか。
`hideOnBlur (hub-input)`	`boolean`	`true`	フィールドからフォーカスが外れたときに、表示中のパスワードを自動的に再度マスクするかどうか。
`capsLockWarning (hub-input)`	`boolean`	`true`	Caps Lock が有効な間、フィールドの下にヒントを表示するかどうか。
`passwordStrength (hub-input)`	`boolean`	`false`	フィールドの下にオプションの4セグメント強度メーターを表示します。スコアリングは provideHubForms で上書きできます。
`autocomplete (hub-input)`	`string`	`''`	ネイティブの autocomplete 属性。パスワードマネージャー向けに current-password や new-password などを指定します。
`clearable (hub-input)`	`boolean`	`false`	true の場合、値が入ると内部に ✕ ボタンを表示します。コントロールをクリアし、空の検索語を発行します。
`indeterminate (hub-input)`	`boolean`	`false`	true のとき、チェックボックスは混在状態を示します。部分的に選択されたリストの「すべて選択」に対する正直な答えです。双方向で、クリックすると解決します。switch 形式では無視されます。
`debounceTime (hub-input)`	`number`	`0`	search イベントが発火するまでのデバウンス時間（ミリ秒、0 はキー入力ごと）。
`mask (hub-input)`	`string`	—	テキストフォーマット用のパターンマスク。トークン: 0 = 数字、A = 英字、* = 英数字。その他の文字はリテラルな区切り文字です。例: "0000 0000 0000 0000"。
`unmaskValue (hub-input)`	`boolean`	`false`	マスクを設定した場合、フォーマット済みテキストの代わりに、入力された生の文字（区切り文字なし）をフォームに保存します。
`swatches (hub-input type="color")`	`ReadonlyArray<string \| HubColorSwatch> \| null`	`null`	type="color" がスウォッチのグリッドとして提示する色。CSS の色文字列または { value, label }。null は provideHubForms({ color }) のパレットを使い、なければ従来の hex フィールドになります。[] は従来のフィールドを強制します。HUB_COLOR_PALETTES に 5 つのリストがあります。
`allowCustomColor (hub-input type="color")`	`boolean`	`true`	グリッドの最後に、リスト外の色を選ぶネイティブピッカーを開くセルを置くかどうか。閉じたパレットではオフにします。
`customColorLabel (hub-input type="color")`	`string`	`'' / HubFormsConfig.color.customColorLabel`	自由色セルのアクセシブルな名前。空の場合はグローバル設定の color.customColorLabel を使います。
`range (hub-slider)`	`boolean`	`false`	2 つのつまみを持つレンジスライダー。値は [lower, upper] のタプルになります。
`options (hub-segmented)`	`HubSegmentedOption[]`	`[]`	hub-segmented の選択可能なオプションを、レンダリング順に指定します — それぞれ { value, label, disabled? } です。
`size (hub-segmented)`	`'sm' \| 'md' \| 'lg'`	`'md'`	セグメンテッドコントロールの視覚的な密度：'sm'、'md'（デフォルト）または 'lg'。
`disabled (all fields)`	`boolean (two-way, model)`	`false`	フィールドを無効化します。共通の基底クラスからすべてのフィールドが継承しており、双方向です — リアクティブコントロール経由で無効化されたフィールドは、その変化を返します。`hub-segmented` では、個々のオプションも `option.disabled` を通じて個別に除外できます。
`multiple (hub-segmented)`	`boolean`	`false`	複数選択を許可します。値は配列になり、オプションは aria-pressed でトグルします。
`vertical (hub-segmented)`	`boolean`	`false`	セグメントを横一列ではなく縦に積み重ねます。
`vertical (hub-select) — deprecated`	`boolean`	`false`	非推奨であり、同じく非推奨の dropdown 以外のフォーマットに紐づいています。buttons／checkbox／radio のオプションを縦方向に並べます。`<hub-segmented [vertical]="true">` を使ってください。
`color (hub-segmented)`	`'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'neutral' \| string`	`''`	選択セグメントのセマンティックアクセント（primary, success, …）または任意の色。single モードでスライドします。
`value (hub-segmented)`	`unknown \| unknown[]`	`undefined`	双方向バインド可能な選択値（model()）：single モードでは選択されたオプションの値、multiple モードでは選択値の配列になります。valueChange を発行します。通常は代わりに formControlName を通じて制御します。
`format (hub-select) — deprecated for buttons/checkbox/radio`	`'dropdown' \| 'buttons' \| 'checkbox' \| 'radio'`	`'dropdown'`	select が同じ値をどのようにレンダリングするか。
`prepend / append (hub-input, hub-select, hub-textarea, hub-datepicker, hub-timepicker)`	`string \| string[]`	`''`	ボックスとして描画されるあらゆるフィールドに付く静的なグループアドオン。文字列は 1 つのアドオン、配列はその連なりを表し、空の項目は空のボックスとして描かれず破棄されます。アドオンはフィールドの境界線を共有し、フォーカスできません。縁に付く操作可能なコントロールが必要な場合は [hubPrepend] / [hubAppend] テンプレートを使ってください。両方を同時に指定でき、投影されたコンテンツは常にその側の最も外側の要素になります。
`items / bindLabel / bindValue / multiple (hub-select)`	`any[] / string / string / boolean`	—	選択肢、オブジェクト項目の label/value プロパティ名、および複数選択。
`groupBy (hub-select)`	`string \| undefined`	`undefined`	ドロップダウン項目をオプショングループのヘッダーの下にグループ化するために使用されるプロパティ名（ドットパス）。
`searchable / clearable (hub-select)`	`boolean`	`true`	入力によってオプションを絞り込めるか（searchable）、および組み込みのクリアボタンで選択を解除できるか（clearable）。どちらもデフォルトは true です。
`closeOnSelect (hub-select)`	`boolean`	`true`	項目を選択した後にドロップダウンを閉じるかどうか。multiple モードで複数の値を選ぶ間開いたままにするには false を設定します。
`autoOpen (hub-select)`	`boolean`	`false`	フィールドが現れた時点で一覧を開きます。表計算のセルが編集に変わる、行がフォームに変わる、といったように他のものが読み手のためにすでに開いたフィールド向けです。フィールドができた時にはクリックは使い終わっているため、これがないとフィールドに着くのに1回、一覧を見るのにもう1回かかります。
`initialSearchTerm (hub-select)`	`string \| null`	`null`	フィールドが最初から絞り込まれている検索語。現れた時点で、一覧が開く前に適用されます。autoOpen と同じ場面の一打鍵ぶん手前で、フィールドを開いた文字はその検索欄に入るべきものです。入らなければ読み手は二度打つことになります。
`clearSearchOnAdd (hub-select)`	`boolean \| undefined`	`undefined (follows closeOnSelect)`	選択のたびに検索ボックスを空にするかどうか。未指定ならエンジンは `closeOnSelect` に従います。両者を分けたくなるまではそれで十分ですが、タグ欄は次の値を受けるために開いたままでいながら、いま使った語を忘れる必要があります。
`fixedPlaceholder (hub-select)`	`boolean`	`false`	値が選択されてもプレースホルダーを表示したままにします。デフォルトは false（選択時にプレースホルダーが隠れる）で、ng-select v23 の慣例に反するデフォルトを反転させています。
`loading / notFoundText (hub-select)`	`boolean / string`	`false / NgSelectConfig.notFoundText`	loading は非同期の項目を取得している間、ドロップダウンのローディング状態を表示します。notFoundText は検索語に一致する項目がないときに表示されるメッセージです。
`readonly (hub-input, hub-select, hub-textarea, hub-datepicker, hub-otp-input, hub-timepicker)`	`boolean`	`false`	true の場合、フィールドは値を表示しつつ一切の操作を受け付けません。disabled のスタイルやフォーム状態の変更は伴いません。
`plaintext (hub-input, hub-textarea)`	`boolean`	`false`	フィールドの枠を持たない値。`readonly` はまだ入力途中の欄の状態で、テーマは `--hub-input-readonly-bg` / `-border-color` で枠を与えます。`plaintext` は単に表示されるだけの値のためのもので、枠がないことそのものであって、たまたま纏った色ではありません。出荷時の既定値では `readonly` も枠を描かないため、手を加えなければ両者の違いは水平パディング、左右のボーダー幅、カーソル、アフォーダンスです。`readonly` を含意し、二つの表示は排他的です。コントロールは本物の input のままです。
`appendTo (hub-select)`	`string \| undefined`	`'body'`	ドロップダウンパネルを追加する先の要素の CSS セレクタ。デフォルトは 'body' で、パネルが overflow/transform を持つ祖先（カード、スクロールコンテナ、モーダル）から抜け出せるようにします。インラインでレンダリングするには undefined を渡します。
`addTag (hub-select)`	`boolean \| ((term: string) => any \| Promise<any>)`	`false`	検索語から項目を作成します（dropdown フォーマット）：true は検索語をそのまま追加し、関数は検索語を新しい項目にマッピングします（同期または Promise）。
`addTagText (hub-select)`	`string`	`NgSelectConfig.addTagText`	addTag が有効なとき、入力中に表示される「項目を追加」行のラベル。
`minTermLength (hub-select)`	`number`	`0`	フィルタリング（または typeahead の Subject）が動き出すまでの検索語の最小長。
`typeahead (hub-select)`	`Subject<string> \| undefined`	`undefined`	非同期／サーバーサイド読み込みのために検索語の変更を受け取る Subject。指定するとクライアントサイドのフィルタリングは無効になります — 結果は items を通じて返してください。
`compareWith (hub-select)`	`((a: any, b: any) => boolean) \| undefined`	`undefined`	項目とバインドされた値のカスタム等価判定（例：オブジェクトを id で比較）。省略時はベンダー組み込みの比較が適用されます。
`searchFn (hub-select)`	`((term: string, item: any) => boolean) \| undefined`	`undefined`	`searchable` が使う組み込みのマッチング処理を置き換えます。入力された検索語と項目を受け取り、その項目が一致するかどうかを返します — これにより、ラベルに表示されていないフィールドまで検索の対象にできます。
`mode (hub-datepicker)`	`'single' \| 'range' \| 'day-time-range'`	`'single'`	単一の日付、自由な日付範囲、または 1 日の中での開始時刻と終了時刻。
`granularity (hub-datepicker)`	`'year' \| 'month' \| 'day' \| 'hour' \| 'minute' \| 'second'`	`'day'`	選択された各時点が持つ精度と、それを選ぶパネルを決めます。year と month は 12 セルのグリッド、day はカレンダーを表示し、hour・minute・second はそこに時刻入力を追加します。mode とは直交する軸で、mode は選ぶ点の数を、granularity は各点の精度を決めます。既定は day で、従来どおり YYYY-MM-DD の文字列を出力します。hour 以降では、閲覧者のローカル時刻とその日付のオフセットを含む完全な ISO 8601 タイムスタンプになります。
`valueFormat / parse (hub-datepicker)`	`'iso' \| 'date' \| 'timestamp' \| ((date) => unknown) / ((raw) => Date \| null) \| null`	`'iso' / null`	値に関する軸です。valueFormat はバインドされたコントロールが保持する形を決めます: 'iso'（既定）、ネイティブな Date なら 'date'、エポックミリ秒なら 'timestamp'、それ以外は関数を渡します。parse は入力値の読み取り方を決め、任意の桁数の ISO 文字列・Date インスタンス・エポックミリ秒の自動判定を置き換えます。min と max にも適用されます。
`minuteStep / secondStep / hourFormat (hub-datepicker)`	`number / number / '12' \| '24' \| undefined`	`5 / 1 / undefined`	時刻まわりの設定です。minuteStep と secondStep はスピンボタンの増分、hourFormat は 12 時間制か 24 時間制を強制します。未指定ならロケールから導出され、パネルだけでなく入力欄の表示にも適用されるため、両者が食い違うことはありません。3 つとも provideHubForms のグローバル設定にフォールバックします。
`min / max / disabledDates (hub-datepicker)`	`string \| Date \| number \| null / ((date: Date) => boolean) \| null`	`null`	選択可能な範囲と、日付ごとの無効化述語です。範囲は日単位ではなく時刻まで考慮します。その日のどの瞬間も許可されない場合にのみ日が無効になるため、min = 2026-09-01T14:00 では 9 月 1 日はクリック可能なままで、それより早い時刻は時刻コントロールが拒否します。ISO 文字列、Date、エポックミリ秒を受け取ります。
`locale / firstDayOfWeek / weekdayFormat (hub-datepicker)`	`string / number / 'short' \| 'narrow' \| 'long'`	`LOCALE_ID / undefined / undefined`	カレンダーの i18n：locale は表示値と月／曜日名に使う BCP-47 タグです（デフォルトはアプリの LOCALE_ID、なければ en-US）。firstDayOfWeek は週の最初の曜日を設定します（0 = 日曜、1 = 月曜…）。weekdayFormat は曜日ヘッダーの表示幅を選びます。後の 2 つはグローバルな provideHubForms 設定にフォールバックします。
`monthFormat (hub-datepicker)`	`'short' \| 'long'`	`'short'`	パネルのヘッダーが月をどう表記するか。既定は省略形です。パネルの幅は日付グリッドとちょうど同じで、ヘッダーはナビゲーションボタンが残した分しか使えません — 102px に対し、綴った «septiembre de 2026» は 152px を要し、切り詰められます。`--hub-daterangepicker-cell-size` や `--hub-datepicker-grid-gap` でパネルを広げた場所で `long` を指定してください。幅を広げる操作はグローバルです。カレンダーは `document.body` に付けられたオーバーレイに描画されるため、フィールドに設定したカスタムプロパティは届きません — トークンは `:root` で宣言してください。
`displayFormat / timeDisplayFormat / rangeSeparator / labels (hub-datepicker)`	`Intl.DateTimeFormatOptions \| string \| ((date) => string) / Intl.DateTimeFormatOptions / string / Partial<HubDatepickerLabels>`	`undefined / undefined / undefined / {}`	表示の書式です。displayFormat は選択された値を描画し、Intl.DateTimeFormatOptions、'dd/MM/yyyy HH:mm' のような Angular の日付パターン、または関数を受け取ります。粒度が時刻を含むようになると timeDisplayFormat がその上に合成されるため、日付部分は displayFormat が指定したままに保たれます。rangeSeparator は範囲の 2 つの日付のあいだに入るテキスト、labels はインスタンスごとに UI ラベルを上書きします（グローバル設定の上にマージされます）。
`clearable / showToday / closeOnSelect (hub-datepicker)`	`boolean`	`true / true / true`	動作フラグ：clearable はクリアのショートカットを表示し、showToday は「今日」ショートカットを表示し、closeOnSelect は日付を選択した後にカレンダーを閉じます（single モードのみ）。デフォルト: true / true / true。
`multiple (hub-file-input)`	`boolean`	`false`	複数のファイルを保持できるかどうか。コントロールの値を File から File[] に切り替えます。
`accept (hub-file-input)`	`string`	`'*'`	許可するファイル種別（例: image/*,.pdf）。OS のダイアログだけでなく、ドロップや貼り付けにも適用されます。
`maxSize / minSize / maxTotalSize (hub-file-input)`	`number \| null`	`null`	ファイルごとの最大・最小サイズと、合計の最大サイズ（バイト）。
`maxFiles (hub-file-input)`	`number \| null`	`null`	ファイル数の上限。multiple と併用する場合にのみ意味を持ちます。
`dragDrop / paste (hub-file-input)`	`boolean`	`true`	フィールドにファイルをドロップできるか、また貼り付けられるか。
`appearance (hub-file-input)`	`'dropzone' \| 'compact'`	`'dropzone'`	空のフィールドが占める広さです。`dropzone` はアイコンとドラッグ文言を備えた背の高いパネル。`compact` は同じフィールドを 1 行に収めたもので、選択コントロールと制約だけを残します。画面の主役ではないロゴや署名のための形です。ドロップはどちらでも働きます。なくなるのはそれを説明していた文言であって、振る舞いではありません。
`preview (hub-file-input)`	`'none' \| 'list' \| 'grid' \| 'inline'`	`'list'`	保持しているファイルの表示方法：表示しない、リスト、ドロップゾーンの下のタイル（grid）、フィールド内のタイル（inline）。inline のタイルが 1 つならフィールド全体を占め、multiple ではタイルがグリッドになり、最後に追加用のタイルが並びます。
`currentFile (hub-file-input)`	`string \| HubCurrentFile \| readonly (string \| HubCurrentFile)[] \| null`	`null`	レコードが既に持っているファイル。preview="inline" で表示されます。URL、HubCurrentFile { url, name?, type? }、または multiple ではそれらの配列。表示専用で、フォームの値には入りません。
`imagePreview (hub-file-input)`	`boolean`	`true`	画像を画像として表示するかどうか。オフにすると、すべてのファイルが種類のアイコンで描かれ、サムネイル用の object URL は作成されません。
`readonly (hub-file-input)`	`boolean`	`false`	ファイルは表示されたまま開けますが、選択・ドロップ・貼り付け・置き換え・削除はできません。disabled と違い、フォーカスを保ち、送信されます。
`clearable (hub-file-input)`	`boolean`	`true`	フィールドの内容（選択済みまたは保存済み）をユーザーが削除できるかどうか。list と grid の削除ボタンと「Remove all」にも適用されます。
`allowDuplicates (hub-file-input)`	`boolean`	`false`	同じファイルを二度選択できるかどうか（名前・サイズ・更新日時をキーとします）。
`capture (hub-file-input)`	`'user' \| 'environment' \| null`	`null`	対応プラットフォームで、ファイルブラウザーではなく端末のカメラを開きます。
`autoUpload (hub-file-input)`	`boolean`	`true`	受理されたファイルを直ちにアップロードするかどうか。アップローダー未登録なら無視されます。
`buttonLabel / hint (hub-file-input)`	`string \| null`	`null`	参照ボタンのテキストと、自動生成される制約のヒントを上書きします。
`dropText / dropSubtext (hub-file-input)`	`string \| null`	`null`	ドロップゾーンの 2 行の案内文をインスタンス単位で上書きします。どちらも既定ではグローバルなラベルを使います。
`classlist (every field except hub-segmented and hub-legend)`	`string`	`''`	ホスト要素に適用する追加の CSS クラス。
`showValid (all fields)`	`boolean`	`HubFormsConfig.showValid`	有効なフィールドが有効状態を表示するかどうか。未操作のフィールドまで残らず緑に塗るフォームは何も伝えないため、デフォルトではオフです。無効状態のほうは常に表示されます。
`validFeedback (all fields)`	`string \| null`	`null`	`showValid` が有効なとき、フィールドが有効になった時点でその下に表示されるメッセージ。
`invalidFeedbackTemplateFn (all fields)`	`((key: string, value: any) => string) \| null`	`null`	特定のエラーキーに対するメッセージを、このフィールドに限って上書きします。エラーキーとその値を受け取り、表示するテキストを返します — アプリ全体のデフォルトは `provideHubForms` にあります。
`min / max (hub-input)`	`number \| undefined (two-way, model)`	`undefined`	number および counter フォーマットにおける数値の下限・上限。双方向であるため、自身の値をクランプするカウンターは、その境界値を呼び出し元に返します。
`accept / multiple / buttonLabel (hub-input) — deprecated`	`string / boolean / string`	`'*' / false / 'Choose file'`	hub-input の非推奨となった file 形式の名残です。公開されたままで動作もしますが、ファイル選択は hub-file-input に移りました。こちらは OS のダイアログだけでなくドロップや貼り付けにも accept を適用します。次のメジャーで削除されます。
`hubAutoresize (textarea[hubAutoresize])`	`boolean`	`true`	素の textarea に使える単独のディレクティブで、内容に合わせて要素を伸ばします。hub-textarea は自身の autoresize 入力からこれを適用します。ライブラリの外にある textarea では、これを直接使います。
`mode (hub-otp-input)`	`'numeric' \| 'alphanumeric' \| 'alpha'`	`'numeric'`	各ボックスが受け付ける文字と、スマートフォンで表示されるキーボードの種類：数字のみか、英字と数字か。
`min / max (hub-timepicker)`	`string (HH:MM)`	`''`	フィールドが受け付ける最も早い時刻と最も遅い時刻を `HH:MM` で指定します。空の場合は制限なしです。
`step (hub-timepicker)`	`number (seconds)`	`0`	ネイティブのステッパーの刻み幅（秒単位）。`0` の場合はブラウザーのデフォルトである 1 分のままになります。
`group / groupName (form[hubForm], hub-fieldset, fieldset[hubFieldset])`	`AbstractControl \| null / string \| undefined`	`null / undefined`	コンテナがエラーを表示する対象のグループ。`group` には `AbstractControl` を直接渡すか、`groupName` には囲んでいるフォームの子コントロールの名前を渡します — コンテナがすでに対象のグループを囲んでいる場合は、どちらも不要です。
`errorTrigger (form[hubForm], hub-fieldset, fieldset[hubFieldset])`	`'touched' \| 'submit' \| 'always'`	`'touched'`	グループレベルのエラーが表示されるタイミング：グループが touched になった時点か、送信が試みられた後のみか、直ちに表示するか。
`formTextType (all fields)`	`'bottom' \| 'tooltip'`	`'bottom'`	ヘルプテキストの表示場所です。`bottom`（既定）はコントロールの下に描き、`tooltip` はラベル行の末尾の疑問符の裏に格納します。決めた原則は、一文なら下に、それ以上ならツールチップに——各フィールドの下に段落が並ぶと、フォームは文書になってしまいます。トリガーはラベルの中ではなく隣に置いたボタンで、開いてもコントロールにフォーカスが移らず、アクセシブル名はヘルプテキストそのものです。
`rows (hub-textarea)`	`number`	—	表示するテキストの行数。
`cols (hub-textarea)`	`number`	—	表示する列数。指定するとテキストエリアは全幅への伸張をやめます。
`maxlength (hub-textarea)`	`number`	—	最大文字数。ネイティブの制限とカウンターの両方を決めます。
`counter (hub-textarea)`	`boolean`	—	コントロールの下に文字数カウンターを表示するかどうか。
`autoresize (hub-textarea)`	`boolean`	—	テキストエリアが内容に合わせて広がるかどうか。
`length (hub-otp-input)`	`number`	—	コードのセル数（文字数）。
`secret (hub-otp-input)`	`boolean`	—	パスワードのように文字を伏せます。
`separator (hub-otp-input)`	`string`	—	グループ間に表示する区切り文字。
`separatorEvery (hub-otp-input)`	`number`	—	N セルごとに視覚的な区切りを挿入します（0 は挿入しない）。
`showValue (hub-slider)`	`boolean`	—	つまみの上に値のバブルを表示するかどうか。
`step (hub-input, hub-slider)`	`number`	—	ステップ値（数値入力・カウンター入力）。
`min / max (hub-slider)`	`number`	`0 / 100`	つまみが動く範囲の下限と上限。刻み幅は step が決めます。つまみが 2 つのスライダーでは、両方が同じ範囲を共有します。
`legend (hub-fieldset, fieldset[hubFieldset])`	`string`	—	凡例のテキスト。`hubLegend` テンプレートを投影した場合は無視されます。
`required (all fields)`	`boolean \| null (two-way, model)`	`null`	フィールドが必須かどうか。リアクティブなバインディングでは、コントロール自身のバリデーターから導出されるため、テンプレート上で直接指定した値が尊重されるのはテンプレート駆動のフィールドのみです。この値がアスタリスクと `required` 属性を制御します。
`required (hub-legend)`	`boolean`	—	必須インジケーターを表示するかどうか。
`invalid (hub-legend)`	`boolean`	—	無効状態のスタイルを適用するかどうか。
`hubFileDrop (directive)`	`'element' \| 'window'`	`'element'`	`hubFileDrop` がドラッグを見張る範囲です。ホスト要素とその配下か、ページ全体か。ウィンドウ範囲は、対象の上ではなく隣に落とされたファイルをブラウザーが開いてしまうのを防ぎます。開かれればページも、そこに入力した内容も失われます。
`accept / maxSize / minSize / maxFiles / dropDisabled / overlay / dropText / dropSubtext (hubFileDrop)`	`string / number \| null / number \| null / number \| null / boolean / boolean / string \| null / string \| null`	`'*' / null / null / null / false / true / null / null`	このゾーンはファイルフィールドと同じ制約を適用し、拒否したものを同じ `HubFileRejection` の形で報告します。`overlay` は描画するカードを止め、振る舞いと `hub-file-drop--active` クラスだけを残すので、独自のカードを描けます。`dropText` と `dropSubtext` はその 2 行で、2 行目は既定で制約を文章にしたものになります。

アウトプット

forms の動作に反応 — ロジックを接続できる 16 個のイベント。

名前	型	説明
`valueChange (every field except hub-timepicker)`	`EventEmitter<value>`	フィールドの値が変化するたびに発行されます。
`change (hub-select)`	`EventEmitter<item \| item[]>`	選択が変わるたび、選択された項目そのもの（束縛された値ではなくオブジェクト全体）を発行します。`ng-select` がこの名前で常に発行してきたものです。これは本物の出力です。以前は要素に書いた `(change)` がただの DOM リスナーで、内部の入力欄から上がってきたものを拾うだけで、非同期の `addTag` が作った値では一度も発火しませんでした。
`search (hub-input)`	`EventEmitter<string>`	入力中に発行されるデバウンス済みのタイプアヘッド語（テキスト系入力）。
`rejected (hub-file-input)`	`EventEmitter<HubFileRejection[]>`	宣言された制約により拒否されたファイルと、それぞれの拒否理由。
`fileRemoved (hub-file-input)`	`EventEmitter<File>`	選択から外れた選択済みファイル（削除、またはタイルからの置き換え）。
`currentFileRemoved (hub-file-input)`	`EventEmitter<HubCurrentFile>`	フィールドから外れた保存済みファイル（currentFile）。削除されたか、選択したファイルで置き換えられた場合です。フォームの値には含まれていないため、サーバー側で削除する合図になります。
`uploadStateChange (hub-file-input)`	`EventEmitter<readonly HubFileItem[]>`	アップロードの状態または進捗が変わるたびの、項目の全リスト。
`filesDropped / rejected (hubFileDrop)`	`EventEmitter<File[]> / EventEmitter<HubFileRejection[]>`	`hubFileDrop` ゾーンへのドロップが残すもの。すべての制約を通ったファイルと、通らなかったファイルが理由と破った上限つきで届きます。どちらも空では発行されません。
`submit (form[hubForm]) — the native event`	`SubmitEvent (native, not a custom output)`	カスタム出力ではありません。`hubForm` はフォーム自身の `submit` イベントを購読し、デフォルトの画面遷移を抑止し、ツリーを touched としてマークして、submitted の状態を切り替えます。独自のハンドラーはフォームの `(submit)` にバインドしてください。
`disabledChange / requiredChange (all fields) · labelTypeChange / placeholderChange / minChange / maxChange / passwordRevealedChange / indeterminateChange (hub-input) · valueChange (hub-segmented)`	`EventEmitter<T> (the paired half of each two-way model)`	双方向の `model()` 入力はいずれも対応する `Change` 出力を公開しており、そのおかげで `[(disabled)]` などが機能します。バナナ・イン・ア・ボックス構文ではそれらが見えないため、ここに記載しています。
`opened / closed / cleared / viewChange (hub-datepicker)`	`EventEmitter`	カレンダーのライフサイクルおよびナビゲーションイベント。
`onOpen / onClose / onClear / onSearch / onAdd / onRemove (hub-select)`	`EventEmitter`	ドロップダウンのライフサイクルおよびタグ／タイプアヘッドイベント。
`onFocus / onBlur (hub-select)`	`EventEmitter<any>`	ドロップダウンコントロールがフォーカスを得たり失ったりしたときに発行されます（dropdown フォーマット）。ベンダーの focus/blur イベントを中継します。
`scroll / scrollToEnd (hub-select)`	`EventEmitter<{ start: number; end: number }> / EventEmitter<any>`	scroll はドロップダウンリストのスクロール中に可視範囲の { start, end } ウィンドウを発行し、scrollToEnd はリストが末尾に達したときに発行されます — typeahead と組み合わせた無限／ページング読み込みのフックです。
`enter (hub-input)`	`EventEmitter<number \| string \| boolean \| File \| FileList \| null>`	Enter キーが押されたときに現在の値を発行します。
`completed (hub-otp-input)`	`EventEmitter<string>`	すべてのセルが埋まると完全なコードを発行します。

テンプレート

自分好みに — 11 個のテンプレートスロットでカスタムマークアップをプロジェクションできます。

名前	説明	サンプル
`hubFormText`	リッチなヘルパーテキストコンテンツを投影します。	`<ng-template hubFormText>…</ng-template>`
`hubValidationError`	指定されたエラーキーのメッセージを上書きします。	`<ng-template hubValidationError key="min">…</ng-template>`
`hub-legend`	fieldset の legend を要素として投影します。必須マークと無効状態もここが持ちます。	`<hub-legend [required]="true">Shipping address</hub-legend>`
`hubSelectOption (hub-select)`	ドロップダウン項目のカスタム描画。hubSelect* スロットの 1 つで、hubSelectLabel・hubSelectHeader・hubSelectFooter・hubSelectNotFound などがパネルの他の部分を担います。	`<ng-template hubSelectOption let-item="item">…</ng-template>`
`hubFileIcon (hub-file-input)`	サムネイルのないファイル用のアイコン。項目を暗黙のコンテキストとして受け取ります。	`<ng-template hubFileIcon let-item>…</ng-template>`
`hubFilePreview (hub-file-input)`	選択されたファイルの描画全体を置き換えます。項目に加えて、削除・再試行・キャンセルの各アクションを受け取ります。	`<ng-template hubFilePreview let-item let-remove="remove">…</ng-template>`
`hubFileDropzoneNotice (hub-file-input)`	ドロップゾーンの最上部、アイコンの上に任意のマークアップを投影します。案内文にも制約のヒントにも表せない通知のための場所です。	`<p hubFileDropzoneNotice>2 documents still missing</p>`
`hubSegmentedOption (hub-segmented)`	各セグメントの内容（アイコン、バッジ、リッチなマークアップ）を置き換えます。選択、キーボードナビゲーション、ARIA は引き続きコンポーネントが管理します。コンテキスト：選択肢（暗黙）、selected、index。	`<ng-template hubSegmentedOption let-option let-selected="selected" let-index="index">…</ng-template>`
`hubSelectSuffix (hub-select、非推奨)`	22.16.0 で非推奨 — すべてのフィールドで同じことができる [hubAppend] を使ってください。引き続き動作しますが、両方ある場合は [hubAppend] が優先されます。セレクトの行末側の端に操作可能なコントロールを付けます。選択中の項目に対して働くボタン — 設定する、参照する、新規作成するといった用途です。投影コンテンツではなくテンプレートとして宣言するのは、セレクトの総取り ng-content が ng-option をエンジンへ渡す役目を持ち、そのまま飲み込んでしまうためです。テンプレートから描画することで DOM 上でもアクションがコントロールの後に残るため、タブ移動は先にフィールドへ到達します。コントロールとアクションは境界線を共有し、ひとつのフィールドとして読めます。	`<ng-template hubSelectSuffix><button …>…</button></ng-template>`
`hubPrepend / hubAppend (all box-shaped fields)`	フィールドの端に付ける、prepend / append の文字列では運べない内容 — アイコンや、値に対して働くボタンです。値を持つ箱として描かれるすべてのフィールド（hub-input、hub-select、hub-textarea、hub-datepicker）で使えます。文字列アドオンを置き換えるのではなく組み合わせます。文字列が先に描画されるため、投影された内容は常にその側の最も外側になります — 単位がフィールドを説明し、アクションはその外側に置かれます。投影された要素は自身のものではなくフィールドの境界線・角丸・高さをまといます。そのためボタンがコントロールの横に二重の太い継ぎ目を描くことはありません。フィールドの ng-content はすでに別用途で使われているため、テンプレートとして宣言します。スロットには別のフィールド（hub-input、hub-select、hub-textarea、hub-datepicker を直接の子として）も渡せます。ホストのフィールドとぴったり接するため、価格とその期間が本来ひとつである記述として読めます。	`<ng-template hubAppend><button …><hub-icon … /></button></ng-template>`
`hubInputPrefix / hubInputSuffix (hub-input)`	フィールドの行頭側または行末側のアフィックス領域に内容を投影します — 先頭のアイコン、通貨記号、インライン SVG など。テンプレートではなく属性ディレクティブなので、投影する要素自体に付けます。フィールドが内側のパディングを確保するので、テキストがアフィックスの下に入ることはありません。投影された hub-icon は --hub-input-icon-* トークンでテーマが適用されます。両端は書き方向に従うため、dir="rtl" で左右が入れ替わります。クリアボタンには組み込みの clearable 入力を使ってください。	`<hub-icon hubInputPrefix name="fa:solid:magnifying-glass" />`