---
title: Input Group コンポーネント - ネイティブ Angular | Ignite UI for Angular | MITライセンス
description: Ignite UI for Angular Input Group は、データ入力のための使いやすいフォーム、さらに検証およびエラー処理などの機能も提供します。
keywords: Ignite UI for Angular, UI コントロール, Angular ウィジェット, web ウィジェット, UI ウィジェット, Angular, ネイティブ Angular コンポーネント スイート, Angular UI コンポーネント, ネイティブ Angular コンポーネント ライブラリ, ネイティブ Angular コンポーネント, Angular Label コンポーネント, Angular Label コントロール, Angular Input Group コンポーネント, Angular Input Group コントロール, Angular Input コンポーネント, Angular Input コントロール, Input コンポーネント, Input コントロール, Label コンポーネント, Label コントロール, Angular Input ディレクティブ, Angular Label ディレクティブ, Angular Forms, Angular Reactive Forms, Angular フォームの検証
license: MIT
_language: ja
---

# Angular Input Group (入力グループ) コンポーネントの概要

`IgxInputGroupComponent` は、ユーザーが input、select、textarea などの入力要素を拡張することを可能にします。これは、テキスト、アイコン、ボタン、カスタム バリデーション、フローティング ラベルなどのカスタム コンテンツを、プレフィックス、サフィックス、またはヒントとして、それらの両側に追加することで実現できます。

## Angular Input Group の例

<hr/>

## Ignite UI for Angular Input Group を使用した作業の開始

Ignite UI for Angular Input Group コンポーネントを使用した作業を開始するには、Ignite UI for Angular をインストールする必要があります。既存の Angular アプリケーションで、以下のコマンドを入力します。

```cmd
ng add igniteui-angular
```

Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。

次に、**app.module.ts** ファイルに `IgxInputGroupModule` をインポートします。

`IgxInputGroupComponent` はテンプレート駆動フォームを使用するために Angular **FormsModule** にも依存します。

```typescript
// app.module.ts

// import { IgxInputGroupModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxInputGroupModule, FormsModule],
    ...
})
export class AppModule {}
```

あるいは、`16.0.0` 以降、`IgxInputGroupComponent` をスタンドアロンの依存関係としてインポートすることも、[`IGX_INPUT_GROUP_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/input-group/src/input-group/public_api.ts) トークンを使用してコンポーネントとそのすべてのサポート コンポーネントおよびディレクティブをインポートすることもできます。

```typescript
// home.component.ts

// import { IGX_INPUT_GROUP_DIRECTIVES, IgxIconComponent } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: `
    <igx-input-group>
        <igx-prefix>+359</igx-prefix>
        <label igxLabel for="phone">Phone</label>
        <input igxInput [(ngModel)]="value" name="phone" type="tel" maxlength="9" />
        <igx-icon igxSuffix>phone</igx-icon>
    </igx-input-group>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IGX_INPUT_GROUP_DIRECTIVES, IgxIconComponent, FormsModule]
    /* or imports: [IgxInputGroupComponent, IgxPrefixDirective, IgxLabelDirective, IgxInputDirective, IgxIconComponent, IgxSuffixDirective, FormsModule] */
})
export class HomeComponent {
    public value = '123456789';
}
```

<DocsAside type="info">
このコンポーネントはマテリアル アイコンを使用します。`index.html` に次のリンクを追加してください: `<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">`
</DocsAside>

Ignite UI for Angular Input Group モジュールまたはディレクティブをインポートしたので、`igx-input-group` コンポーネントの使用を開始できます。

<DocsAside type="info" title="情報">
`igxInput`、`igxLabel`、`igx-preix`、`igx-suffix` または `igx-hint` ディレクティブを使用するには、`<igx-input-group>` コンテナーでラップする必要があります。
</DocsAside>

## Angular Input Group の使用

### Label および Input

、ディレクティブとその検証、データ バインディング、API については、[このトピック](label-input.md)を参照してください。

### Prefix および Suffix

`igx-prefix` / `igxPrefix` および `igx-suffix` / `igxSuffix` ディレクティブは、HTML 要素、文字列、アイコン、またはその他のコンポーネントを含むことができます。以下のサンプルでは、文字列 **prefix** とアイコン **suffix** を持つ新しい入力フィールドを作成します。

```html
<igx-input-group>
    <igx-prefix>+359</igx-prefix>
    <label igxLabel for="phone">Phone</label>
    <input igxInput name="phone" type="tel" maxlength="9" />
    <igx-icon igxSuffix>phone</igx-icon>
</igx-input-group>
```

<hr/>

### Hint

ディレクティブは、入力の下に配置されるヘルパー テキストを提供します。プロパティの値に応じて、入力の開始または終了の位置に配置できます。以下は、phone 入力にヒントを追加します。

```html
<igx-input-group>
    <igx-prefix>+359</igx-prefix>
    <label igxLabel for="phone">Phone</label>
    <input igxInput name="phone" type="tel" />
    <igx-suffix>
        <igx-icon>phone</igx-icon>
    </igx-suffix>
    <igx-hint position="start">Ex.: +359 888 123 456</igx-hint>
</igx-input-group>
```

This is how the phone field with hint looks:
<hr/>

