From 624f8244157a63b7317024ffc8e17e6d4f5c8e08 Mon Sep 17 00:00:00 2001
From: Laszlo Ilonka <laszlo.ilonka@icellmobilsoft.hu>
Date: Wed, 14 Oct 2026 10:41:57 +0200
Subject: [PATCH] feat(option): add samples

IDS-2327
---
 .../option-basic-example.component.html       | 14 ++++
 .../option-basic-example.component.ts         | 31 ++++++++
 .../option-disabled-example.component.html    | 50 ++++++++++++
 .../option-disabled-example.component.ts      | 35 ++++++++
 .../option/option-example.utils.ts            | 24 ++++++
 .../option/option-examples.ts                 | 79 +++++++++++++++++++
 .../option-groups-example.component.html      | 23 ++++++
 .../option-groups-example.component.ts        | 34 ++++++++
 .../option-multiselect-example.component.html | 15 ++++
 .../option-multiselect-example.component.ts   | 34 ++++++++
 .../option-view-value-example.component.html  | 22 ++++++
 .../option-view-value-example.component.ts    | 27 +++++++
 .../pages/option/option-demo.component.html   |  6 ++
 .../app/pages/option/option-demo.component.ts |  5 ++
 projects/demo/src/assets/i18n/en.json         | 49 ++++++++++++
 projects/demo/src/assets/i18n/hu.json         | 49 ++++++++++++
 16 files changed, 497 insertions(+)
 create mode 100644 projects/demo/src/app/components-example/option/option-basic-example/option-basic-example.component.html
 create mode 100644 projects/demo/src/app/components-example/option/option-basic-example/option-basic-example.component.ts
 create mode 100644 projects/demo/src/app/components-example/option/option-disabled-example/option-disabled-example.component.html
 create mode 100644 projects/demo/src/app/components-example/option/option-disabled-example/option-disabled-example.component.ts
 create mode 100644 projects/demo/src/app/components-example/option/option-example.utils.ts
 create mode 100644 projects/demo/src/app/components-example/option/option-examples.ts
 create mode 100644 projects/demo/src/app/components-example/option/option-groups-example/option-groups-example.component.html
 create mode 100644 projects/demo/src/app/components-example/option/option-groups-example/option-groups-example.component.ts
 create mode 100644 projects/demo/src/app/components-example/option/option-multiselect-example/option-multiselect-example.component.html
 create mode 100644 projects/demo/src/app/components-example/option/option-multiselect-example/option-multiselect-example.component.ts
 create mode 100644 projects/demo/src/app/components-example/option/option-view-value-example/option-view-value-example.component.html
 create mode 100644 projects/demo/src/app/components-example/option/option-view-value-example/option-view-value-example.component.ts

