Angular フォームライブラリ | ng-hub-ui-forms

アクセシブルな Angular フォームフィールド（input、textarea、slider、select、datepicker）。コントロール／グループ／フォーム単位のエラーを自動表示し、リアクティブフォームと CSS 変数に対応します。

インタラクティブなサンプル

一般的な Angular のユースケースでライブラリがどのように動作するかを示すライブサンプルをご覧ください。

テキストフィールド

リアクティブフォームのバインディングと、配線不要の自動エラー表示を備えた `hub-input` フィールドです。text、email、password、number、counter に加え、フローティングラベルと input-group のアドオンに対応します。

テキストフィールド & 自動エラー

We'll never share it.

パスワードフィールド — 表示切替、強度メーター、オートコンプリート

While typing with Caps Lock on, a warning hint appears automatically under the field.

数値、カウンター、カラー、スイッチ、チェックボックス

入力グループ、ファイル & フローティングラベル

$.00
@
No file selected
Deprecated since 22.6.0 — use <hub-file-input> instead.

フィールドに付随するアイコン・ボタン・フィールド

€
Pick one
From
€
a month
a week
Unassigned
Markdown

パターンマスク（カード、IBAN、電話、日付）

Form value: { "card": "", "expiry": "", "iban": "", "phone": "", "date": "" }

ワンタイムコード（OTP）入力

Paste the 6-digit code we sent you.

Form value: { "code": "", "pin": "", "coupon": "" }

アイコン付き検索ボックスとタイプアヘッド

Debounced term (after 300 ms): —

  • Angular
  • React
  • Vue
  • Svelte
  • Solid
  • Qwik
  • Preact
  • Lit

複数行＆範囲

文字カウンター付きの自動拡張テキストエリアと、単一／デュアルサムの範囲スライダーです。

カウンター & 自動リサイズ付きテキストエリア

0 / 160
Grows as you type.

Slider & デュアルサムレンジ

Dual-thumb range.

スライダーのスタイル（グラデーション/フラッシュ）

選択

hub トークンでテーマ化されたフォーク版 ng-select エンジンに加え、同じ値に対して独自の UI をレンダリングする button、radio、checkbox の各フォーマットを提供します。

セグメンテッドコントロール

Single-select — the selected pill slides between options.
Multiple-select — the value is an array.

view: list · perks: wifi

Segmented：カスタム選択肢テンプレート

Single-select — the template renders an icon, the label and a check on the selected segment.
Multiple-select — the same template contract; index comes from the context.

transport: bike · channels: email

選択 & 複数選択

Select a country
Pick some tags
Angular
Signals

グループ化オプション

Select a city

タイプアヘッド検索

Type to filter…
Search and add…

Select：非同期タイプアヘッド

Type at least 2 characters…
Async typeahead — each term is pushed to the Subject and the results come back from the 'server'.
Pick or type a new tag…
addTag creates an item from the search term when nothing matches.

city: — · tags: —

オプション/ラベルのカスタムテンプレート

Pick a teammate

ボタン、ラジオ & チェックボックス形式

モーダル内のセレクト

アドオンと付随アクション

€
Pick a tier
/ month
Static addons at both ends, like an input group.
https://api.
Pick a region
A run of addons on one side reads as a single piece.
Pick a product
An action attached to the edge — it acts on whatever is selected.
Pick a plan
EUR
Addon and action together — the action is always the outermost.

日付選択

ネイティブの Date と CDK Overlay 上にゼロから構築した日付／範囲ピッカーで、境界値、キーボードナビゲーション、完全な i18n を備えています。

タイムピッカー — 一日の時刻

Required.
Between 08:00 and 22:00, in quarters.
Fed '09:30:00' — the seconds are trimmed instead of showing nothing.
FromUTC
Emitted value{ "opensAt": null, "closesAt": "09:00", "fromApi": "09:30:00", "shiftFrom": "09:00", "shiftTo": "18:00" } opensAt is required

Datepicker & 範囲

No future dates.
Pick a start, then sweep to preview.

時刻付き日付ピッカー

Each end carries its own time.
A single instant, minute precision.
Emitted value{ "window": null, "reminder": null }

粒度: 年から秒まで

 2026
2026-09
2026-09-01
2026-09-01T09:00:00+02:00
2026-09-01T09:30:00+02:00
2026-09-01T09:30:45+02:00

入力・値・表示のフォーマット

—
—
Anything the enum does not cover — here, Unix seconds.
—
An Angular date pattern. The stored value is unaffected.
—
Seeded with '15/06/2026', which no built-in rule would read.
string — 15/06/2026

1 日の中の時間範囲

One day, two times — never crosses midnight.
Two instants — the ends may fall on different days.
Emitted value{ "meeting": null, "stay": null } meeting spans — · stay spans —

ファイルアップロード

ドラッグ＆ドロップ、クリップボードからの貼り付け、種類とサイズの制約、プレビュー、そして任意のファイル単位のアップロード進捗に対応したファイルフィールド。

単一ファイルとバリデーション

Drag the file onto the box, paste it, or browse for it.

Selected: —

ドラッグ＆ドロップ・制限・プレビュー

アップロード進捗・キャンセル・再試行

Uploads start automatically. Rename a file to include “fail” to see the retry button.

コンテナ＆バリデーション

`form[hubForm]`、`hub-fieldset`、`hub-legend` は、フィールドがコントロールエラーを表示するのと同じ方法で、グループレベルおよびフォームレベル（クロスフィールド）のエラーを自動的に表示します。

コンテナ & フィールド間エラー

Password

右から左へ

`dir="rtl"` ですべてのフィールドが反転します。大半は論理 CSS プロパティで書かれているため無償ですが、スライダー・スイッチ・セグメンテッドコントロールはジオメトリの半分が CSS の外にあるため、個別に対応しました。

右から左へ — すべてのフィールドを反転

Barcelona
The calendar button changes side.