### Input タイプと Input グループ タイプ トークン

入力グループのスタイルは、コンポーネントの プロパティを使用して変更できます。サポートされている入力グループ コンポーネントは、`line` (タイプが指定されていない場合のデフォルト)、`border`、`box` および `search` です。`line`、`border` および `box` タイプは、マテリアル デザイン テーマ専用に作成されています。これらのタイプを他のテーマで設定しても、入力グループの外観には影響しません。

```html
<igx-input-group type="border">
```

特定の型を宣言的に設定する例:

```typescript
providers: [{provide: IGX_input-group_TYPE, useValue: 'box' }]
```

インジェクション トークンを使用すると、すべての入力グループ インスタンスのタイプをアプリケーション レベルで指定できます。すべての関連コンポーネントを一度に簡単にスタイル設定できます。
タイプを設定するには、インジェクション トークンを使用して DI プロバイダーを作成します。

<DocsAside type="info" title="情報">
プロパティは よりも優先されるため、type プロパティが明示的に設定されている場合トークン値をコンポーネントレベルでオーバーライドできます。
`igniteui-angular` フォーム コントロールのほとんどは、内部で input-group コンポーネントを使用するか、カスタム テンプレートを使用します。グローバル トークンの設定は、これらのコンポーネントにも影響します。
</DocsAside>

```html
<igx-input-group>
    <input igxInput type="file" multiple />
</igx-input-group>
```

### Input Group テーマ

入力グループ コンポーネントは、`material`、`fluent`、`bootstrap`、`indigo-design` などの複数のテーマをサポートします。は、コンポーネントの初期化中に自動的に設定され、現在使用されているスタイルシートから推測されます。

```html
<igx-input-group theme="fluent">...</igx-input-group>
```

### 型指定されたフォーム

