diff --git a/projects/ng-select2-component/src/lib/select2-utils.ts b/projects/ng-select2-component/src/lib/select2-utils.ts
index d52ecc8..f6b4be9 100644
--- a/projects/ng-select2-component/src/lib/select2-utils.ts
+++ b/projects/ng-select2-component/src/lib/select2-utils.ts
@@ -40,20 +40,20 @@ export class Select2Utils {
         return Select2Utils.getOptionByValue(data, value as Select2Value);
     }
 
-    static getFirstAvailableOption(data: Select2Data) {
+    static getFirstAvailableOption(data: Select2Data): Select2Option | null {
         if (Array.isArray(data)) {
             for (const groupOrOption of data) {
                 const options = (groupOrOption as Select2Group).options;
                 if (options) {
                     for (const option of options) {
                         if (!option.disabled) {
-                            return option.value;
+                            return option;
                         }
                     }
                 } else {
                     const option = groupOrOption as Select2Option;
                     if (!option.disabled) {
-                        return option.value;
+                        return option;
                     }
                 }
             }
@@ -61,30 +61,23 @@ export class Select2Utils {
         return null;
     }
 
-    static valueIsNotInFilteredData(filteredData: Select2Data, value: Select2Value) {
-        if (Select2Utils.isNullOrUndefined(value)) {
+    static optionIsNotInFilteredData(filteredData: Select2Data, option: Select2Option | null): boolean {
+        if (Select2Utils.isNullOrUndefined(option)) {
             return true;
         }
         for (const groupOrOption of filteredData) {
             const options = (groupOrOption as Select2Group).options;
-            if (options) {
-                for (const option of options) {
-                    if (option.value === value) {
-                        return false;
-                    }
-                }
-            } else if ((groupOrOption as Select2Option).value === value) {
+            if (options && options.includes(option)) {
+                return false;
+            } else if (groupOrOption === option) {
                 return false;
             }
         }
         return true;
     }
 
-    static getPreviousOption(
-        filteredData: Select2Data ,
-        hoveringValue: Select2Value ,
-    ): Select2Option | null {
-        let findIt = Select2Utils.isNullOrUndefined(hoveringValue);
+    static getPreviousOption(filteredData: Select2Data, hoveringOption: Select2Option | null): Select2Option | null {
+        let findIt = Select2Utils.isNullOrUndefined(hoveringOption);
         for (let i = filteredData.length - 1; i >= 0; i--) {
             const groupOrOption = filteredData[i];
             const options = (groupOrOption as Select2Group).options;
@@ -95,7 +88,7 @@ export class Select2Utils {
                         return option;
                     }
                     if (!findIt) {
-                        findIt = option.value === hoveringValue;
+                        findIt = option === hoveringOption;
                     }
                 }
             } else {
@@ -104,15 +97,15 @@ export class Select2Utils {
                     return option;
                 }
                 if (!findIt) {
-                    findIt = option.value === hoveringValue;
+                    findIt = option === hoveringOption;
                 }
             }
         }
         return null;
     }
 
-    static getNextOption(filteredData: Select2Data | null, hoveringValue: Select2Value) {
-        let findIt = Select2Utils.isNullOrUndefined(hoveringValue);
+    static getNextOption(filteredData: Select2Data | null, hoveringOption: Select2Option | null): Select2Option | null {
+        let findIt = Select2Utils.isNullOrUndefined(hoveringOption);
         if (filteredData) {
             for (const groupOrOption of filteredData) {
                 const options = (groupOrOption as Select2Group).options;
@@ -123,7 +116,7 @@ export class Select2Utils {
                                 return option;
                             }
                         } else if (!findIt) {
-                            findIt = option.value === hoveringValue;
+                            findIt = option === hoveringOption;
                         }
                     }
                 } else {
@@ -133,7 +126,7 @@ export class Select2Utils {
                             return option;
                         }
                     } else if (!findIt) {
-                        findIt = option.value === hoveringValue;
+                        findIt = option === hoveringOption;
                     }
                 }
             }
@@ -141,6 +134,35 @@ export class Select2Utils {
         return null;
     }
 
+    static getFirstOption(filteredData: Select2Data): Select2Option | null {
+        const firstElement = filteredData[0];
+        if (this.isOption(firstElement)) {
+            return firstElement ?? null;
+        } else {
+            return firstElement.options[0] ?? null;
+        }
+    }
+
+    static getLastOption(filteredData: Select2Data): Select2Option | null {
+        const lastElement = filteredData.at(-1);
+        if (!lastElement) {
+            return null;
+        }
+        if (this.isOption(lastElement)) {
+            return lastElement;
+        } else {
+            return lastElement.options.at(-1) ?? null;
+        }
+    }
+
+    static isGroup(element: Select2Group | Select2Option): element is Select2Group {
+        return !!(element as Select2Group).options;
+    }
+
+    static isOption(element: Select2Group | Select2Option): element is Select2Option {
+        return !this.isGroup(element);
+    }
+
     static getReduceData(data: Select2Data, maxResults = 0): { result: Select2Data; reduce: boolean } {
         if (maxResults > 0) {
             let counter = 0;
@@ -271,7 +293,7 @@ export class Select2Utils {
         return count;
     }
 
-    private static isNullOrUndefined(value: any) {
+    private static isNullOrUndefined(value: any): value is null | undefined {
         return value === null || value === undefined;
     }
 
diff --git a/projects/ng-select2-component/src/lib/select2.component.html b/projects/ng-select2-component/src/lib/select2.component.html
index 4c416fd..75f0778 100644
--- a/projects/ng-select2-component/src/lib/select2.component.html
+++ b/projects/ng-select2-component/src/lib/select2.component.html
@@ -1,9 +1,9 @@
-<div class="select2-label" (click)="toggleOpenAndClose()">
+<label class="select2-label" (click)="toggleOpenAndClose()" [id]="idLabel()">
   <ng-content select="select2-label"></ng-content>
   @if (required()) {
-    <span class="select2-required"></span>
+    <span class="select2-required" aria-hidden="true"></span>
   }
-</div>
+</label>
 
 <div
   class="select2 select2-container select2-container--default"
@@ -12,15 +12,29 @@
   [class.select2-container--above]="select2above"
   [class.select2-container--open]="isOpen"
   [class.select2-container--disabled]="disabled()"
+  [class.select2-container--readonly]="readonly()"
 >
   <div
+    [id]="idCombo()"
+    role="combobox"
     class="selection"
     #selection
     #trigger="cdkOverlayOrigin"
     [tabindex]="!this.isOpen ? _tabIndex : '-1'"
+    [attr.aria-labelledby]="ariaLabelledby() ?? idLabel()"
+    [attr.aria-expanded]="isOpen"
+    aria-haspopup="listbox"
+    [attr.aria-controls]="idOptions()"
+    [attr.aria-activedescendant]="isOpen ? hoveringOptionId() : null"
+    [attr.aria-describedby]="ariaDescribedby()"
+    [attr.title]="title()"
+    [attr.aria-invalid]="_isErrorState() || ariaInvalid() ? 'true' : null"
+    [attr.aria-required]="required() ? 'true' : null"
+    [attr.aria-readonly]="readonly() ? 'true' : null"
+    [attr.aria-disabled]="disabled() ? 'true' : null"
     (click)="toggleOpenAndClose(); $event.stopPropagation()"
     (focus)="focusin()"
-    (blur)="focusout()"
+    (focusout)="focusout($event)"
     (keydown)="openKey($event)"
     cdkOverlayOrigin
     [class.select2-focused]="focused"
@@ -29,18 +43,15 @@
       class="select2-selection"
       [class.select2-selection--multiple]="multiple()"
       [class.select2-selection--single]="!multiple()"
-      role="combobox"
     >
       @if (selectionOverride()) {
         <span class="select2-selection__override" [innerHTML]="_selectionOverrideLabel()"></span>
 
-        @if (resettable() && resetSelectedValue() !== _value && select2Option && !(disabled() || readonly())) {
-          <span (click)="reset($event)" class="select2-selection__reset" role="presentation">×</span>
-        }
         @if (
-          !multiple() && resettable() && resetSelectedValue() !== _value && select2Option && !(disabled || readonly())
+            resettable() && !(disabled() || readonly()) && resetSelectedValue() !== _value &&
+            ((!multiple() && select2Option) || (multiple() && select2Options.length > 0))
         ) {
-          <span (click)="reset($event)" class="select2-selection__reset" role="presentation">×</span>
+          <ng-container *ngTemplateOutlet="resetButton"></ng-container>
         }
       } @else if (!multiple()) {
         <span class="select2-selection__rendered" [title]="select2Option?.label || ''">
@@ -62,14 +73,14 @@
         </span>
 
         @if (resettable() && resetSelectedValue() !== _value && select2Option && !(disabled() || readonly())) {
-          <span (click)="reset($event)" class="select2-selection__reset" role="presentation">×</span>
+            <ng-container *ngTemplateOutlet="resetButton"></ng-container>
         }
         <span class="select2-selection__arrow" role="presentation"> </span>
       } @else {
         <ul class="select2-selection__rendered">
           @if (!autoCreate()) {
             <span
-              [class.select2-selection__placeholder__option]="select2Options && select2Options.length > 0"
+              [class.select2-selection__placeholder__option]="select2Options.length > 0"
               class="select2-selection__placeholder"
               >{{ placeholder() }}</span
             >
@@ -79,6 +90,7 @@
               class="select2-selection__choice"
               [title]="op.label"
               tabindex="0"
+              (focus)="_updateFocusState(true)"
               (keydown.enter)="removeSelection($event, op)"
             >
               @if (!(disabled() || readonly())) {
@@ -86,6 +98,7 @@
                   (click)="removeSelection($event, op)"
                   class="select2-selection__choice__remove"
                   role="presentation"
+                  aria-hidden="true"
                   >×</span
                 >
               }
@@ -99,7 +112,7 @@
           @if (autoCreate()) {
             <li class="select2-selection__auto-create" (focus)="stopEvent($event)" (blur)="stopEvent($event)">
               <input
-                [id]="_id + '-create-field'"
+                [id]="id() + '-create-field'"
                 (click)="toggleOpenAndClose(false, true); stopEvent($event)"
                 (keydown)="keyDown($event, true)"
                 (keyup)="searchUpdate($event)"
@@ -143,6 +156,7 @@
 
 <ng-template #containerTemplate>
   <div
+    [id]="idOverlay()"
     class="select2-container select2-container--default select2-container-dropdown"
     [class.select2-container--open]="isOpen"
     [class.select2-overlay]="overlay()"
@@ -155,40 +169,49 @@
       [class.select2-dropdown--below]="!select2above"
       [class.select2-dropdown--above]="select2above"
     >
-      <div class="select2-search select2-search--dropdown" [class.select2-search--hide]="hideSearch()">
+      <div class="select2-search select2-search--dropdown" [class.select2-search--hide]="isSearchboxHidden">
         <input
           #searchInput
-          [id]="_id + '-search-field'"
+          [id]="id() + '-search-field'"
           [value]="searchText"
           (keydown)="keyDown($event, autoCreate())"
           (keyup)="searchUpdate($event)"
           (change)="prevChange($event)"
           class="select2-search__field"
           type="search"
-          role="textbox"
+          role="combobox"
           autocomplete="off"
           autocorrect="off"
           autocapitalize="off"
           spellcheck="false"
           [attr.tabindex]="this.isOpen ? _tabIndex : '-1'"
+          [attr.aria-labelledby]="ariaLabelledby() ?? idLabel()"
+          aria-autocomplete="list"
+          [attr.aria-controls]="idOptions()"
+          aria-expanded="true"
+          [attr.aria-activedescendant]="hoveringOptionId()"
         />
       </div>
 
       <div class="select2-results">
         <ul
+          [id]="idOptions()"
           #results
           class="select2-results__options"
           [class.select2-grid]="grid() && isNumber(grid())"
           [class.select2-grid-auto]="grid() && !isNumber(grid())"
           [style.max-height]="resultMaxHeight()"
           [style.--grid-size]="grid() || null"
-          role="tree"
+          role="listbox"
           tabindex="-1"
           infiniteScroll
           [infiniteScrollDisabled]="!infiniteScroll() && !isOpen"
           [infiniteScrollDistance]="infiniteScrollDistance()"
           [infiniteScrollThrottle]="infiniteScrollThrottle()"
           [infiniteScrollContainer]="results"
+          [attr.aria-labelledby]="ariaLabelledby() ?? idLabel()"
+          [attr.aria-multiselectable]="multiple()"
+          [attr.aria-activedescendant]="hoveringOptionId()"
           (scrolled)="onScroll('down')"
           (scrolledUp)="onScroll('up')"
           (keydown)="keyDown($event)"
@@ -205,22 +228,26 @@
           @for (groupOrOption of filteredData(); track groupOrOption; let i = $index) {
             @let group = _toGroup(groupOrOption);
             @if (group.options !== undefined) {
-              <li class="select2-results__option" role="group">
-                @if (!hasTemplate(group, 'group')) {
-                  <strong
-                    [attr.class]="'select2-results__group' + (group.classes ? ' ' + group.classes : '')"
-                    [innerHTML]="group.label"
-                  ></strong>
-                } @else {
-                  <ng-container *ngTemplateOutlet="getTemplate(group, 'group'); context: group"> </ng-container>
-                }
-                <ul class="select2-results__options select2-results__options--nested">
+              <li class="select2-results__option select2-results__group">
+                <span [id]="getElementId(groupOrOption)">
+                    @if (!hasTemplate(group, 'group')) {
+                    <strong
+                        [attr.class]="'select2-results__group' + (group.classes ? ' ' + group.classes : '')"
+                        [innerHTML]="group.label"
+                    ></strong>
+                    } @else {
+                    <ng-container *ngTemplateOutlet="getTemplate(group, 'group'); context: group"> </ng-container>
+                    }
+                </span>
+                <ul class="select2-results__options select2-results__options--nested"
+                    role="group"
+                    [attr.aria-labelledby]="getElementId(groupOrOption)">
                   @for (option of group.options; track option; let j = $index) {
                     <li
                       #result
-                      [id]="option.id || _id + '-option-' + i + '-' + j"
+                      [id]="getElementId(option)"
                       [class]="getOptionStyle(option)"
-                      role="treeitem"
+                      role="option"
                       [attr.aria-selected]="isSelected(option)"
                       [attr.aria-disabled]="isDisabled(option)"
                       (mouseenter)="mouseenter(option)"
@@ -240,9 +267,9 @@
               @let option = _toOption(groupOrOption);
               <li
                 #result
-                [id]="option.id || _id + '-option-' + i"
+                [id]="getElementId(groupOrOption)"
                 [class]="getOptionStyle(option)"
-                role="treeitem"
+                role="option"
                 [attr.aria-selected]="isSelected(option)"
                 [attr.aria-disabled]="isDisabled(option)"
                 (mouseenter)="mouseenter(option)"
@@ -271,3 +298,17 @@
     </div>
   </div>
 </ng-template>
+
+<ng-template #resetButton>
+    <button
+        type="button"
+        (focus)="_updateFocusState(true)"
+        (click)="reset($event)"
+        (keydown)="$event.stopPropagation()"
+        class="select2-selection__reset"
+        [attr.aria-description]="ariaResetButtonDescription()"
+        [attr.aria-controls]="idCombo()"
+    >
+        <span aria-hidden="true">×</span>
+    </button>
+</ng-template>
diff --git a/projects/ng-select2-component/src/lib/select2.component.scss b/projects/ng-select2-component/src/lib/select2.component.scss
index ed03ecd..f32ba66 100644
--- a/projects/ng-select2-component/src/lib/select2.component.scss
+++ b/projects/ng-select2-component/src/lib/select2.component.scss
@@ -258,20 +258,35 @@
             height: 0;
             content: ' ';
         }
+    }
 
-        .select2-selection__reset {
-            color: var(--select2-reset-color, #999);
-        }
+    .select2-selection__reset {
+        color: var(--select2-reset-color, #999);
+        background: var(--select2-reset-background, transparent);
+        border: var(--select2-reset-border, none);
+        border-radius: var(--select2-reset-border-radius, 4px);
+        height: fit-content;
+        align-self: center;
     }
 
+    &.select2-container--disabled,
+    &.select2-container--readonly {
+        .select2-selection--single .select2-selection__clear,
+        .select2-selection__choice__remove {
+            display: none;
+        }
+    }
     &.select2-container--disabled {
-        .select2-selection--single {
+        .select2-selection--single,
+        .select2-selection--multiple {
             cursor: default;
             background: var(--select2-selection-disabled-background, #eee);
-
-            .select2-selection__clear {
-                display: none;
-            }
+        }
+    }
+    &.select2-container--readonly {
+        .select2-selection--single,
+        .select2-selection--multiple {
+            background: var(--select2-selection-readonly-background, #eee);
         }
     }
 
@@ -372,17 +387,6 @@
         }
     }
 
-    &.select2-container--disabled {
-        .select2-selection--multiple {
-            cursor: default;
-            background: var(--select2-selection-disabled-background, #eee);
-        }
-
-        .select2-selection__choice__remove {
-            display: none;
-        }
-    }
-
     &.select2-container--open.select2-container--above {
         .select2-selection--single,
         .select2-selection--multiple {
@@ -422,7 +426,7 @@
     }
 
     .select2-results__option {
-        &[role='group'] {
+        &.select2-results__group {
             grid-column: col-start / col-end;
             padding: 0;
         }
@@ -717,18 +721,35 @@
             color: var(--select2-material-option-selected-text-color, #ff5722);
         }
 
+        &.select2-container--disabled,
+        &.select2-container--readonly {
+            .select2-selection--single,
+            .select2-selection--multiple {
+                background: transparent;
+            }
+        }
         &.select2-container--disabled .select2-selection--single,
         &.select2-container--disabled .select2-selection--multiple {
-            background: transparent;
-
             &::before {
                 background: var(
                     --select2-material-underline-disabled,
                     linear-gradient(to right, rgba(0, 0, 0, 0.26) 0, rgba(0, 0, 0, 0.26) 33%, transparent 0)
                 );
+                background-size: 4px 1px;
+                background-repeat: repeat-x;
                 background-position: 0 bottom;
+            }
+        }
+        &.select2-container--readonly .select2-selection--single,
+        &.select2-container--readonly .select2-selection--multiple {
+            &::before {
+                background: var(
+                    --select2-material-underline-readonly,
+                    linear-gradient(to right, rgba(0, 0, 0, 0.26) 0, rgba(0, 0, 0, 0.26) 33%, transparent 0)
+                );
                 background-size: 4px 1px;
                 background-repeat: repeat-x;
+                background-position: 0 bottom;
             }
         }
     }
diff --git a/projects/ng-select2-component/src/lib/select2.component.ts b/projects/ng-select2-component/src/lib/select2.component.ts
index ded94d6..3da4738 100644
--- a/projects/ng-select2-component/src/lib/select2.component.ts
+++ b/projects/ng-select2-component/src/lib/select2.component.ts
@@ -22,6 +22,7 @@ import {
     Self,
     TemplateRef,
     booleanAttribute,
+    computed,
     input,
     numberAttribute,
     output,
@@ -53,7 +54,14 @@ import { Select2Utils } from './select2-utils';
 
 let nextUniqueId = 0;
 
-const displaySearchStatusList = ['default', 'hidden', 'always'];
+interface KeyInfo {
+    key: string;
+    altKey: boolean;
+}
+
+const OPEN_KEYS: (string | KeyInfo)[] = ['ArrowDown', 'ArrowUp', 'Enter', ' ', 'Home', 'End', 'PageUp', 'PageDown'];
+const ON_OPEN_KEYS: (string | KeyInfo)[] = ['Home', 'End', 'PageUp', 'PageDown'];
+const CLOSE_KEYS: (string | KeyInfo)[] = ['Escape', 'Tab', { key: 'ArrowUp', altKey: true }];
 
 @Component({
     selector: 'select2',
@@ -61,12 +69,13 @@ const displaySearchStatusList = ['default', 'hidden', 'always'];
     styleUrls: ['./select2.component.scss'],
     imports: [CdkOverlayOrigin, NgTemplateOutlet, CdkConnectedOverlay, InfiniteScrollDirective],
     host: {
-        '[id]': '_id',
+        '[id]': 'id()',
         '[class.select2-selection-nowrap]': 'selectionNoWrap()',
     },
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class Select2 implements ControlValueAccessor, OnInit, DoCheck, AfterViewInit, OnDestroy {
+    readonly _uid = `select2-${nextUniqueId++}`;
     // ----------------------- signal-input
 
     /** data of options & option groups */
@@ -133,7 +142,11 @@ export class Select2 implements ControlValueAccessor, OnInit, DoCheck, AfterView
     readonly minCountForSearch = input(undefined, { transform: numberAttribute });
 
     /** Unique id of the element. */
-    readonly id = input<string>();
+    readonly id = input<string>(this._uid);
+    readonly idLabel = computed(() => `${this.id()}-label`);
+    readonly idCombo = computed(() => `${this.id()}-combo`);
+    readonly idOptions = computed(() => `${this.id()}-options`);
+    readonly idOverlay = computed(() => `${this.id()}-overlay`);
 
     /** Whether the element is required. */
     readonly required = input(false, { transform: booleanAttribute });
@@ -185,6 +198,18 @@ export class Select2 implements ControlValueAccessor, OnInit, DoCheck, AfterView
     /** Text for select all options */
     readonly selectAllText = input('Select all');
 
+    // WAI related inputs
+    /** title attribute applied to the input */
+    readonly title = input<string>();
+    /** aria-labelledby attribute applied to the input, to specify en external label */
+    readonly ariaLabelledby = input<string>();
+    /** aria-describedby attribute applied to the input */
+    readonly ariaDescribedby = input<string>();
+    /** aria-invalid attribute applied to the input, to force error state */
+    readonly ariaInvalid = input<boolean, unknown>(false, { transform: booleanAttribute });
+    /** description of the reset button when using 'resettable'. Default value : 'Reset' */
+    readonly ariaResetButtonDescription = input<string>('Reset');
+
     // ----------------------- signal-output
 
     readonly update = output<Select2UpdateEvent<Select2UpdateValue>>();
@@ -208,11 +233,6 @@ export class Select2 implements ControlValueAccessor, OnInit, DoCheck, AfterView
 
     // ----------------------- HostBinding
 
-    @HostBinding('attr.aria-invalid')
-    get ariaInvalid(): boolean {
-        return this._isErrorState();
-    }
-
     @HostBinding('class.material')
     get classMaterial(): boolean {
         return this.styleMode() === 'material';
@@ -244,11 +264,11 @@ export class Select2 implements ControlValueAccessor, OnInit, DoCheck, AfterView
 
     filteredData = signal<Select2Data | undefined>(undefined);
 
-    get select2Options() {
-        return this.multiple() ? (this.selectedOption as Select2Option[]) : null;
+    get select2Options(): Select2Option[] {
+        return this.multiple() ? (this.selectedOption as Select2Option[]) ?? [] : [];
     }
 
-    get select2Option() {
+    get select2Option(): Select2Option | null {
         return this.multiple() ? null : (this.selectedOption as Select2Option);
     }
 
@@ -302,9 +322,11 @@ export class Select2 implements ControlValueAccessor, OnInit, DoCheck, AfterView
 
     protected maxResultsExceeded: boolean | undefined;
 
-    private hoveringValue: Select2Value | null | undefined = null;
+    private hoveringOption = signal<Select2Option | null>(null);
+    hoveringOptionId = computed(() => this.getElementId(this.hoveringOption()));
+
     private innerSearchText = '';
-    private isSearchboxHidden: boolean | undefined;
+    protected isSearchboxHidden: boolean | undefined;
 
     private selectionElement: HTMLElement | undefined;
 
@@ -321,13 +343,8 @@ export class Select2 implements ControlValueAccessor, OnInit, DoCheck, AfterView
 
     private _data: Select2Data = [];
 
-    get _id(): string {
-        return this.id() || this._uid;
-    }
-
     private _disabled = false;
 
-    private _uid = `select2-${nextUniqueId++}`;
     protected _value: Select2UpdateValue | null = null;
     private _previousNativeValue: Select2UpdateValue | undefined;
     private _overlayPosition: VerticalConnectionPos | undefined;
@@ -341,9 +358,6 @@ export class Select2 implements ControlValueAccessor, OnInit, DoCheck, AfterView
         @Self() @Optional() public _control: NgControl,
         @Attribute('tabindex') tabIndex: string,
     ) {
-        // eslint-disable-next-line no-self-assign
-        this.id = this.id;
-
         if (this._control) {
             this._control.valueAccessor = this;
         }
@@ -389,10 +403,10 @@ export class Select2 implements ControlValueAccessor, OnInit, DoCheck, AfterView
                 if (!this.ifParentContainsClass(target, 'select2-dropdown')) {
                     this.toggleOpenAndClose();
                 }
-                if (!this.overlay() && !this.ifParentContainsId(target, this._id)) {
+                if (!this.overlay() && !this.ifParentContainsId(target, this.id())) {
                     this.clickExit();
                 }
-            } else if (!this.ifParentContainsId(target, this._id)) {
+            } else if (!this.ifParentContainsId(target, this.id())) {
                 this.toggleOpenAndClose();
                 this.clickExit();
             }
@@ -428,7 +442,7 @@ export class Select2 implements ControlValueAccessor, OnInit, DoCheck, AfterView
             this.selectedOption = option ?? null;
         }
         if (!Array.isArray(option)) {
-            this.hoveringValue = this.value();
+            this.hoveringOption.set(Select2Utils.getOptionByValue(this._data, this.value));
         }
         this.updateSearchBox();
     }
@@ -474,37 +488,29 @@ export class Select2 implements ControlValueAccessor, OnInit, DoCheck, AfterView
     }
 
     updateSearchBox() {
-        const hidden = this.customSearchEnabled()
-            ? false
-            : Select2Utils.isSearchboxHidden(this._data, this.minCountForSearch());
+        const hidden =
+            this.displaySearchStatus() === 'hidden' ||
+            (this.displaySearchStatus() !== 'always' &&
+                !this.customSearchEnabled() &&
+                Select2Utils.isSearchboxHidden(this._data, this.minCountForSearch()));
+
         if (this.isSearchboxHidden !== hidden) {
             this.isSearchboxHidden = hidden;
         }
     }
 
-    hideSearch(): boolean {
-        if (this.autoCreate() && !this.multiple()) {
-            return false;
-        }
-        const displaySearchStatus =
-            this.displaySearchStatus() && displaySearchStatusList.indexOf(this.displaySearchStatus()!) > -1
-                ? this.displaySearchStatus()
-                : 'default';
-        return (displaySearchStatus === 'default' && this.isSearchboxHidden) || displaySearchStatus === 'hidden';
-    }
-
     getOptionStyle(option: Select2Option) {
         return (
             'select2-results__option ' +
             (option.hide ? 'select2-results__option--hide ' : '') +
-            (option.value === this.hoveringValue ? 'select2-results__option--highlighted ' : '') +
+            (option === this.hoveringOption() ? 'select2-results__option--highlighted ' : '') +
             (option.classes || '')
         );
     }
 
     mouseenter(option: Select2Option) {
         if (!option.disabled) {
-            this.hoveringValue = option.value;
+            this.hoveringOption.set(option);
         }
     }
 
@@ -525,6 +531,7 @@ export class Select2 implements ControlValueAccessor, OnInit, DoCheck, AfterView
         if (event) {
             this.stopEvent(event);
         }
+        this._focus(true);
     }
 
     prevChange(event: Event) {
@@ -537,18 +544,19 @@ export class Select2 implements ControlValueAccessor, OnInit, DoCheck, AfterView
     }
 
     toggleOpenAndClose(focus = true, open?: boolean, event?: KeyboardEvent) {
-        if (this.disabledState) {
+        if (this.disabledState || this.readonly()) {
             return;
         }
         this._focus(focus);
 
+        const onOpenAction = event && this._testKey(event, ON_OPEN_KEYS);
         const changeEmit = this.isOpen !== (open ?? !this.isOpen);
         this.isOpen = open ?? !this.isOpen;
         if (this.isOpen) {
             if (!this.isSearchboxHidden) {
                 this.innerSearchText = '';
                 this.updateFilteredData();
-                this._focusSearchboxOrResultsElement(focus);
+                this._focusSearchbox(focus);
             }
 
             if (this.isSearchboxHidden && !changeEmit && event) {
@@ -560,6 +568,9 @@ export class Select2 implements ControlValueAccessor, OnInit, DoCheck, AfterView
                 } else if (this.resultsElement) {
                     this.resultsElement.scrollTop = 0;
                 }
+                if (onOpenAction) {
+                    this.keyDown(event);
+                }
                 this._changeDetectorRef.detectChanges();
 
                 this.triggerRect();
@@ -625,14 +636,14 @@ export class Select2 implements ControlValueAccessor, OnInit, DoCheck, AfterView
             if (!this.selectAllTest()) {
                 const options: Select2Option[] = [];
                 this._data.forEach(e => {
-                    if ((e as Select2Group).options) {
-                        (e as Select2Group).options.forEach(f => {
+                    if (Select2Utils.isGroup(e)) {
+                        e.options.forEach(f => {
                             if (!f.disabled && !f.hide) {
                                 options.push(f);
                             }
                         });
-                    } else if (!(e as Select2Option).disabled && !(e as Select2Option).hide) {
-                        options.push(e as Select2Option);
+                    } else if (!e.disabled && !e.hide) {
+                        options.push(e);
                     }
                 });
                 this.selectedOption = options;
@@ -651,13 +662,13 @@ export class Select2 implements ControlValueAccessor, OnInit, DoCheck, AfterView
         if (this.multiple() && Array.isArray(this.selectedOption) && this.selectedOption.length) {
             let options = 0;
             this._data.forEach(e => {
-                if ((e as Select2Group).options) {
-                    (e as Select2Group).options.forEach(f => {
+                if (Select2Utils.isGroup(e)) {
+                    e.options.forEach(f => {
                         if (!f.disabled && !f.hide) {
                             options++;
                         }
                     });
-                } else if (!(e as Select2Option).disabled && !(e as Select2Option).hide) {
+                } else if (!e.disabled && !e.hide) {
                     options++;
                 }
             });
@@ -718,8 +729,8 @@ export class Select2 implements ControlValueAccessor, OnInit, DoCheck, AfterView
             this.maxResultsExceeded = false;
         }
 
-        if (Select2Utils.valueIsNotInFilteredData(result, this.hoveringValue)) {
-            this.hoveringValue = Select2Utils.getFirstAvailableOption(result);
+        if (Select2Utils.optionIsNotInFilteredData(result, this.hoveringOption())) {
+            this.hoveringOption.set(Select2Utils.getFirstAvailableOption(result));
         }
 
         this.filteredData.set(result);
@@ -730,14 +741,14 @@ export class Select2 implements ControlValueAccessor, OnInit, DoCheck, AfterView
             const options: Select2Option[] = [];
             const value = this.selectedOption.map(e => e.value);
             this._data.forEach(e => {
-                if ((e as Select2Group).options) {
-                    (e as Select2Group).options.forEach(f => {
+                if (Select2Utils.isGroup(e)) {
+                    e.options.forEach(f => {
                         if (value.includes(f.value)) {
                             options.push(f);
                         }
                     });
-                } else if (value.includes((e as Select2Option).value)) {
-                    options.push(e as Select2Option);
+                } else if (value.includes(e.value)) {
+                    options.push(e);
                 }
             });
             // preserve selection order
@@ -745,14 +756,14 @@ export class Select2 implements ControlValueAccessor, OnInit, DoCheck, AfterView
         } else if (!Array.isArray(this.selectedOption) && this.selectedOption) {
             let option: Select2Option | null = null;
             this._data.forEach(e => {
-                if ((e as Select2Group).options) {
-                    (e as Select2Group).options.forEach(f => {
+                if (Select2Utils.isGroup(e)) {
+                    e.options.forEach(f => {
                         if ((this.selectedOption as Select2Option).value === f.value) {
                             option = f;
                         }
                     });
-                } else if ((this.selectedOption as Select2Option).value === (e as Select2Option).value) {
-                    option = e as Select2Option;
+                } else if ((this.selectedOption as Select2Option).value === e.value) {
+                    option = e;
                 }
             });
             this.selectedOption = option;
@@ -764,15 +775,19 @@ export class Select2 implements ControlValueAccessor, OnInit, DoCheck, AfterView
         this._focus(false);
     }
 
-    private ifParentContainsClass(element: HTMLElement, cssClass: string): boolean {
+    private isInSelect(elt: Element): boolean {
+        return this.ifParentContainsId(elt, this.id()) || this.ifParentContainsId(elt, this.idOverlay());
+    }
+
+    private ifParentContainsClass(element: Element, cssClass: string): boolean {
         return this.getParentElementByClass(element, cssClass) !== null;
     }
 
-    private ifParentContainsId(element: HTMLElement, id: string): boolean {
+    private ifParentContainsId(element: Element, id: string): boolean {
         return this.getParentElementById(element, id) !== null;
     }
 
-    private getParentElementByClass(element: HTMLElement, cssClass: string): HTMLElement | null {
+    private getParentElementByClass(element: Element, cssClass: string): Element | null {
         return this.containClasses(element, cssClass.trim().split(/\s+/))
             ? element
             : element.parentElement
@@ -780,7 +795,7 @@ export class Select2 implements ControlValueAccessor, OnInit, DoCheck, AfterView
               : null;
     }
 
-    private getParentElementById(element: HTMLElement, id: string): HTMLElement | null {
+    private getParentElementById(element: Element, id: string): Element | null {
         return element.id === id
             ? element
             : element.parentElement
@@ -788,7 +803,7 @@ export class Select2 implements ControlValueAccessor, OnInit, DoCheck, AfterView
               : null;
     }
 
-    private containClasses(element: HTMLElement, cssClasses: string[]): boolean {
+    private containClasses(element: Element, cssClasses: string[]): boolean {
         if (!element.classList) {
             return false;
         }
@@ -826,14 +841,14 @@ export class Select2 implements ControlValueAccessor, OnInit, DoCheck, AfterView
         ]);
     }
 
-    focusin() {
+    focusin(options?: FocusOptions) {
         if (!this.disabledState) {
-            this._focus(true);
+            this._focus(true, options);
         }
     }
 
-    focusout() {
-        if (this.selectionElement && !this.selectionElement.classList.contains('select2-focused')) {
+    focusout(event: FocusEvent) {
+        if (!event.relatedTarget || !this.isInSelect(event.relatedTarget as Element)) {
             this._focus(false);
             this._onTouched();
         }
@@ -907,34 +922,43 @@ export class Select2 implements ControlValueAccessor, OnInit, DoCheck, AfterView
     keyDown(event: KeyboardEvent, create = false) {
         if (create && this._testKey(event, ['Enter'])) {
             this.createAndAdd(event);
-        } else if (this._testKey(event, ['ArrowDown'])) {
+        } else if (this._testKey(event, [{ key: 'ArrowDown', altKey: false }])) {
             this.moveDown();
             event.preventDefault();
-        } else if (this._testKey(event, ['ArrowUp'])) {
+        } else if (this._testKey(event, [{ key: 'ArrowUp', altKey: false }])) {
             this.moveUp();
             event.preventDefault();
-        } else if (this._testKey(event, ['Enter'])) {
+        } else if (this._testKey(event, ['Home'])) {
+            this.moveStart();
+            event.preventDefault();
+        } else if (this._testKey(event, ['End'])) {
+            this.moveEnd();
+            event.preventDefault();
+        } else if (this._testKey(event, ['PageUp'])) {
+            this.moveUp(10);
+            event.preventDefault();
+        } else if (this._testKey(event, ['PageDown'])) {
+            this.moveDown(10);
+            event.preventDefault();
+        } else if (this._testKey(event, ['Enter']) || (this.isSearchboxHidden && this._testKey(event, [' ']))) {
             this.selectByEnter();
             event.preventDefault();
-        } else if (this._testKey(event, ['Escape', 'Tab']) && this.isOpen) {
+        } else if (this._testKey(event, CLOSE_KEYS) && this.isOpen) {
             this.toggleOpenAndClose();
-            this._focus(false);
+            this._focus(true);
         }
     }
 
     openKey(event: KeyboardEvent, create = false) {
         if (create && this._testKey(event, ['Enter'])) {
             this.createAndAdd(event);
-        } else if (this._testKey(event, ['ArrowDown', 'ArrowUp', 'Enter'])) {
+        } else if (this._testKey(event, OPEN_KEYS)) {
             this.toggleOpenAndClose(true, true, event);
             event.preventDefault();
-        } else if (this._testKey(event, ['Escape', 'Tab'])) {
+        } else if (this._testKey(event, CLOSE_KEYS)) {
             if (this.isOpen) {
-                this.toggleOpenAndClose(false);
+                this.toggleOpenAndClose();
                 this._onTouched();
-                event.preventDefault();
-            } else {
-                this._focus(false);
             }
         }
     }
@@ -966,6 +990,10 @@ export class Select2 implements ControlValueAccessor, OnInit, DoCheck, AfterView
     }
 
     removeSelection(e: MouseEvent | KeyboardEvent | Event, option: Select2Option) {
+        if (this.readonly() || this.disabledState) {
+            return;
+        }
+
         Select2Utils.removeSelection(this.selectedOption, option);
 
         if (this.multiple() && this.hideSelectedItems()) {
@@ -999,7 +1027,9 @@ export class Select2 implements ControlValueAccessor, OnInit, DoCheck, AfterView
         e.stopPropagation();
 
         if (this.isOpen) {
-            this._focusSearchboxOrResultsElement();
+            this._focusSearchbox();
+        } else {
+            this._focus(true);
         }
     }
 
@@ -1079,6 +1109,33 @@ export class Select2 implements ControlValueAccessor, OnInit, DoCheck, AfterView
         return undefined;
     }
 
+    getElementId(elt: Select2Group | Select2Option | null): string | null {
+        if (!elt) {
+            return null;
+        }
+
+        const [i, j] = this._getElementPath(elt);
+        const toSuffix = (index: number) => (index !== undefined ? `-${index}` : '');
+        return (elt as Select2Option).id ?? `${this.id()}-option${toSuffix(i)}${toSuffix(j)}`;
+    }
+
+    _getElementPath(elt: Select2Group | Select2Option): number[] {
+        for (let i = 0; i < this._data.length; i++) {
+            const optionOrGroup = this._data[i];
+
+            if (optionOrGroup === elt) {
+                return [i];
+            } else if (Select2Utils.isGroup(optionOrGroup)) {
+                const j = optionOrGroup.options.findIndex(o => o === elt);
+                if (j >= 0) {
+                    return [i, j];
+                }
+            }
+        }
+
+        return [];
+    }
+
     _toGroup(group: Select2Option | Select2Group) {
         return group as Select2Group;
     }
@@ -1125,17 +1182,29 @@ export class Select2 implements ControlValueAccessor, OnInit, DoCheck, AfterView
         this.stopEvent(e);
     }
 
-    private moveUp() {
-        this.updateScrollFromOption(Select2Utils.getPreviousOption(this.filteredData()!, this.hoveringValue));
+    private moveUp(times = 1) {
+        for (let i = 0; i < times; i++) {
+            this.updateScrollFromOption(Select2Utils.getPreviousOption(this.filteredData()!, this.hoveringOption()));
+        }
+    }
+
+    private moveDown(times = 1) {
+        for (let i = 0; i < times; i++) {
+            this.updateScrollFromOption(Select2Utils.getNextOption(this.filteredData()!, this.hoveringOption()));
+        }
+    }
+
+    private moveStart() {
+        this.updateScrollFromOption(Select2Utils.getFirstOption(this.filteredData()!));
     }
 
-    private moveDown() {
-        this.updateScrollFromOption(Select2Utils.getNextOption(this.filteredData()!, this.hoveringValue));
+    private moveEnd() {
+        this.updateScrollFromOption(Select2Utils.getLastOption(this.filteredData()!));
     }
 
     private updateScrollFromOption(option: Select2Option | null) {
         if (option) {
-            this.hoveringValue = option.value;
+            this.hoveringOption.set(option);
             const domElement = this.results().find(r => r.nativeElement.innerText.trim() === option.label);
             if (domElement && this.resultsElement) {
                 this.resultsElement.scrollTop = 0;
@@ -1147,34 +1216,20 @@ export class Select2 implements ControlValueAccessor, OnInit, DoCheck, AfterView
     }
 
     private selectByEnter() {
-        if (this.hoveringValue) {
-            const option = Select2Utils.getOptionByValue(this._data, this.hoveringValue) ?? null;
-            this.select(option);
-        }
-    }
-
-    private _testKey(event: KeyboardEvent, refs: (number | string)[] = []): boolean {
-        return this._isKey(this._getKey(event), refs);
-    }
-
-    private _getKey(event: KeyboardEvent): number | string {
-        let code: number | string | undefined;
-
-        if (event.key !== undefined) {
-            code = event.key;
-        } else if ((event as any)['keyIdentifier'] !== undefined) {
-            code = (event as any)['keyIdentifier'];
-        } else if ((event as any)['keyCode'] !== undefined) {
-            code = (event as any)['keyCode'];
-        } else {
-            event.preventDefault();
+        if (this.hoveringOption()) {
+            this.select(this.hoveringOption());
         }
-
-        return code ?? '';
     }
 
-    private _isKey(code: number | string, refs: (number | string)[] = []): boolean {
-        return refs && refs.length > 0 ? refs.indexOf(code) !== -1 : false;
+    private _testKey(event: KeyboardEvent, refs: (string | KeyInfo)[] = []): boolean {
+        const { key, altKey } = event;
+        return refs.some(ref => {
+            if (typeof ref === 'string') {
+                return ref === key;
+            } else {
+                return key === ref.key && altKey === ref.altKey;
+            }
+        });
     }
 
     /**
@@ -1250,7 +1305,7 @@ export class Select2 implements ControlValueAccessor, OnInit, DoCheck, AfterView
         }
     }
 
-    private _focusSearchboxOrResultsElement(focus = true) {
+    private _focusSearchbox(focus = true) {
         if (!this.isSearchboxHidden) {
             setTimeout(() => {
                 const searchInput = this.searchInput();
@@ -1258,20 +1313,24 @@ export class Select2 implements ControlValueAccessor, OnInit, DoCheck, AfterView
                     searchInput.nativeElement.focus();
                 }
             });
-            if (this.resultsElement && focus) {
-                this.resultsElement.focus();
-            }
         }
     }
 
-    private _focus(state: boolean) {
-        if (!state && this.focused) {
-            this.focused = state;
-            this.blur.emit(this);
-        } else if (state && !this.focused) {
-            this.focused = state;
-            this.focus.emit(this);
+    private _focus(state: boolean, options?: FocusOptions) {
+        if (state) {
+            const eltToFocus =
+                !this.isSearchboxHidden && this.isOpen ? this.searchInput()!.nativeElement : this.selection().nativeElement;
+            if (document.activeElement !== eltToFocus) {
+                eltToFocus.focus(options);
+            }
+        } else if (
+            document.activeElement === this.selection()?.nativeElement ||
+            document.activeElement === this.searchInput()?.nativeElement
+        ) {
+            (document.activeElement as HTMLElement).blur();
         }
+
+        this._updateFocusState(state);
     }
 
     private _isAbobeOverlay(): boolean {
@@ -1280,4 +1339,14 @@ export class Select2 implements ControlValueAccessor, OnInit, DoCheck, AfterView
             ? this._overlayPosition === 'top'
             : listPosition === 'above';
     }
-}
\ No newline at end of file
+
+    protected _updateFocusState(state: boolean) {
+        if (!state && this.focused) {
+            this.focused = state;
+            this.blur.emit(this);
+        } else if (state && !this.focused) {
+            this.focused = state;
+            this.focus.emit(this);
+        }
+    }
+}
diff --git a/src/app/app-examples.component.html b/src/app/app-examples.component.html
index a93d1fd..1706a61 100644
--- a/src/app/app-examples.component.html
+++ b/src/app/app-examples.component.html
@@ -4,6 +4,49 @@ <h2>Examples</h2>
 <input id="disabled" type="checkbox" [(ngModel)]="overlay" />
 
 <div class="block">
+  <h3 id="ex-0">0. WAI</h3>
+  <select2 [overlay]="overlay" [data]="data3" id="select2-0a" title="title">
+    <select2-label>Label</select2-label>
+  </select2>
+
+  <div id="select2-0b-custom-label">External label</div>
+  <div id="select2-0b-description">External description</div>
+  <select2
+    [overlay]="overlay"
+    [data]="data3"
+    id="select2-0b"
+    title="title"
+    ariaLabelledby="select2-0b-custom-label"
+    ariaDescribedby="select2-0b-description"
+  ></select2>
+
+  <select2 [overlay]="overlay" [data]="data3" id="select2-0c" ariaInvalid>
+    <select2-label>Invalid field</select2-label>
+  </select2>
+
+  <select2 [overlay]="overlay" [data]="data3" id="select2-0d" required>
+    <select2-label>Required field</select2-label>
+  </select2>
+
+  <select2 [overlay]="overlay" [data]="data3" id="select2-0e" readonly value="foo">
+    <select2-label>Readonly field</select2-label>
+  </select2>
+
+  <select2 [overlay]="overlay" [data]="data3" id="select2-0f" disabled value="foo">
+    <select2-label>Disabled field</select2-label>
+  </select2>
+
+  <select2
+    [overlay]="overlay"
+    [data]="data3"
+    id="select2-0g"
+    resettable
+    value="foo"
+    ariaResetButtonDescription="Clear the field"
+  >
+    <select2-label>Resettable field</select2-label>
+  </select2>
+
   <h3 id="ex-1">1. options in group ({{ value1 }})</h3>
   <select2
     [overlay]="overlay"
@@ -18,17 +61,17 @@ <h3 id="ex-1">1. options in group ({{ value1 }})</h3>
     (search)="search('search1', $event)"
     resettable
     customSearchEnabled
-    id="selec2-1"
+    id="select2-1"
   >
   </select2>
   <h3 id="ex-2">2. options ({{ value2 }})</h3>
-  <select2 [overlay]="overlay" [data]="data2" [value]="value2" (update)="update('value2', $event)" id="selec2-2">
+  <select2 [overlay]="overlay" [data]="data2" [value]="value2" (update)="update('value2', $event)" id="select2-2">
   </select2>
   <h3 id="ex-3">3. less options ({{ value3 }})</h3>
-  <select2 [overlay]="overlay" [data]="data3" [value]="value3" (update)="update('value3', $event)" id="selec2-3">
+  <select2 [overlay]="overlay" [data]="data3" [value]="value3" (update)="update('value3', $event)" id="select2-3">
   </select2>
   <h3 id="ex-4">4. disabled ({{ value4 }})</h3>
-  <select2 [overlay]="overlay" [data]="data4" [value]="value4" [disabled]="true" id="selec2-4"> </select2>
+  <select2 [overlay]="overlay" [data]="data4" [value]="value4" [disabled]="true" id="select2-4"> </select2>
   <h3 id="ex-5">5. search box (infinity) ({{ value5 }})</h3>
   <form [formGroup]="ctrlForm2">
     <select2
@@ -37,7 +80,7 @@ <h3 id="ex-5">5. search box (infinity) ({{ value5 }})</h3>
       formControlName="test5"
       [minCountForSearch]="minCountForSearch"
       (update)="update('value5', $event)"
-      id="selec2-5"
+      id="select2-5"
     >
     </select2>
   </form>
@@ -61,7 +104,7 @@ <h3 id="ex-6">
     [minCountForSearch]="limit.value"
     [displaySearchStatus]="$any(status.value)"
     (update)="update('value6', $event)"
-    id="selec2-6"
+    id="select2-6"
   >
   </select2>
   <h3 id="ex-7">7. placeholder ({{ value7 }})</h3>
@@ -71,7 +114,7 @@ <h3 id="ex-7">7. placeholder ({{ value7 }})</h3>
     placeholder="select an item"
     (update)="update('value7', $event)"
     resettable
-    id="selec2-7"
+    id="select2-7"
   >
   </select2>
   <h3 id="ex-8">8. open, close and search event ({{ value8 }})</h3>
@@ -84,7 +127,7 @@ <h3 id="ex-8">8. open, close and search event ({{ value8 }})</h3>
     (close)="close8()"
     (search)="search8($event)"
     (update)="update('value8', $event)"
-    id="selec2-8"
+    id="select2-8"
   >
     <select2-hint>value : {{ value8 }}</select2-hint>
   </select2>
@@ -102,7 +145,7 @@ <h3 id="ex-9">9. multiple + limite <input type="number" [(ngModel)]="limitSelect
     (close)="close('close9', $event)"
     (search)="search('search9', $event)"
     customSearchEnabled
-    id="selec2-9"
+    id="select2-9"
   >
   </select2>
   <h3 id="ex-10">10. multiple + hide selected items ({{ value10 | json }})</h3>
@@ -116,7 +159,7 @@ <h3 id="ex-10">10. multiple + hide selected items ({{ value10 | json }})</h3>
     multiple="true"
     (update)="update('value10', $event)"
     hideSelectedItems="true"
-    id="selec2-10"
+    id="select2-10"
     [selectionNoWrap]="selectionNoWrap"
   >
   </select2>
@@ -129,7 +172,7 @@ <h3 id="ex-11">11. material style and form binding ({{ value11 }})</h3>
       formControlName="test11"
       placeholder="Select a state"
       styleMode="material"
-      id="selec2-11"
+      id="select2-11"
     ></select2>
     <button (click)="reset11()">reset</button>
     <button (click)="change11()">Utah</button>
@@ -142,11 +185,11 @@ <h3 id="ex-12">12. material style ({{ value12 }})</h3>
     [value]="value12"
     (update)="update('value12', $event)"
     styleMode="material"
-    id="selec2-12"
+    id="select2-12"
   >
   </select2>
   <h3 id="ex-13">13. boolean value ({{ value13 }})</h3>
-  <select2 [overlay]="overlay" [data]="data13" [value]="value13" (update)="update('value13', $event)" id="selec2-13">
+  <select2 [overlay]="overlay" [data]="data13" [value]="value13" (update)="update('value13', $event)" id="select2-13">
   </select2>
   <h3 id="ex-14">14. FormControl ({{ fg.get('state')!.value }})</h3>
   <form [formGroup]="fg">
@@ -154,7 +197,7 @@ <h3 id="ex-14">14. FormControl ({{ fg.get('state')!.value }})</h3>
       [overlay]="overlay"
       [data]="data9"
       multiple="true"
-      id="selec2-14"
+      id="select2-14"
       formControlName="state"
       (update)="update('value14', $event)"
     >
@@ -163,7 +206,7 @@ <h3 id="ex-14">14. FormControl ({{ fg.get('state')!.value }})</h3>
     <button (click)="resetForm()">Reset Form</button>
   </form>
   <h3 id="ex-15">15. with label ({{ value15 }})</h3>
-  <select2 [overlay]="overlay" [data]="data15" [value]="value15" (update)="update('value15', $event)" id="selec2-15">
+  <select2 [overlay]="overlay" [data]="data15" [value]="value15" (update)="update('value15', $event)" id="select2-15">
     <select2-label>Select a state</select2-label>
   </select2>
   <h3 id="ex-16">16. required with label ({{ value16 }})</h3>
@@ -173,7 +216,7 @@ <h3 id="ex-16">16. required with label ({{ value16 }})</h3>
     [value]="value16"
     (update)="update('value16', $event)"
     required
-    id="selec2-16"
+    id="select2-16"
   >
     <select2-label>Select a state</select2-label>
   </select2>
@@ -187,7 +230,7 @@ <h3 id="ex-18">18. search starts with 3 chars</h3>
     [value]="value18"
     (update)="update('value18', $event)"
     minCharForSearch="3"
-    id="selec2-18"
+    id="select2-18"
   >
   </select2>
   <h3 id="ex-19">19. dropdown list position above ({{ value19 }})</h3>
@@ -197,7 +240,7 @@ <h3 id="ex-19">19. dropdown list position above ({{ value19 }})</h3>
     [value]="value19"
     (update)="update('value19', $event)"
     listPosition="above"
-    id="selec2-19"
+    id="select2-19"
   >
   </select2>
   <div class="noStyle">
@@ -215,7 +258,7 @@ <h3 id="ex-20">20. nostyle ({{ value20 }})</h3>
       (update)="update('value20', $event)"
       listPosition="above"
       [styleMode]="$any(select20?.value) || 'noStyle'"
-      id="selec2-20"
+      id="select2-20"
     >
     </select2>
   </div>
@@ -226,7 +269,7 @@ <h3 id="ex-21">21. update to empty/null/undefined ({{ value21 }})</h3>
     [value]="value21"
     (update)="update('value21', $event)"
     listPosition="above"
-    id="selec2-21"
+    id="select2-21"
   >
   </select2>
   <button (click)="value21 = ''">Update value to empty string</button>
@@ -239,7 +282,7 @@ <h3 id="ex-22">22. with item classes and id ({{ value22 }})</h3>
     [value]="value22"
     (update)="update('value22', $event)"
     listPosition="auto"
-    id="selec2-22"
+    id="select2-22"
     class="flower-list"
   >
   </select2>
@@ -254,7 +297,7 @@ <h3 id="ex-23">23. with template ({{ value23 }})</h3>
     listPosition="above"
     [templates]="template"
     [templateSelection]="templateSelection"
-    id="selec2-23"
+    id="select2-23"
     class="flower-list"
   >
     <ng-template #template let-data="data"
@@ -275,7 +318,7 @@ <h3 id="ex-24">24. with template (option / group) ({{ value24 }})</h3>
     (update)="update('value24', $event)"
     listPosition="above"
     [templates]="{ option: templateOption, group: templateGroup }"
-    id="selec2-24"
+    id="select2-24"
     class="flower-list"
   >
     <ng-template #templateOption let-data="data"
@@ -296,7 +339,7 @@ <h3 id="ex-25">25. with templates Ids ({{ value25 }})</h3>
     (update)="update('value25', $event)"
     listPosition="above"
     [templates]="{ template1: template1, template2: template2, template3: template3 }"
-    id="selec2-25"
+    id="select2-25"
     class="flower-list"
   >
     <ng-template #template1 let-data="data"
@@ -319,7 +362,7 @@ <h3 id="ex-26">26. infiniteScroll({{ value26 }})</h3>
     infiniteScrollDistance="1.5"
     infiniteScrollThrottle="150"
     (scroll)="scroll26($event)"
-    id="selec2-26"
+    id="select2-26"
   ></select2>
   <h3 id="ex-27">27. position auto (overlay only) ({{ value2 }})</h3>
   <select2
@@ -328,7 +371,7 @@ <h3 id="ex-27">27. position auto (overlay only) ({{ value2 }})</h3>
     [value]="value2"
     listPosition="auto"
     (update)="update('value2', $event)"
-    id="selec2-27"
+    id="select2-27"
   ></select2>
   <h3 id="ex-28">28. max results 50 ({{ value28 }})</h3>
   <select2
@@ -336,7 +379,7 @@ <h3 id="ex-28">28. max results 50 ({{ value28 }})</h3>
     [data]="data28"
     [value]="value28"
     listPosition="auto"
-    id="selec2-28"
+    id="select2-28"
     (update)="update('value28', $event)"
     maxResults="50"
     maxResultsMessage="Too much results in this list."
@@ -349,7 +392,7 @@ <h3 id="ex-29">29. option autocreate ({{ value29 }})</h3>
     [value]="value29"
     multiple
     autoCreate
-    id="selec2-29"
+    id="select2-29"
     (update)="update('value29', $event)"
   >
   </select2>
@@ -361,7 +404,7 @@ <h3 id="ex-29b">29b. option autocreate in search box ({{ value29b }})</h3>
     [value]="value29b"
     multiple
     autoCreate
-    id="selec2-29b"
+    id="select2-29b"
     (update)="update('value29b', $event)"
   >
   </select2>
@@ -373,7 +416,7 @@ <h3 id="ex-30">30. selected option when × is clicked (resettable) ({{ value30 }
     [value]="value30"
     resettable
     resetSelectedValue="CA"
-    id="selec2-30"
+    id="select2-30"
     (update)="update('value30', $event)"
   >
   </select2>
@@ -386,7 +429,7 @@ <h3 id="ex-31">31. change list ({{ value31 }})</h3>
   ><br />
 
   Value :
-  <select2 [overlay]="overlay" [data]="data31" [value]="value31" id="selec2-31" (update)="update('value31', $event)">
+  <select2 [overlay]="overlay" [data]="data31" [value]="value31" id="select2-31" (update)="update('value31', $event)">
   </select2>
   <br />
 
@@ -395,7 +438,7 @@ <h3 id="ex-31">31. change list ({{ value31 }})</h3>
     [overlay]="overlay"
     [data]="data31"
     [value]="value31m"
-    id="selec2-31-m"
+    id="select2-31-m"
     (update)="update('value31m', $event)"
     multiple
   >
@@ -407,7 +450,7 @@ <h3 id="ex-31">31. change list ({{ value31 }})</h3>
     [overlay]="overlay"
     [data]="data31"
     [(ngModel)]="value31b"
-    id="selec2-31b"
+    id="select2-31b"
     (update)="update('value31b', $event)"
   ></select2>
 
@@ -419,7 +462,7 @@ <h3 id="ex-32">32. auto create when / resettable ({{ value32 }})</h3>
     resettable
     autoCreate
     resetSelectedValue="CA"
-    id="selec2-32"
+    id="select2-32"
     (autoCreateItem)="autoCreateItem('value32', $event)"
     (update)="update('value32', $event)"
   ></select2>
@@ -433,7 +476,7 @@ <h3 id="ex-33">33. reset form multiple({{ ctrlForm3.get('test33')?.value }})</h3
       multiple="true"
       hideSelectedItems="true"
       (update)="update('value33', $event)"
-      id="selec2-33"
+      id="select2-33"
     ></select2>
 
     <button (click)="reset()">Reset</button>
@@ -444,7 +487,7 @@ <h3 id="ex-34">34. grid ({{ value34 }})</h3>
     [overlay]="overlay"
     [data]="data34"
     [value]="value34"
-    id="selec2-34"
+    id="select2-34"
     grid="4"
     (autoCreateItem)="autoCreateItem('value34', $event)"
     (update)="update('value34', $event)"
@@ -456,7 +499,7 @@ <h3 id="ex-34b">34b. grid sub-group ({{ value34b }})</h3>
     [data]="data34b"
     [value]="value34b"
     grid="4"
-    id="selec2-34b"
+    id="select2-34b"
     (autoCreateItem)="autoCreateItem('value34b', $event)"
     (update)="update('value34b', $event)"
   ></select2>
@@ -466,7 +509,7 @@ <h3 id="ex-35">35. grid-auto ({{ value35 }})</h3>
     [overlay]="overlay"
     [data]="data35"
     [value]="value35"
-    id="selec2-35"
+    id="select2-35"
     grid="35px"
     (autoCreateItem)="autoCreateItem('value35', $event)"
     (update)="update('value35', $event)"
@@ -478,7 +521,7 @@ <h3 id="ex-35b">35b. grid-auto sub-group + multiple ({{ value35b | json }})</h3>
     [data]="data35b"
     [value]="value35b"
     multiple
-    id="selec2-35b"
+    id="select2-35b"
     grid="35px"
     (autoCreateItem)="autoCreateItem('value35b', $event)"
     (update)="update('value35b', $event)"
@@ -491,20 +534,21 @@ <h3 id="ex-35">36. selectionOverride / resettable ({{ value36 }})</h3>
     [overlay]="overlay"
     [data]="data36"
     [value]="value36"
-    id="selec2-36"
+    id="select2-36"
     (update)="update('value36', $event)"
   >
   </select2>
   <br />
 
-  <h3 id="ex-36m">36b. selectionOverride multiple ({{ value36m | json }})</h3>
+  <h3 id="ex-36m">36b. selectionOverride multiple / resettable ({{ value36m | json }})</h3>
 
   <select2
     selectionOverride="Test (%size%)"
+    resettable
     [overlay]="overlay"
     [data]="data36m"
     [value]="value36m"
-    id="selec2-36-m"
+    id="select2-36-m"
     (update)="update('value36m', $event)"
     multiple
   >
@@ -520,7 +564,7 @@ <h3 id="ex-36mf">36c. selectionOverride multiple / function ({{ value36mf | json
     [overlay]="overlay"
     [data]="data36mf"
     [value]="value36mf"
-    id="selec2-36-mf"
+    id="select2-36-mf"
     (update)="update('value36mf', $event)"
     multiple
   >
@@ -533,7 +577,7 @@ <h3 id="ex-37">37. select all option ({{ value37 | json }})</h3>
     [overlay]="overlay"
     [data]="data37"
     [value]="value37"
-    id="selec2-37"
+    id="select2-37"
     (update)="update('value37', $event)"
     multiple
   >
diff --git a/src/app/app-examples.component.ts b/src/app/app-examples.component.ts
index ef8e625..1e2a196 100644
--- a/src/app/app-examples.component.ts
+++ b/src/app/app-examples.component.ts
@@ -8,7 +8,7 @@ import { Select2AutoCreateEvent, Select2Data, Select2ScrollEvent, Select2SearchE
 
 
 
-import { data1, data2, data3, data5, data6, data8, data13, data17, data18, data19, data22, data23, data24, data26, data28, data31en, data31fr, data31ja, data35, data35b } from './app.data';
+import { data1, data13, data17, data18, data19, data2, data22, data23, data24, data26, data28, data3, data31en, data31fr, data31ja, data35, data35b, data5, data6, data8 } from './app.data';
 
 
 
@@ -224,12 +224,12 @@ export class AppExamplesComponent {
     }
 
     update(key: string, event: Select2UpdateEvent<any>) {
-        console.log('update', key, event.component._id, event.value);
+        console.log('update', key, event.component.id(), event.value);
         (this as any)[key] = event.value;
     }
 
     autoCreateItem(key: string, event: Select2AutoCreateEvent<Select2UpdateValue>) {
-        console.log('autoCreateItem', key, event.component._id, event.value);
+        console.log('autoCreateItem', key, event.component.id(), event.value);
     }
 
     resetForm() {
@@ -259,4 +259,4 @@ export class AppExamplesComponent {
                 break;
         }
     }
-}
\ No newline at end of file
+}
diff --git a/src/app/app-gen.component.html b/src/app/app-gen.component.html
index f8d7828..e6fbddf 100644
--- a/src/app/app-gen.component.html
+++ b/src/app/app-gen.component.html
@@ -22,6 +22,10 @@ <h4>parameters</h4>
       <label for="disabled">disabled : </label>
       <input type="checkbox" formControlName="disabled" id="disabled" />
     </div>
+    <div>
+        <label for="readonly">readonly : </label>
+        <input type="checkbox" formControlName="readonly" id="readonly" />
+    </div>
     <div>
       <label for="overlay">overlay : </label>
       <input type="checkbox" formControlName="overlay" id="overlay" />
@@ -196,7 +200,7 @@ <h5>Templates</h5>
     <h4>Events</h4>
     <div>
       <label for="update">update: </label>
-      <input type="checkbox" formControlName="selectionOverride" id="update" />
+      <input type="checkbox" formControlName="update" id="update" />
     </div>
     <div>
       <label for="open">open: </label>
@@ -237,6 +241,7 @@ <h4>HTML render</h4>
           [data]="data"
           [overlay]="value?.overlay"
           [disabled]="value?.disabled"
+          [readonly]="value?.readonly"
           [minCharForSearch]="value?.minCharForSearch || 0"
           [minCountForSearch]="value?.minCountForSearch"
           [displaySearchStatus]="value?.displaySearchStatus"
diff --git a/src/app/app-gen.component.ts b/src/app/app-gen.component.ts
index e7214ee..7e1992a 100644
--- a/src/app/app-gen.component.ts
+++ b/src/app/app-gen.component.ts
@@ -39,6 +39,7 @@ export class AppGenComponent implements AfterContentInit {
             hint: new UntypedFormControl(),
             // parameters
             disabled: new UntypedFormControl(),
+            readonly: new UntypedFormControl(),
             overlay: new UntypedFormControl(),
             minCharForSearch: new UntypedFormControl(),
             minCountForSearch: new UntypedFormControl(),
@@ -95,7 +96,7 @@ export class AppGenComponent implements AfterContentInit {
     }
 
     selectionOverride: Select2SelectionOverride = params => {
-        return `Selection (${params.size}${params.options!.length > 0 ? ': ' + params.options!.map(e => e.label).join(', ') : ''}) `;
+        return `Selection (${params.size}${(params.options?.length ?? 0) > 0 ? ': ' + params.options!.map(e => e.label).join(', ') : ''}) `;
     };
 
     getTemplate(
@@ -197,6 +198,9 @@ export class AppGenComponent implements AfterContentInit {
         if (value.disabled) {
             attrs['disabled'] = this._testBoolean(value.disabled);
         }
+        if (value.readonly) {
+            attrs['readonly'] = this._testBoolean(value.readonly);
+        }
         if (value.overlay) {
             attrs['overlay'] = this._testBoolean(value.overlay);
         }
@@ -468,4 +472,4 @@ export class AppGenComponent implements AfterContentInit {
     private _testBoolean(value: any): null | undefined {
         return value ? null : undefined;
     }
-}
\ No newline at end of file
+}