diff --git a/projects/demo/src/app/components-example/option/option-basic-example/option-basic-example.component.html b/projects/demo/src/app/components-example/option/option-basic-example/option-basic-example.component.html
new file mode 100644
index 00000000..06adc1cd
--- /dev/null
+++ b/projects/demo/src/app/components-example/option/option-basic-example/option-basic-example.component.html
@@ -0,0 +1,14 @@
+<ids-form-field class="w-80">
+  <ids-label>{{ "EXAMPLES.OPTION.COMMON.LABEL" | translate }}</ids-label>
+  <ids-select
+    [placeholder]="'EXAMPLES.OPTION.COMMON.PLACEHOLDER' | translate"
+    [(ngModel)]="_value"
+  >
+    @for (fruit of _fruits; track fruit.value) {
+      <ids-option [value]="fruit.value" [viewValue]="fruit.labelKey | translate">
+        {{ fruit.labelKey | translate }}
+      </ids-option>
+    }
+  </ids-select>
+  <ids-hint-message>{{ "EXAMPLES.OPTION.BASIC.CONTENT.HINT" | translate }}</ids-hint-message>
+</ids-form-field>
diff --git a/projects/demo/src/app/components-example/option/option-basic-example/option-basic-example.component.ts b/projects/demo/src/app/components-example/option/option-basic-example/option-basic-example.component.ts
new file mode 100644
index 00000000..02c1fd8a
--- /dev/null
+++ b/projects/demo/src/app/components-example/option/option-basic-example/option-basic-example.component.ts
@@ -0,0 +1,31 @@
+import { OPTION_EXAMPLE_FRUITS } from '../option-example.utils';
+
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import {
+  IdsFormFieldComponent,
+  IdsHintMessageComponent,
+  IdsLabelDirective,
+  IdsOptionComponent,
+} from '@i-cell/ids-angular/forms';
+import { IdsSelectComponent } from '@i-cell/ids-angular/select';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-option-basic-example',
+  imports: [
+    FormsModule,
+    IdsFormFieldComponent,
+    IdsHintMessageComponent,
+    IdsLabelDirective,
+    IdsOptionComponent,
+    IdsSelectComponent,
+    TranslateModule,
+  ],
+  templateUrl: './option-basic-example.component.html',
+})
+export class OptionBasicExampleComponent {
+  protected readonly _fruits = OPTION_EXAMPLE_FRUITS;
+
+  protected _value: string | null = null;
+}
diff --git a/projects/demo/src/app/components-example/option/option-disabled-example/option-disabled-example.component.html b/projects/demo/src/app/components-example/option/option-disabled-example/option-disabled-example.component.html
new file mode 100644
index 00000000..231e04b4
--- /dev/null
+++ b/projects/demo/src/app/components-example/option/option-disabled-example/option-disabled-example.component.html
@@ -0,0 +1,50 @@
+<div class="flex flex-col gap-ids-container-gap-16 w-80">
+  <div class="grid gap-2">
+    <span>{{ "EXAMPLES.OPTION.DISABLED.CONTENT.DISABLED_OPTION" | translate }}</span>
+    <ids-form-field>
+      <ids-label>{{ "EXAMPLES.OPTION.COMMON.ANIMAL_LABEL" | translate }}</ids-label>
+      <ids-select
+        [placeholder]="'EXAMPLES.OPTION.COMMON.ANIMAL_PLACEHOLDER' | translate"
+        [(ngModel)]="_disabledOptionValue"
+      >
+        @for (animal of _landAnimals; track animal.value) {
+          <ids-option
+            [value]="animal.value"
+            [viewValue]="animal.labelKey | translate"
+            [disabled]="animal.value === 'cat'"
+          >
+            {{ animal.labelKey | translate }}
+          </ids-option>
+        }
+      </ids-select>
+      <ids-hint-message>{{ "EXAMPLES.OPTION.DISABLED.CONTENT.DISABLED_OPTION_HINT" | translate }}</ids-hint-message>
+    </ids-form-field>
+  </div>
+
+  <div class="grid gap-2">
+    <span>{{ "EXAMPLES.OPTION.DISABLED.CONTENT.DISABLED_GROUP" | translate }}</span>
+    <ids-form-field>
+      <ids-label>{{ "EXAMPLES.OPTION.COMMON.ANIMAL_LABEL" | translate }}</ids-label>
+      <ids-select
+        [placeholder]="'EXAMPLES.OPTION.COMMON.ANIMAL_PLACEHOLDER' | translate"
+        [(ngModel)]="_disabledGroupValue"
+      >
+        <ids-option-group [label]="'EXAMPLES.OPTION.GROUPS.CONTENT.LAND' | translate" [disabled]="true">
+          @for (animal of _landAnimals; track animal.value) {
+            <ids-option [value]="animal.value" [viewValue]="animal.labelKey | translate">
+              {{ animal.labelKey | translate }}
+            </ids-option>
+          }
+        </ids-option-group>
+        <ids-option-group [label]="'EXAMPLES.OPTION.GROUPS.CONTENT.AQUATIC' | translate">
+          @for (animal of _aquaticAnimals; track animal.value) {
+            <ids-option [value]="animal.value" [viewValue]="animal.labelKey | translate">
+              {{ animal.labelKey | translate }}
+            </ids-option>
+          }
+        </ids-option-group>
+      </ids-select>
+      <ids-hint-message>{{ "EXAMPLES.OPTION.DISABLED.CONTENT.DISABLED_GROUP_HINT" | translate }}</ids-hint-message>
+    </ids-form-field>
+  </div>
+</div>
diff --git a/projects/demo/src/app/components-example/option/option-disabled-example/option-disabled-example.component.ts b/projects/demo/src/app/components-example/option/option-disabled-example/option-disabled-example.component.ts
new file mode 100644
index 00000000..d935df75
--- /dev/null
+++ b/projects/demo/src/app/components-example/option/option-disabled-example/option-disabled-example.component.ts
@@ -0,0 +1,35 @@
+import { OPTION_EXAMPLE_AQUATIC_ANIMALS, OPTION_EXAMPLE_LAND_ANIMALS } from '../option-example.utils';
+
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import {
+  IdsFormFieldComponent,
+  IdsHintMessageComponent,
+  IdsLabelDirective,
+  IdsOptionComponent,
+  IdsOptionGroupComponent,
+} from '@i-cell/ids-angular/forms';
+import { IdsSelectComponent } from '@i-cell/ids-angular/select';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-option-disabled-example',
+  imports: [
+    FormsModule,
+    IdsFormFieldComponent,
+    IdsHintMessageComponent,
+    IdsLabelDirective,
+    IdsOptionComponent,
+    IdsOptionGroupComponent,
+    IdsSelectComponent,
+    TranslateModule,
+  ],
+  templateUrl: './option-disabled-example.component.html',
+})
+export class OptionDisabledExampleComponent {
+  protected readonly _landAnimals = OPTION_EXAMPLE_LAND_ANIMALS;
+  protected readonly _aquaticAnimals = OPTION_EXAMPLE_AQUATIC_ANIMALS;
+
+  protected _disabledOptionValue: string | null = 'cat';
+  protected _disabledGroupValue: string | null = 'whale';
+}
diff --git a/projects/demo/src/app/components-example/option/option-example.utils.ts b/projects/demo/src/app/components-example/option/option-example.utils.ts
new file mode 100644
index 00000000..3c129029
--- /dev/null
+++ b/projects/demo/src/app/components-example/option/option-example.utils.ts
@@ -0,0 +1,24 @@
+export type OptionExampleEntry = {
+  value: string;
+  labelKey: string;
+};
+
+export const OPTION_EXAMPLE_FRUITS: OptionExampleEntry[] = [
+  { value: 'APPLE', labelKey: 'EXAMPLES.SELECT.FRUITS.APPLE' },
+  { value: 'BANANA', labelKey: 'EXAMPLES.SELECT.FRUITS.BANANA' },
+  { value: 'CHERRY', labelKey: 'EXAMPLES.SELECT.FRUITS.CHERRY' },
+  { value: 'GRAPE', labelKey: 'EXAMPLES.SELECT.FRUITS.GRAPE' },
+  { value: 'ORANGE', labelKey: 'EXAMPLES.SELECT.FRUITS.ORANGE' },
+];
+
+export const OPTION_EXAMPLE_LAND_ANIMALS: OptionExampleEntry[] = [
+  { value: 'dog', labelKey: 'SELECT.LAND.DOG' },
+  { value: 'cat', labelKey: 'SELECT.LAND.CAT' },
+  { value: 'giraffe', labelKey: 'SELECT.LAND.GIRAFFE' },
+];
+
+export const OPTION_EXAMPLE_AQUATIC_ANIMALS: OptionExampleEntry[] = [
+  { value: 'crocodile', labelKey: 'SELECT.AQUATIC.CROCODILE' },
+  { value: 'whale', labelKey: 'SELECT.AQUATIC.WHALE' },
+  { value: 'dolphin', labelKey: 'SELECT.AQUATIC.DOLPHIN' },
+];
diff --git a/projects/demo/src/app/components-example/option/option-examples.ts b/projects/demo/src/app/components-example/option/option-examples.ts
new file mode 100644
index 00000000..136f7b1c
--- /dev/null
+++ b/projects/demo/src/app/components-example/option/option-examples.ts
@@ -0,0 +1,79 @@
+import { OptionBasicExampleComponent } from './option-basic-example/option-basic-example.component';
+import { OptionDisabledExampleComponent } from './option-disabled-example/option-disabled-example.component';
+import { OptionGroupsExampleComponent } from './option-groups-example/option-groups-example.component';
+import { OptionMultiselectExampleComponent } from './option-multiselect-example/option-multiselect-example.component';
+import { OptionViewValueExampleComponent } from './option-view-value-example/option-view-value-example.component';
+
+import { IdsExampleDef } from '../../shared/ids-example-viewer/ids-example.model';
+
+const OPTION_EXAMPLE_UTILS = {
+  HTMLpath: '',
+  TSpath: 'assets/examples/option/option-example.utils.ts',
+};
+
+export const OPTION_EXAMPLES: IdsExampleDef[] = [
+  {
+    id: 'option-basic',
+    title: 'EXAMPLES.OPTION.BASIC.TITLE',
+    description: 'EXAMPLES.OPTION.BASIC.DESCRIPTION',
+    component: OptionBasicExampleComponent,
+    files: [
+      {
+        HTMLpath: 'assets/examples/option/option-basic-example/option-basic-example.component.html',
+        TSpath: 'assets/examples/option/option-basic-example/option-basic-example.component.ts',
+      },
+      OPTION_EXAMPLE_UTILS,
+    ],
+  },
+  {
+    id: 'option-view-value',
+    title: 'EXAMPLES.OPTION.VIEW_VALUE.TITLE',
+    description: 'EXAMPLES.OPTION.VIEW_VALUE.DESCRIPTION',
+    component: OptionViewValueExampleComponent,
+    files: [
+      {
+        HTMLpath: 'assets/examples/option/option-view-value-example/option-view-value-example.component.html',
+        TSpath: 'assets/examples/option/option-view-value-example/option-view-value-example.component.ts',
+      },
+    ],
+  },
+  {
+    id: 'option-groups',
+    title: 'EXAMPLES.OPTION.GROUPS.TITLE',
+    description: 'EXAMPLES.OPTION.GROUPS.DESCRIPTION',
+    component: OptionGroupsExampleComponent,
+    files: [
+      {
+        HTMLpath: 'assets/examples/option/option-groups-example/option-groups-example.component.html',
+        TSpath: 'assets/examples/option/option-groups-example/option-groups-example.component.ts',
+      },
+      OPTION_EXAMPLE_UTILS,
+    ],
+  },
+  {
+    id: 'option-disabled',
+    title: 'EXAMPLES.OPTION.DISABLED.TITLE',
+    description: 'EXAMPLES.OPTION.DISABLED.DESCRIPTION',
+    component: OptionDisabledExampleComponent,
+    files: [
+      {
+        HTMLpath: 'assets/examples/option/option-disabled-example/option-disabled-example.component.html',
+        TSpath: 'assets/examples/option/option-disabled-example/option-disabled-example.component.ts',
+      },
+      OPTION_EXAMPLE_UTILS,
+    ],
+  },
+  {
+    id: 'option-multiselect',
+    title: 'EXAMPLES.OPTION.MULTISELECT.TITLE',
+    description: 'EXAMPLES.OPTION.MULTISELECT.DESCRIPTION',
+    component: OptionMultiselectExampleComponent,
+    files: [
+      {
+        HTMLpath: 'assets/examples/option/option-multiselect-example/option-multiselect-example.component.html',
+        TSpath: 'assets/examples/option/option-multiselect-example/option-multiselect-example.component.ts',
+      },
+      OPTION_EXAMPLE_UTILS,
+    ],
+  },
+];
diff --git a/projects/demo/src/app/components-example/option/option-groups-example/option-groups-example.component.html b/projects/demo/src/app/components-example/option/option-groups-example/option-groups-example.component.html
new file mode 100644
index 00000000..4dd3e926
--- /dev/null
+++ b/projects/demo/src/app/components-example/option/option-groups-example/option-groups-example.component.html
@@ -0,0 +1,23 @@
+<ids-form-field class="w-80">
+  <ids-label>{{ "EXAMPLES.OPTION.COMMON.ANIMAL_LABEL" | translate }}</ids-label>
+  <ids-select
+    [placeholder]="'EXAMPLES.OPTION.COMMON.ANIMAL_PLACEHOLDER' | translate"
+    [(ngModel)]="_value"
+  >
+    <ids-option-group [label]="'EXAMPLES.OPTION.GROUPS.CONTENT.LAND' | translate">
+      @for (animal of _landAnimals; track animal.value) {
+        <ids-option [value]=" animal.value" [viewValue]="animal.labelKey | translate">
+          {{ animal.labelKey | translate }}
+        </ids-option>
+      }
+    </ids-option-group>
+    <ids-option-group [label]="'EXAMPLES.OPTION.GROUPS.CONTENT.AQUATIC' | translate">
+      @for (animal of _aquaticAnimals; track animal.value) {
+        <ids-option [value]="animal.value" [viewValue]="animal.labelKey | translate">
+          {{ animal.labelKey | translate }}
+        </ids-option>
+      }
+    </ids-option-group>
+  </ids-select>
+  <ids-hint-message>{{ "EXAMPLES.OPTION.GROUPS.CONTENT.HINT" | translate }}</ids-hint-message>
+</ids-form-field>
diff --git a/projects/demo/src/app/components-example/option/option-groups-example/option-groups-example.component.ts b/projects/demo/src/app/components-example/option/option-groups-example/option-groups-example.component.ts
new file mode 100644
index 00000000..4719890e
--- /dev/null
+++ b/projects/demo/src/app/components-example/option/option-groups-example/option-groups-example.component.ts
@@ -0,0 +1,34 @@
+import { OPTION_EXAMPLE_AQUATIC_ANIMALS, OPTION_EXAMPLE_LAND_ANIMALS } from '../option-example.utils';
+
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import {
+  IdsFormFieldComponent,
+  IdsHintMessageComponent,
+  IdsLabelDirective,
+  IdsOptionComponent,
+  IdsOptionGroupComponent,
+} from '@i-cell/ids-angular/forms';
+import { IdsSelectComponent } from '@i-cell/ids-angular/select';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-option-groups-example',
+  imports: [
+    FormsModule,
+    IdsFormFieldComponent,
+    IdsHintMessageComponent,
+    IdsLabelDirective,
+    IdsOptionComponent,
+    IdsOptionGroupComponent,
+    IdsSelectComponent,
+    TranslateModule,
+  ],
+  templateUrl: './option-groups-example.component.html',
+})
+export class OptionGroupsExampleComponent {
+  protected readonly _landAnimals = OPTION_EXAMPLE_LAND_ANIMALS;
+  protected readonly _aquaticAnimals = OPTION_EXAMPLE_AQUATIC_ANIMALS;
+
+  protected _value: string | null = null;
+}
diff --git a/projects/demo/src/app/components-example/option/option-multiselect-example/option-multiselect-example.component.html b/projects/demo/src/app/components-example/option/option-multiselect-example/option-multiselect-example.component.html
new file mode 100644
index 00000000..8eea9b5b
--- /dev/null
+++ b/projects/demo/src/app/components-example/option/option-multiselect-example/option-multiselect-example.component.html
@@ -0,0 +1,15 @@
+<ids-form-field class="w-80">
+  <ids-label>{{ "EXAMPLES.OPTION.COMMON.LABEL" | translate }}</ids-label>
+  <ids-select
+    [multiSelect]="true"
+    [placeholder]="'EXAMPLES.OPTION.COMMON.PLACEHOLDER' | translate"
+    [(ngModel)]="_value"
+  >
+    @for (fruit of _fruits; track fruit.value) {
+      <ids-option [value]="fruit.value" [viewValue]="fruit.labelKey | translate">
+        {{ fruit.labelKey | translate }}
+      </ids-option>
+    }
+  </ids-select>
+  <ids-hint-message>{{ "EXAMPLES.OPTION.MULTISELECT.CONTENT.HINT" | translate }}</ids-hint-message>
+</ids-form-field>
diff --git a/projects/demo/src/app/components-example/option/option-multiselect-example/option-multiselect-example.component.ts b/projects/demo/src/app/components-example/option/option-multiselect-example/option-multiselect-example.component.ts
new file mode 100644
index 00000000..a70ea906
--- /dev/null
+++ b/projects/demo/src/app/components-example/option/option-multiselect-example/option-multiselect-example.component.ts
@@ -0,0 +1,34 @@
+import { OPTION_EXAMPLE_FRUITS } from '../option-example.utils';
+
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import {
+  IdsFormFieldComponent,
+  IdsHintMessageComponent,
+  IdsLabelDirective,
+  IdsOptionComponent,
+} from '@i-cell/ids-angular/forms';
+import { IdsSelectComponent } from '@i-cell/ids-angular/select';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-option-multiselect-example',
+  imports: [
+    FormsModule,
+    IdsFormFieldComponent,
+    IdsHintMessageComponent,
+    IdsLabelDirective,
+    IdsOptionComponent,
+    IdsSelectComponent,
+    TranslateModule,
+  ],
+  templateUrl: './option-multiselect-example.component.html',
+})
+export class OptionMultiselectExampleComponent {
+  protected readonly _fruits = OPTION_EXAMPLE_FRUITS;
+
+  protected _value: string[] = [
+    'APPLE',
+    'CHERRY',
+  ];
+}
diff --git a/projects/demo/src/app/components-example/option/option-view-value-example/option-view-value-example.component.html b/projects/demo/src/app/components-example/option/option-view-value-example/option-view-value-example.component.html
new file mode 100644
index 00000000..78fc45bd
--- /dev/null
+++ b/projects/demo/src/app/components-example/option/option-view-value-example/option-view-value-example.component.html
@@ -0,0 +1,22 @@
+<ids-form-field class="w-80">
+  <ids-label>{{ "EXAMPLES.OPTION.COMMON.LABEL" | translate }}</ids-label>
+  <ids-select
+    [placeholder]="'EXAMPLES.OPTION.COMMON.PLACEHOLDER' | translate"
+    [(ngModel)]="_value"
+  >
+    <ids-option
+      value="BANANA"
+      [viewValue]="'EXAMPLES.SELECT.FRUITS.BANANA' | translate"
+    >
+      <span class="font-medium">{{ "EXAMPLES.SELECT.FRUITS.BANANA" | translate }}</span>
+      <span class="block text-sm opacity-70">{{ "EXAMPLES.OPTION.VIEW_VALUE.CONTENT.BANANA_DETAIL" | translate }}</span>
+    </ids-option>
+    <ids-option value="CHERRY" [viewValue]="'EXAMPLES.SELECT.FRUITS.CHERRY' | translate">
+      {{ "EXAMPLES.SELECT.FRUITS.CHERRY" | translate }}
+    </ids-option>
+    <ids-option value="GRAPE" [viewValue]="'EXAMPLES.SELECT.FRUITS.GRAPE' | translate">
+      {{ "EXAMPLES.SELECT.FRUITS.GRAPE" | translate }}
+    </ids-option>
+  </ids-select>
+  <ids-hint-message>{{ "EXAMPLES.OPTION.VIEW_VALUE.CONTENT.HINT" | translate }}</ids-hint-message>
+</ids-form-field>
diff --git a/projects/demo/src/app/components-example/option/option-view-value-example/option-view-value-example.component.ts b/projects/demo/src/app/components-example/option/option-view-value-example/option-view-value-example.component.ts
new file mode 100644
index 00000000..04a709c2
--- /dev/null
+++ b/projects/demo/src/app/components-example/option/option-view-value-example/option-view-value-example.component.ts
@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import {
+  IdsFormFieldComponent,
+  IdsHintMessageComponent,
+  IdsLabelDirective,
+  IdsOptionComponent,
+} from '@i-cell/ids-angular/forms';
+import { IdsSelectComponent } from '@i-cell/ids-angular/select';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-option-view-value-example',
+  imports: [
+    FormsModule,
+    IdsFormFieldComponent,
+    IdsHintMessageComponent,
+    IdsLabelDirective,
+    IdsOptionComponent,
+    IdsSelectComponent,
+    TranslateModule,
+  ],
+  templateUrl: './option-view-value-example.component.html',
+})
+export class OptionViewValueExampleComponent {
+  protected _value: string | null = 'BANANA';
+}
diff --git a/projects/demo/src/app/pages/option/option-demo.component.html b/projects/demo/src/app/pages/option/option-demo.component.html
index a3f62b81..4bf50a2a 100644
--- a/projects/demo/src/app/pages/option/option-demo.component.html
+++ b/projects/demo/src/app/pages/option/option-demo.component.html
@@ -87,3 +87,9 @@ <h2>Multi selection</h2>
     </app-tryout-controls>
   </div>
 </app-demo-and-code>