Ignite UI for Angular Input Group コンポーネントは、Angular 14 のデフォルトの厳密に型指定されたリアクティブ フォーム内で使用できます。型指定されたフォームの詳細については、[Angular 公式ドキュメント](https://angular.io/guide/typed-forms)をご覧ください。

## 検証

次のサンプルは、[テンプレート駆動フォーム](https://angular.io/guide/forms)または[リアクティブ フォーム](https://angular.io/guide/reactive-forms)を使用する場合に入力検証を構成する方法を示しています。

### テンプレート駆動フォーム

テンプレート駆動のフォーム検証は、検証属性 (`required`、`minlength` など) を `input` 要素に追加することによって実現されます。

```html
<form>
    <igx-input-group>
        <label igxLabel for="username">Username</label>
        <input igxInput name="username" type="text" required />
    </igx-input-group>

    <igx-input-group>
        <label igxLabel for="email">Email</label>
        <input igxInput name="email" type="email" required email />
    </igx-input-group>

    <igx-input-group>
        <label igxLabel for="password">Password</label>
        <input igxInput name="password" type="password" required minlength="8" />
    </igx-input-group>

    <button igxButton="contained" igxRipple type="submit">Submit</button>
</form>
```

`required` 属性はラベルの横にアスタリスクを追加し、このフィールドに入力する必要があることを示します。さらに、`input` に `email` や `minlength` などの追加の検証が適用されている場合、これにより、ディレクティブを介して追加要件をエンド ユーザーに通知します。

次の例では、双方向データ バインディングを使用し、`ngModel` をローカル変数にエクスポートしてコントロールの状態を検査する方法を示します。

```html
<form #login="ngForm">
    ...
    <igx-input-group>
        <label igxLabel for="email">Email</label>
        <input igxInput name="email" type="email" [(ngModel)]="user.email" #email="ngModel" required email />
        <igx-hint *ngIf="email.errors?.email">Please enter a valid email</igx-hint>
    </igx-input-group>

    <igx-input-group>
        <label igxLabel for="password">Password</label>
        <input igxInput name="password" type="password"
            [(ngModel)]="user.password" #password="ngModel" required minlength="8" />
        <igx-hint *ngIf="password.errors?.minlength">Password should be at least 8 characters</igx-hint>
    </igx-input-group>

    <button igxButton="contained" igxRipple type="submit">Submit</button>
</form>
```

フォーム コントロールのいずれかが無効な場合、ユーザーはフォームを送信できないようにする必要があります。これは、フォームの状態に基づいて送信ボタンを有効/無効にすることで実現できます。

次の例は、`ngForm` をローカル変数にエクスポートしてフォームの状態を検査する方法を示しています。

```html
<form #registrationForm="ngForm">
    <igx-input-group>
        <label igxLabel for="email">Email</label>
        <input igxInput name="email" type="email" [(ngModel)]="user.email" #email="ngModel" required email />
        <igx-hint *ngIf="email.errors?.email">Please enter a valid email</igx-hint>
    </igx-input-group>
    ...

    <button igxButton="contained" igxRipple type="submit" [disabled]="!registrationForm.valid">Submit</button>
</form>
```

上記の構成の結果は、次のサンプルで確認できます。[Email] および [Password] フィールドに入力を開始すると、入力された値が無効な場合に が表示されることがわかります。サンプルは、および [`igx-suffix`](#prefix-および-suffix) ディレクティブを使用してパスワードの可視性を切り替える方法も示します。

### リアクティブ フォーム

コンポーネント クラスのフォーム コントロール モデルにバリデーター関数を直接追加することにより、リアクティブなフォーム検証が実現されます。コンポーネント クラスでコントロールを作成したら、テンプレートのフォーム コントロール要素に関連付ける必要があります。

```ts
public registrationForm: FormGroup<User>;

constructor(fb: FormBuilder) {
    this.registrationForm = fb.group({
        username: ['', { nonNullable: true, validators: [Validators.required] }],
        email: ['', { nonNullable: true, validators: [Validators.required, Validators.email] }],
        password: ['', { nonNullable: true, validators: [Validators.required, Validators.minLength(8)] }]
    });
}
```

```html
<form [formGroup]="registrationForm">
    <igx-input-group>
        <label igxLabel for="username">Username</label>
        <input igxInput name="username" type="text" formControlName="username" />
    </igx-input-group>

    <igx-input-group>
        <label igxLabel for="email">Email</label>
        <input igxInput name="email" type="email" formControlName="email" />
    </igx-input-group>

    <igx-input-group>
        <label igxLabel for="password">Password</label>
        <input igxInput name="password" type="password" formControlName="password" />
    </igx-input-group>

    <button igxButton="contained" igxRipple type="submit">Submit</button>
</form>
```

テンプレート駆動のフォーム サンプルと同様に、`email` や `minlength` などの追加の検証がある場合、ディレクティブを使用して、検証が失敗した場合にエンド ユーザーに通知できます。

次の例は、`get` メソッドを介してコントロールにアクセスし、その状態を検査する方法を示しています。また、`FormGroup` の状態を調べて、送信ボタンを有効/無効にする方法も示しています。

```ts
public get email() {
    return this.registrationForm.get('email');
}

public get password() {
    return this.registrationForm.get('password');
}
```

```html
<form [formGroup]="registrationForm">
    ...
    <igx-input-group>
        <label igxLabel for="email">Email</label>
        <input igxInput name="email" type="email" formControlName="email" />
        <igx-hint *ngIf="email.errors?.email">Please enter a valid email</igx-hint>
    </igx-input-group>

    <igx-input-group>
        <label igxLabel for="password">Password</label>
        <input igxInput name="password" type="password" formControlName="password" />
        <igx-hint *ngIf="password.errors?.minlength">Password should be at least 8 characters</igx-hint>
    </igx-input-group>

    <button igxButton="contained" igxRipple type="submit" [disabled]="!registrationForm.valid">Submit</button>
</form>
```

上記の構成の結果は、次のサンプルで確認できます。テンプレート駆動のフォーム サンプルと同様に、および [`igx-suffix`](#prefix-および-suffix) ディレクティブを使用してパスワードの可視性を切り替える方法も示します。

### カスタム バリデータ

一部の入力フィールドではカスタム検証が必要な場合があり、これはカスタム バリデータを介して実現できます。値が無効な場合、バリデータは特定のエラー メッセージを表示するために使用できる一連のエラーを生成します。

以下は、入力されたメール アドレスに定義済みの値が含まれているかどうかを検証し、値が発生する場所に基づいてさまざまなエラーを生成する、単純なカスタム リアクティブ フォーム バリデータの例です。

```ts
public registrationForm: FormGroup<User>;

constructor(fb: FormBuilder) {
    this.registrationForm = fb.group({
        email: ['', {
            nonNullable: true,
            validators: [
                Validators.required,
                Validators.email,
                this.emailValidator('infragistics')
            ]
        }],
        ...
    });
}

private emailValidator(val: string): ValidatorFn {
    return (control: AbstractControl): ValidationErrors | null => {
        const value = control.value?.toLowerCase();
        const localPartRegex = new RegExp(`(?<=(${val})).*[@]`);
        const domainRegex = new RegExp(`(?<=[@])(?=.*(${val}))`);
        const returnObj: ValidatorErrors = {};

        if (value && localPartRegex.test(value)) {
            returnObj.localPart = true;
        }
        if (value && domainRegex.test(value)) {
            returnObj.domain = true;
        }

        return returnObj;
    }
}
```

### クロス フィールド検証

場合によっては、1 つのコントロールの検証が別のコントロールの値に依存することがあります。単一のカスタム バリデータで両方のコントロールを評価するには、共通の祖先コントロール (`FormGroup` など) で検証を実行する必要があります。バリデータは、`FormGroup` の `get` メソッドを呼び出して子コントロールを取得し、値を比較します。検証に失敗すると、`FormGroup` に対して一連のエラーを生成します。

これにより、フォームの状態のみが無効に設定されます。コントロールの状態を設定するには、[`setErrors`](https://angular.io/api/forms/AbstractControl#seterrors) メソッドを使用して、生成したエラーを手動で追加します。次に、検証が成功すると、[`setValue`](https://angular.io/api/forms/AbstractControl#setvalue) メソッドを使用してエラーを削除できます。このメソッドは、指定された値に対してコントロールの検証を再実行します。

以下の例は、[パスワード] に [メール アドレス] が含まれていてはならず、[パスワードの再入力] が [パスワード] と一致している必要があるクロスフィールドの検証を示しています。

```ts
private passwordValidator(): ValidatorFn {
    return (control: AbstractControl): ValidationErrors | null => {
        const email = control.get('email');
        const password = control.get('password');
        const repeatPassword = control.get('repeatPassword');
        const returnObj: ValidatorErrors = {};

        if (email.value
            && password.value
            && password.value.toLowerCase().includes(email.value)) {
            password.setErrors({ ...password.errors, containsEmail: true });
            returnObj.containsEmail = true;
        }

        if (password
            && repeatPassword
            && password.value !== repeatPassword.value) {
            repeatPassword.setErrors({ ...repeatPassword.errors, mismatch: true });
            returnObj.mismatch = true;
        }

        if (!returnObj.containsEmail && password.errors?.containsEmail) {
            password.setValue(password.value);
        }

        if (!returnObj.mismatch && repeatPassword.errors?.mismatch) {
            repeatPassword.setValue(repeatPassword.value);
        }

        return returnObj;
    }
}
```

カスタム バリデータを `FormGroup` に追加するには、フォームの作成時に 2 番目の引数として渡す必要があります。

```ts
public registrationForm: FormGroup<User>;

constructor(fb: FormBuilder) {
    this.registrationForm = fb.group({
        email: ['', {
            nonNullable: true,
            validators: [
                Validators.required,
                Validators.email,
                this.emailValidator('infragistics')
            ]
        }],
        ...
    },
    {
        validators: [this.passwordValidator()]
    });
}
```

以下のサンプルは、組み込みのバリデータを、前の例のカスタム `emailValidator` およびクロスフィールド `passwordValidator` と組み合わせて使用する方法を示しています。

## スタイル設定

### Input Group テーマのプロパティ マップ

プライマリ プロパティを変更すると、関連するすべての依存プロパティが自動的に更新されます。

<div class="theme-switcher-wrapper">

  
  <input type="radio" name="theme" id="material" defaultChecked />
  <label for="material" class="switch-label">Material</label>
  <input type="radio" name="theme" id="fluent" />
  <label for="fluent" class="switch-label">Fluent</label>
  <input type="radio" name="theme" id="bootstrap" />
  <label for="bootstrap" class="switch-label">Bootstrap</label>
  <input type="radio" name="theme" id="indigo" />
  <label for="indigo" class="switch-label">Indigo</label>

  <div class="tables">

    <div class="theme-table material">
        | プライマリ プロパティ | 依存プロパティ | 説明 |
| --- | --- | --- |
| **$box-background** | $box-background-hover | 入力ボックスのホバー背景 |
|  | $box-background-focus | 入力ボックスのフォーカス背景 |
|  | $box-disabled-background | 無効な背景 |
|  | $placeholder-color | プレースホルダー テキストの色 |
|  | $hover-placeholder-color | プレースホルダー テキストのホバー色 |
|  | $idle-text-color | デフォルトのテキストの色 |
|  | $filled-text-color | 入力済みの入力ボックスのテキストの色 |
|  | $filled-text-hover-color | ホバー時の入力済みの入力テキストの色 |
|  | $focused-text-color | フォーカス時の入力ボックスのテキストの色 |
|  | $idle-secondary-color | アイドル時のセカンダリ テキストの色 |
|  | $input-prefix-color | 入力ボックス内のプレフィックスのテキストの色 |
|  | $input-prefix-color--filled | 入力済みの入力ボックス内のプレフィックスのテキストの色 |
|  | $input-prefix-color--focused | フォーカス時の入力ボックス内のプレフィックスのテキストの色 |
|  | $input-suffix-color | 入力ボックス内のサフィックスのテキストの色 |
|  | $input-suffix-color--filled | 入力済みの入力ボックス内のサフィックスのテキストの色 |
|  | $input-suffix-color--focused | フォーカス時の入力ボックス内のサフィックスのテキストの色 |
|  | $disabled-placeholder-color | 無効な入力ボックスのプレースホルダーの色 |
|  | $disabled-text-color | 無効な入力ボックスのテキストの色 |
| **$idle-bottom-line-color** | $hover-bottom-line-color | 入力ボックスの下にある下線のホバー色 |
|  | $focused-bottom-line-color | フォーカス時の下線の色 |
|  | $focused-secondary-color | フォーカス時のラベルの色 |
|  | $border-color | Border タイプの入力グループのための境界線の色 |
|  | $focused-border-color | Border タイプの入力グループのフォーカス入力境界線の色 |
| **$border-color**| $hover-border-color | 入力ボックスの境界線のホバー色 |
|  | $focused-border-color | フォーカス時の入力ボックスの境界線の色 |
|  | $focused-secondary-color | フォーカス時のラベルの色 |
| **$input-prefix-background** | $input-prefix-color | 入力ボックス内のプレフィックスのテキストの色 |
|  | $input-prefix-background--filled | 入力済みの入力プレフィックスの背景の色 |
|  | $input-prefix-background--focused | フォーカス時の入力プレフィックスの背景の色 |
| **$input-suffix-background**| $input-suffix-color | 入力ボックス内のサフィックスのテキストの色 |
|  | $input-suffix-background--filled | 入力済みの入力サフィックスの背景の色 |
|  | $input-suffix-background--focused | フォーカス時の入力サフィックスの背景の色 |
| **$search-background** | $placeholder-color | 検索入力内のプレースホルダー テキストの色 |
|  | $hover-placeholder-color | プレースホルダー テキストのホバー色 |
|  | $idle-text-color | 検索入力のテキストの色 |
|  | $idle-secondary-color | アイドル時のセカンダリ テキストの色 |
|  | $filled-text-color | 入力済みの検索入力のテキストの色 |
|  | $filled-text-hover-color | 入力済みの検索入力のホバー時テキストの色 |
|  | $focused-text-color | フォーカス時の検索入力のテキストの色 |
|  | $input-prefix-color | 検索入力内のプレフィックスの色 |
|  | $input-suffix-color | 検索入力内のサフィックスの色 |
|  | $input-prefix-color--filled | 入力済みの検索入力内のプレフィックスの色 |
|  | $input-suffix-color--filled | 入力済みの検索入力内のサフィックスの色 |
|  | $input-prefix-color--focused | フォーカス時の検索入力内のプレフィックスの色 |
|  | $input-suffix-color--focused | フォーカス時の検索入力内のサフィックスの色 |
|  | $search-disabled-background | 無効な検索入力の背景 |
|  | $disabled-placeholder-color | 無効なプレースホルダーの色 |
|  | $disabled-text-color | 無効なテキストの色 |
    </div>

    <div class="theme-table fluent">
      | プライマリ プロパティ | 依存プロパティ | 説明 |
| --- | --- | --- |
| **$border-color** | $hover-border-color | 入力ボックスの境界線のホバー色 |
|  | $focused-border-color | フォーカス時の入力ボックスの境界線の色 |
|  | $focused-secondary-color | フォーカス時のラベルの色 |
|**$input-prefix-background** | $input-suffix-background | アイドル時の入力サフィックスの背景の色 |
|  | $input-prefix-color | 入力ボックス内のプレフィックスのテキストの色 |
|  | $input-prefix-color--filled | 入力済みの入力ボックス内のプレフィックスのテキストの色 |
| **$input-suffix-background** | $input-prefix-background | アイドル時の入力プレフィックスの背景の色 |
|  | $input-suffix-color | 入力ボックス内のサフィックスのテキストの色 |
|  | $input-suffix-color--filled | 入力済みの入力ボックス内のサフィックスのテキストの色 |
|**$search-background** | $placeholder-color | 検索入力内のプレースホルダー テキストの色 |
|  | $hover-placeholder-color | プレースホルダー テキストのホバー色 |
|  | $idle-secondary-color | アイドル時のセカンダリ テキストの色 |
|  | $idle-text-color | 検索入力のテキストの色 |
|  | $filled-text-color | 入力済みの検索入力のテキストの色 |
|  | $filled-text-hover-color | 入力済みの検索入力のホバー時テキストの色 |
|  | $focused-text-color | フォーカス時の検索入力のテキストの色 |
|  | $input-prefix-color | 検索入力内のプレフィックスの色 |
|  | $input-suffix-color | 検索入力内のサフィックスの色 |
|  | $input-prefix-color--filled | 入力済みの検索入力内のプレフィックスの色 |
|  | $input-suffix-color--filled | 入力済みの検索入力内のサフィックスの色 |
|  | $input-prefix-color--focused | フォーカス時の検索入力内のプレフィックスの色 |
|  | $input-suffix-color--focused | フォーカス時の検索入力内のサフィックスの色 |
|  | $search-disabled-background | 無効な検索入力の背景 |
|  | $disabled-placeholder-color | 無効なプレースホルダーの色 |
|  | $disabled-text-color | 無効なテキストの色 |
    </div>

    <div class="theme-table bootstrap">
      | プライマリ プロパティ | 依存プロパティ | 説明 |
| --- | --- | --- |
| **$border-color** | $focused-border-color | フォーカス時の入力ボックスの境界線の色 |
|  | $focused-secondary-color | フォーカス時のラベルの色 |
| **$input-prefix-background** | $input-suffix-background | アイドル時の入力サフィックスの背景の色 |
|  | $input-prefix-color | 入力ボックス内のプレフィックスのテキストの色 |
|  | $input-prefix-color--filled | 入力済みの入力ボックス内のプレフィックスのテキストの色 |
| **$input-suffix-background**| $input-prefix-background | アイドル時の入力プレフィックスの背景の色 |
|  | $input-suffix-color | 入力ボックス内のサフィックスのテキストの色 |
|  | $input-suffix-color--filled | 入力済みの入力ボックス内のサフィックスのテキストの色 |
| **$search-background** | $placeholder-color | 検索入力内のプレースホルダー テキストの色 |
|  | $hover-placeholder-color | プレースホルダー テキストのホバー色 |
|  | $idle-secondary-color | アイドル時のセカンダリ テキストの色 |
|  | $idle-text-color | 検索入力のテキストの色 |
|  | $filled-text-color | 入力済みの検索入力のテキストの色 |
|  | $filled-text-hover-color | 入力済みの検索入力のホバー時テキストの色 |
|  | $focused-text-color | フォーカス時の検索入力のテキストの色 |
|  | $input-prefix-color | 検索入力内のプレフィックスの色 |
|  | $input-suffix-color | 検索入力内のサフィックスの色 |
|  | $input-prefix-color--filled | 入力済みの検索入力内のプレフィックスの色 |
|  | $input-suffix-color--filled | 入力済みの検索入力内のサフィックスの色 |
|  | $input-prefix-color--focused | フォーカス時の検索入力内のプレフィックスの色 |
|  | $input-suffix-color--focused | フォーカス時の検索入力内のサフィックスの色 |
|  | $search-disabled-background | 無効な検索入力の背景 |
|  | $disabled-placeholder-color | 無効なプレースホルダーの色 |
|  | $disabled-text-color | 無効なテキストの色 |
    </div>

    <div class="theme-table indigo">
      | プライマリ プロパティ | 依存プロパティ | 説明 |
| --- | --- | --- |
| **$idle-bottom-line-color** | $hover-bottom-line-color | 入力ボックスの下にある下線のホバー色 |
|  | $focused-bottom-line-color | フォーカス時の下線の色 |
| **$border-color** | $hover-border-color | 入力ボックスの境界線のホバー色 |
|  | $focused-border-color | フォーカス時の入力ボックスの境界線の色 |
| **$input-prefix-background** | $input-prefix-color | 入力ボックス内のプレフィックスのテキストの色 |
|  | $input-prefix-background--filled | 入力済みの入力プレフィックスの背景の色 |
|  | $input-prefix-background--focused | フォーカス時の入力プレフィックスの背景の色 |
|**$input-suffix-background** | $input-suffix-color | 入力ボックス内のサフィックスのテキストの色 |
|  | $input-suffix-background--filled | 入力済みの入力サフィックスの背景の色 |
|  | $input-suffix-background--focused | フォーカス時の入力サフィックスの背景の色 |
| **$search-background** | $placeholder-color | 検索入力内のプレースホルダー テキストの色 |
|  | $hover-placeholder-color | プレースホルダー テキストのホバー色 |
|  | $box-background-hover | ホバー時の検索入力の背景 |
|  | $idle-text-color | 検索入力のテキストの色 |
|  | $filled-text-color | 入力済みの検索入力のテキストの色 |
|  | $filled-text-hover-color | 入力済みの検索入力のホバー時テキストの色 |
|  | $focused-text-color | フォーカス時の検索入力のテキストの色 |
|  | $input-prefix-color | 検索入力内のプレフィックスの色 |
|  | $input-suffix-color | 検索入力内のサフィックスの色 |
|  | $search-disabled-background | 無効な検索入力の背景 |
|  | $disabled-placeholder-color | 無効なプレースホルダーの色 |
|  | $disabled-text-color | 無効なテキストの色 |
    </div>
  </div>
</div>

        | Primary Property | Dependent Property | Description |
| --- | --- | --- |
| **$box-background** | $box-background-hover | Hover background for the input box |
|  | $box-background-focus | Focus background for the input box |
|  | $box-disabled-background | Disabled state background |
|  | $placeholder-color | Placeholder text color |
|  | $hover-placeholder-color | Hover color for placeholder text |
|  | $idle-text-color | Default text color |
|  | $filled-text-color | Text color when input is filled |
|  | $filled-text-hover-color | The input text color in the filled state on hover |
|  | $focused-text-color | Text color when input is focused |
|  | $idle-secondary-color | Secondary text color when idle |
|  | $input-prefix-color | Text color for prefix inside the input box |
|  | $input-prefix-color--filled | Text color for filled prefix |
|  | $input-prefix-color--focused | Text color for focused prefix |
|  | $input-suffix-color | Text color for suffix inside the input box |
|  | $input-suffix-color--filled | Text color for filled suffix |
|  | $input-suffix-color--focused | Text color for focused suffix |
|  | $disabled-placeholder-color | Placeholder color when input is disabled |
|  | $disabled-text-color | Text color when input is disabled |
| **$idle-bottom-line-color** | $hover-bottom-line-color | Hover color for the bottom line under the input |
|  | $focused-bottom-line-color | Focused color for the bottom line |
|  | $focused-secondary-color | The label color in the focused state |
|  | $border-color | The border color for input groups of type border |
|  | $focused-border-color | The focused input border color for input groups of type border |
| **$border-color**| $hover-border-color | Hover color for the input border |
|  | $focused-border-color | Border color when input is focused |
|  | $focused-secondary-color | The label color in the focused state |
| **$input-prefix-background** | $input-prefix-color | Text color for prefix inside the input box |
|  | $input-prefix-background--filled | The background color of an input prefix in the filled state |
|  | $input-prefix-background--focused | The background color of an input prefix in the focused state |
| **$input-suffix-background**| $input-suffix-color | Text color for suffix inside the input box |
|  | $input-suffix-background--filled | The background color of an input suffix in the filled state |
|  | $input-suffix-background--focused | The background color of an input suffix in the focused state |
| **$search-background** | $placeholder-color | Placeholder text color inside the search input |
|  | $hover-placeholder-color | Hover color for placeholder text |
|  | $idle-text-color | Text color for the search input |
|  | $idle-secondary-color | Secondary text color when idle |
|  | $filled-text-color | Text color when search input is filled |
|  | $filled-text-hover-color | Hover text color when search input is filled |
|  | $focused-text-color | Text color when search input is focused |
|  | $input-prefix-color | Prefix color inside search |
|  | $input-suffix-color | Suffix color inside search |
|  | $input-prefix-color--filled | Prefix color when input is filled |
|  | $input-suffix-color--filled | Suffix color when input is filled |
|  | $input-prefix-color--focused | Prefix color when input is focused |
|  | $input-suffix-color--focused | Suffix color when input is focused |
|  | $search-disabled-background | Background when search input is disabled |
|  | $disabled-placeholder-color | Placeholder color when disabled |
|  | $disabled-text-color | Text color when disabled |

入力グループのスタイル設定を開始するには、`index` ファイルをスタイルファイルに含めます。

      | Primary Property | Dependent Property | Description |
| --- | --- | --- |
| **$border-color** | $hover-border-color | Hover color for the input border |
|  | $focused-border-color | Border color when input is focused |
|  | $focused-secondary-color | The label color in the focused state |
|**$input-prefix-background** | $input-suffix-background | The background color of an input suffix in the idle state |
|  | $input-prefix-color | Text color for prefix inside the input box |
|  | $input-prefix-color--filled | Text color for filled prefix |
| **$input-suffix-background** | $input-prefix-background | The background color of an input prefix in the idle state |
|  | $input-suffix-color | Text color for suffix inside the input box |
|  | $input-suffix-color--filled | Text color for filled suffix |
|**$search-background** | $placeholder-color | Placeholder text color inside the search input |
|  | $hover-placeholder-color | Hover color for placeholder text |
|  | $idle-secondary-color | Secondary text color when idle |
|  | $idle-text-color | Text color for the search input |
|  | $filled-text-color | Text color when search input is filled |
|  | $filled-text-hover-color | Hover text color when search input is filled |
|  | $focused-text-color | Text color when search input is focused |
|  | $input-prefix-color | Prefix color inside search |
|  | $input-suffix-color | Suffix color inside search |
|  | $input-prefix-color--filled | Prefix color when input is filled |
|  | $input-suffix-color--filled | Suffix color when input is filled |
|  | $input-prefix-color--focused | Prefix color when input is focused |
|  | $input-suffix-color--focused | Suffix color when input is focused |
|  | $search-disabled-background | Background when search input is disabled |
|  | $disabled-placeholder-color | Placeholder color when disabled |
|  | $disabled-text-color | Text color when disabled |

入力グループの外観をカスタマイズするには、を拡張して新しいテーマを作成します。この方法では、変更したいパラメーターだけを上書きし、その他のスタイルはベース テーマが自動的に処理します。

      | Primary Property | Dependent Property | Description |
| --- | --- | --- |
| **$border-color** | $focused-border-color | Border color when input is focused |
|  | $focused-secondary-color | The label color in the focused state |
| **$input-prefix-background** | $input-suffix-background | The background color of an input suffix in the idle state |
|  | $input-prefix-color | Text color for prefix inside the input box |
|  | $input-prefix-color--filled | Text color for filled prefix |
| **$input-suffix-background**| $input-prefix-background | The background color of an input prefix in the idle state |
|  | $input-suffix-color | Text color for suffix inside the input box |
|  | $input-suffix-color--filled | Text color for filled suffix |
| **$search-background** | $placeholder-color | Placeholder text color inside the search input |
|  | $hover-placeholder-color | Hover color for placeholder text |
|  | $idle-secondary-color | Secondary text color when idle |
|  | $idle-text-color | Text color for the search input |
|  | $filled-text-color | Text color when search input is filled |
|  | $filled-text-hover-color | Hover text color when search input is filled |
|  | $focused-text-color | Text color when search input is focused |
|  | $input-prefix-color | Prefix color inside search |
|  | $input-suffix-color | Suffix color inside search |
|  | $input-prefix-color--filled | Prefix color when input is filled |
|  | $input-suffix-color--filled | Suffix color when input is filled |
|  | $input-prefix-color--focused | Prefix color when input is focused |
|  | $input-suffix-color--focused | Suffix color when input is focused |
|  | $search-disabled-background | Background when search input is disabled |
|  | $disabled-placeholder-color | Placeholder color when disabled |
|  | $disabled-text-color | Text color when disabled |

境界線や背景の色など、いくつかのコアパラメーターを指定するだけでも、一貫した状態ベースのスタイル (ホバー、フォーカスなど) が適用された、完全なスタイルの入力グループを作成できます。

      | Primary Property | Dependent Property | Description |
| --- | --- | --- |
| **$idle-bottom-line-color** | $hover-bottom-line-color | Hover color for the bottom line under the input |
|  | $focused-bottom-line-color | Focused color for the bottom line |
| **$border-color** | $hover-border-color | Hover color for the input border |
|  | $focused-border-color | Border color when input is focused |
| **$input-prefix-background** | $input-prefix-color | Text color for prefix inside the input box |
|  | $input-prefix-background--filled | The background color of an input prefix in the filled state |
|  | $input-prefix-background--focused | The background color of an input prefix in the focused state |
|**$input-suffix-background** | $input-suffix-color | Text color for suffix inside the input box |
|  | $input-suffix-background--filled | The background color of an input suffix in the filled state |
|  | $input-suffix-background--focused | The background color of an input suffix in the focused state |
| **$search-background** | $placeholder-color | Placeholder text color inside the search input |
|  | $hover-placeholder-color | Hover color for placeholder text |
|  | $box-background-hover | Hover background for search input |
|  | $idle-text-color | Text color for the search input |
|  | $filled-text-color | Text color when search input is filled |
|  | $filled-text-hover-color | Hover text color when search input is filled |
|  | $focused-text-color | Text color when search input is focused |
|  | $input-prefix-color | Prefix color inside search |
|  | $input-suffix-color | Suffix color inside search |
|  | $search-disabled-background | Background when search input is disabled |
|  | $disabled-placeholder-color | Placeholder color when disabled |
|  | $disabled-text-color | Text color when disabled |

例:

```scss
@use "igniteui-angular/theming" as *;

// 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
// @import '~igniteui-angular/lib/core/styles/themes/index';
```

最後に、新しく作成したテーマを含めます。

以下のサンプルでは、カスタマイズした CSS 変数を使用した入力グループが、[`Carbon`](https://carbondesignsystem.com/components/text-input/usage/#live-demo) デザイン システムの入力グループに視覚的に似たデザインを実現している様子を確認できます。

<DocsAside type="info" title="情報">
サンプルでは、[Indigo Light](themes/sass/schemas.md#predefined-schemas) スキーマを使用します。
</DocsAside>

```scss
$custom-input-group: input-group-theme(
    $box-background: #57a5cd,
    $border-color: #57a5cd,
);
```

<DocsAside type="info" title="情報">
ページ内に `box`、`border`、`line`、`search` といった複数のタイプの input-group が存在する場合は、特定のタイプごとにテーマ変数のスコープを設定するのが最適です。
</DocsAside>
<br />例:<br />
box スタイルの入力には `.igx-input-group--box` を使用します。
search 入力をターゲットにする場合は `.igx-input-group--search` を使用します。
このようにすることで、異なる入力タイプ間のスタイル競合を防げます。
たとえば、グローバルにダーク `$box-background` を設定すると、border や line 入力のボーダーが白になり、視認できなくなる可能性があります。

```scss
:host {
  @include tokens($custom-input-group);
}
```

In the sample below, you can see how using the input group with customized CSS variables allows you to create a design that visually resembles the one used in the [`Carbon`](https://carbondesignsystem.com/components/text-input/usage/#live-demo) design system.

<DocsAside type="info" title="情報">
The sample uses the [Indigo Light](/themes/sass/schemas#predefined-schemas) schema.
</DocsAside>

<DocsAside type="info" title="情報">
If your page includes multiple types of input groups — such as `box`, `border`, `line`, or `search` — it's best to scope your theme variables to the specific input group type.
</DocsAside>
<br/>For example:<br/>
Use `.igx-input-group--box` when styling box-style inputs.
Use `.igx-input-group--search` when targeting search inputs.
This helps prevent style conflicts between different input types.
For instance, setting a dark `$box-background` globally could cause the borders of border or line inputs to become invisible (usually appearing white).

<hr/>

### Tailwind によるスタイル設定

カスタム Tailwind ユーティリティ クラスを使用して input group をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。

グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します:

```scss
@import "tailwindcss";
...
@use 'igniteui-theming/tailwind/utilities/material.css';
```

ユーティリティ ファイルには、`light` テーマと `dark` テーマの両方のバリエーションが含まれています。

- `light-*` クラスはライト テーマ用です。
- `dark-*` クラスはダーク テーマ用です。
- プレフィックスの後にコンポーネント名を追加します (例: `light-input-group`、`dark-input-group`)。

これらのクラスを適用すると、動的なテーマの計算が可能になります。そこから、`任意のプロパティ`を使用して、生成された CSS 変数をオーバーライドできます。コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。

プロパティの完全なリストは、で確認できます。構文は次のとおりです:

```html
<article class="sample-column">
    <igx-input-group class="!light-input-group ![--box-background:#A3C7B2] ![--focused-secondary-color:#3A5444]" type="box">
        <igx-prefix>+359</igx-prefix>
        <label igxLabel for="phone">Phone</label>
        <input type="tel" igxInput name="phone" />
        <igx-suffix>
            <igx-icon>phone</igx-icon>
        </igx-suffix>
        <igx-hint position="start">Ex.: +359 888 123 456</igx-hint>
    </igx-input-group>

    <igx-input-group class="!light-input-group ![--border-color:#7B9E89]" type="border">
        ...
    </igx-input-group>

    <igx-input-group class="!light-input-group ![--search-background:#A3C7B2] ![--focused-secondary-color:#3A5444]" type="search">
        ...
    </igx-input-group>
</article>
```

<DocsAside type="info" title="情報">
ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。
</DocsAside>

最終的に、input group は次のようになります:

## API リファレンス

<hr/>

- - - IgxInputGroup タイプ
- - ## テーマの依存関係

- - ## その他のリソース

<hr/>

関連トピック:

- [Label および Input](label-input.md)
- [リアクティブ フォームの統合](angular-reactive-form-validation.md)

コミュニティに参加して新しいアイデアをご提案ください。

- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)