+
+<div examples class="flex flex-col gap-6 w-full pt-6 pb-2">
+  @for (example of optionExamples; track example.id) {
+    <ids-example-viewer [example]="example" />
+  }
+</div>
diff --git a/projects/demo/src/app/pages/option/option-demo.component.ts b/projects/demo/src/app/pages/option/option-demo.component.ts
index 46f16249..cb94a19c 100644
--- a/projects/demo/src/app/pages/option/option-demo.component.ts
+++ b/projects/demo/src/app/pages/option/option-demo.component.ts
@@ -4,6 +4,8 @@ import { ControlTableComponent } from '../../components/control-table/control-ta
 import { DemoAndCodeComponent } from '../../components/tabs/demo-and-code/demo-and-code.component';
 import { TryoutControlComponent } from '../../components/tryout/tryout-controls.component';
 import { TryoutComponent } from '../../components/tryout/tryout.component';
+import { OPTION_EXAMPLES } from '../../components-example/option/option-examples';
+import { IdsExampleViewerComponent } from '../../shared/ids-example-viewer/ids-example-viewer.component';
 
 import { Component, inject } from '@angular/core';
 import { FormsModule } from '@angular/forms';
@@ -35,6 +37,7 @@ import { TranslateModule } from '@ngx-translate/core';
     DemoAndCodeComponent,
     TryoutControlComponent,
     ControlTableComponent,
+    IdsExampleViewerComponent,
   ],
   templateUrl: './option-demo.component.html',
   styleUrls: ['./option-demo.component.scss'],
@@ -43,6 +46,8 @@ import { TranslateModule } from '@ngx-translate/core';
 export class OptionDemoComponent {
   protected _optionDemoService = inject(OptionDemoService);
 
+  public readonly optionExamples = OPTION_EXAMPLES;
+
   public onSelectionChange(event: unknown): void {
     console.info('Option selected:', event);
   }
diff --git a/projects/demo/src/assets/i18n/en.json b/projects/demo/src/assets/i18n/en.json
index c9775d35..f6598297 100644
--- a/projects/demo/src/assets/i18n/en.json
+++ b/projects/demo/src/assets/i18n/en.json
@@ -1206,6 +1206,55 @@
         }
       }
     },
+    "OPTION": {
+      "COMMON": {
+        "LABEL": "Fruit",
+        "PLACEHOLDER": "Select a fruit",
+        "ANIMAL_LABEL": "Animal",
+        "ANIMAL_PLACEHOLDER": "Select an animal"
+      },
+      "BASIC": {
+        "TITLE": "Basic options",
+        "DESCRIPTION": "Project ids-option elements inside ids-select (or another option parent). Set value for the model and use projected content or viewValue for the label.",
+        "CONTENT": {
+          "HINT": "Open the list to see each ids-option in the panel."
+        }
+      },
+      "VIEW_VALUE": {
+        "TITLE": "Option viewValue",
+        "DESCRIPTION": "Use viewValue when the closed select should show different text than the rich content inside the option panel.",
+        "CONTENT": {
+          "BANANA_DETAIL": "Rich description shown only in the panel",
+          "HINT": "The trigger shows the short viewValue; the panel can show extra detail."
+        }
+      },
+      "GROUPS": {
+        "TITLE": "Option groups",
+        "DESCRIPTION": "Wrap related options in ids-option-group and set label for the group heading.",
+        "CONTENT": {
+          "LAND": "Land",
+          "AQUATIC": "Aquatic",
+          "HINT": "Groups organize long option lists and improve screen reader navigation."
+        }
+      },
+      "DISABLED": {
+        "TITLE": "Disabled options and groups",
+        "DESCRIPTION": "Disable individual options with disabled on ids-option, or every option in a group with disabled on ids-option-group.",
+        "CONTENT": {
+          "DISABLED_OPTION": "Disabled option",
+          "DISABLED_OPTION_HINT": "Cat cannot be selected; other land animals remain available.",
+          "DISABLED_GROUP": "Disabled group",
+          "DISABLED_GROUP_HINT": "The Land group is disabled; Aquatic options are still selectable."
+        }
+      },
+      "MULTISELECT": {
+        "TITLE": "Options in multiselect",
+        "DESCRIPTION": "When the parent select uses multiSelect, each ids-option shows a pseudo-checkbox and a check icon when selected.",
+        "CONTENT": {
+          "HINT": "Selected options show checkboxes in the panel and chips in the trigger."
+        }
+      }
+    },
     "ICON": {
       "VARIANTS": {
         "TITLE": "Icon variants",
diff --git a/projects/demo/src/assets/i18n/hu.json b/projects/demo/src/assets/i18n/hu.json
index e9ed9e4f..00d4b111 100644
--- a/projects/demo/src/assets/i18n/hu.json
+++ b/projects/demo/src/assets/i18n/hu.json
@@ -1202,6 +1202,55 @@
         }
       }
     },
+    "OPTION": {
+      "COMMON": {
+        "LABEL": "Gyümölcs",
+        "PLACEHOLDER": "Válassz gyümölcsöt",
+        "ANIMAL_LABEL": "Állat",
+        "ANIMAL_PLACEHOLDER": "Válassz állatot"
+      },
+      "BASIC": {
+        "TITLE": "Alap opciók",
+        "DESCRIPTION": "Az ids-option elemeket ids-select (vagy más option szülő) belsejébe helyezd. A value a modell értéke; a felirathoz használj befoglalt tartalmat vagy viewValue-t.",
+        "CONTENT": {
+          "HINT": "Nyisd meg a listát az ids-option elemek megtekintéséhez."
+        }
+      },
+      "VIEW_VALUE": {
+        "TITLE": "Option viewValue",
+        "DESCRIPTION": "A viewValue akkor kell, ha a zárt select rövidebb szöveget mutasson, mint a panelben megjelenő tartalom.",
+        "CONTENT": {
+          "BANANA_DETAIL": "Részletes leírás, csak a panelben látszik",
+          "HINT": "A trigger a rövid viewValue-t mutatja; a panelben lehet extra részlet."
+        }
+      },
+      "GROUPS": {
+        "TITLE": "Option csoportok",
+        "DESCRIPTION": "Kapcsolódó opciókat ids-option-group-ba csomagolj, és adj meg label feliratot a csoportnak.",
+        "CONTENT": {
+          "LAND": "Szárazföldi",
+          "AQUATIC": "Vízi",
+          "HINT": "A csoportok rendezik a hosszú listákat és javítják a képernyőolvasós navigációt."
+        }
+      },
+      "DISABLED": {
+        "TITLE": "Letiltott opciók és csoportok",
+        "DESCRIPTION": "Egy opciót az ids-option disabled tulajdonságával, egy csoport összes elemét az ids-option-group disabled értékével tilthatod le.",
+        "CONTENT": {
+          "DISABLED_OPTION": "Letiltott opció",
+          "DISABLED_OPTION_HINT": "A macska nem választható; a többi szárazföldi állat elérhető.",
+          "DISABLED_GROUP": "Letiltott csoport",
+          "DISABLED_GROUP_HINT": "A szárazföldi csoport le van tiltva; a vízi opciók továbbra is választhatók."
+        }
+      },
+      "MULTISELECT": {
+        "TITLE": "Opciók multiselectben",
+        "DESCRIPTION": "Ha a szülő select multiSelect módban van, minden ids-option pszeudo-jelölőnégyzetet kap, kijelöléskor pedig pipa ikont.",
+        "CONTENT": {
+          "HINT": "A kijelölt opciók jelölőnégyzetet mutatnak a panelben, chipet a triggerben."
+        }
+      }
+    },
     "ICON": {
       "VARIANTS": {
         "TITLE": "Icon változatai",