diff --git a/playwright/cps-ui-kit/components/cps-select.spec.ts b/playwright/cps-ui-kit/components/cps-select.spec.ts
new file mode 100644
index 000000000..322f76339
--- /dev/null
+++ b/playwright/cps-ui-kit/components/cps-select.spec.ts
@@ -0,0 +1,302 @@
+import { test, expect, type Page, type Locator } from '@playwright/test';
+
+function example(page: Page, testId: string): Locator {
+  return page.getByTestId(testId);
+}
+
+async function selectOption(
+  wrapper: Locator,
+  page: Page,
+  optionName: string
+): Promise<void> {
+  await wrapper.click();
+  await page.getByRole('option', { name: optionName }).click();
+}
+
+test.describe('cps-select', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/select');
+  });
+
+  test.describe('Required single select with tooltip', () => {
+    test('selects and re-selects an option', async ({ page }) => {
+      const wrapper = example(page, 'required-select');
+      const container = wrapper.getByTestId('cps-select-container');
+
+      await expect(container).toHaveAttribute('role', 'combobox');
+      await expect(container).toHaveAttribute('aria-expanded', 'false');
+
+      await wrapper.click();
+      await expect(container).toHaveAttribute('aria-expanded', 'true');
+      await expect(page.getByTestId('cps-select-listbox')).toHaveAttribute(
+        'role',
+        'listbox'
+      );
+      await expect(
+        page.getByTestId('cps-select-option').first()
+      ).toHaveAttribute('role', 'option');
+
+      await page.getByRole('option', { name: 'Rome' }).click();
+      await expect(wrapper.getByTestId('cps-select-selected-value')).toHaveText(
+        'Rome'
+      );
+
+      await selectOption(wrapper, page, 'Prague');
+      await expect(wrapper.getByTestId('cps-select-selected-value')).toHaveText(
+        'Prague'
+      );
+    });
+
+    test('clearing shows the required error and marks the control invalid', async ({
+      page
+    }) => {
+      const wrapper = example(page, 'required-select');
+
+      await wrapper.getByTestId('cps-select-clear-icon').click();
+      await page.locator('body').click({ position: { x: 0, y: 0 } });
+
+      await expect(wrapper.getByTestId('cps-select-error')).toHaveText(
+        'Field is required'
+      );
+      await expect(
+        wrapper.getByTestId('cps-select-selected-value')
+      ).toHaveCount(0);
+      await expect(wrapper.getByTestId('cps-select-container')).toHaveAttribute(
+        'aria-invalid',
+        'true'
+      );
+      await expect(wrapper.getByTestId('cps-select-container')).toHaveAttribute(
+        'aria-required',
+        'true'
+      );
+    });
+  });
+
+  test.describe('Loading select', () => {
+    test('shows a loading bar and still opens', async ({ page }) => {
+      const wrapper = example(page, 'loading-select');
+
+      await expect(wrapper.getByTestId('cps-select-loading-bar')).toBeVisible();
+
+      await wrapper.click();
+      await expect(page.getByTestId('cps-select-listbox')).toBeVisible();
+    });
+  });
+
+  test.describe('Disabled select', () => {
+    test('does not open the dropdown', async ({ page }) => {
+      const wrapper = example(page, 'disabled-select');
+
+      await wrapper.click({ force: true });
+      await expect(page.getByTestId('cps-select-listbox')).toBeHidden();
+      await expect(wrapper.getByTestId('cps-select-container')).toHaveAttribute(
+        'aria-disabled',
+        'true'
+      );
+    });
+  });
+
+  test.describe('Multiple, not clearable, plain text', () => {
+    test('renders combined text instead of chips and hides the clear icon', async ({
+      page
+    }) => {
+      const wrapper = example(page, 'multiple-select');
+
+      await expect(wrapper.locator('cps-chip')).toHaveCount(0);
+      await expect(
+        wrapper.getByTestId('cps-select-selected-text-item')
+      ).toBeVisible();
+      await expect(wrapper.getByTestId('cps-select-clear-icon')).toHaveCount(0);
+    });
+  });
+
+  test.describe('Virtual scroll', () => {
+    test('opens with a virtualized list, always shows the clear icon, and hides select-all', async ({
+      page
+    }) => {
+      const wrapper = example(page, 'virtual-scroll-select');
+
+      await expect(wrapper.getByTestId('cps-select-clear-icon')).toBeVisible();
+
+      await wrapper.click();
+      await expect(page.locator('.p-virtualscroller')).toBeVisible();
+      await expect(page.getByTestId('cps-select-select-all')).toHaveCount(0);
+    });
+
+    test('arrow keys highlight a real virtualized option', async ({ page }) => {
+      const wrapper = example(page, 'virtual-scroll-select');
+
+      await wrapper.click();
+      await expect(page.locator('.p-virtualscroller')).toBeVisible();
+      await page.keyboard.press('ArrowDown');
+      await expect(
+        page.locator('[data-testid="cps-select-option"].highlighten')
+      ).toHaveCount(1);
+    });
+  });
+
+  test.describe('Multiple with non-closable chips', () => {
+    test('chips have no remove button and the chevron is hidden', async ({
+      page
+    }) => {
+      const wrapper = example(page, 'non-closable-chips-select');
+
+      await expect(wrapper.locator('cps-chip')).toHaveCount(2);
+      await expect(
+        wrapper.locator('cps-chip').first().getByRole('button')
+      ).toHaveCount(0);
+      await expect(wrapper.getByTestId('cps-select-chevron')).toHaveCount(0);
+    });
+
+    test('select all toggles every option as a chip', async ({ page }) => {
+      const wrapper = example(page, 'non-closable-chips-select');
+
+      await wrapper.click();
+      const selectAll = page.getByTestId('cps-select-select-all');
+      await expect(selectAll).toBeVisible();
+
+      const optionCount = await page.getByTestId('cps-select-option').count();
+      await selectAll.click();
+      await expect(wrapper.locator('cps-chip')).toHaveCount(optionCount);
+      await expect(selectAll).toHaveAttribute('aria-selected', 'true');
+
+      await selectAll.click();
+      await expect(wrapper.locator('cps-chip')).toHaveCount(0);
+    });
+  });
+
+  test.describe('Multiple with prefix icon', () => {
+    test('shows the prefix icon', async ({ page }) => {
+      const wrapper = example(page, 'prefix-icon-select');
+
+      await expect(wrapper.getByTestId('cps-select-prefix-icon')).toBeVisible();
+    });
+  });
+
+  test.describe('Single select with option icons', () => {
+    test('selecting an option renders its real icon', async ({ page }) => {
+      const wrapper = example(page, 'icons-select');
+
+      await selectOption(wrapper, page, 'Success');
+      await expect(wrapper.getByTestId('cps-select-selected-value')).toHaveText(
+        'Success'
+      );
+
+      await wrapper.click();
+      await expect(
+        page
+          .getByTestId('cps-select-option')
+          .filter({ hasText: 'Warning' })
+          .locator('cps-icon')
+      ).toBeVisible();
+    });
+  });
+
+  test.describe('Two-way ngModel binding', () => {
+    test('selection reflects into the bound model and keeps initial order', async ({
+      page
+    }) => {
+      const wrapper = example(page, 'two-way-binding-select');
+
+      await selectOption(wrapper, page, 'Tesla');
+      await selectOption(wrapper, page, 'Amazon');
+
+      await expect(page.locator('.sync-val')).toHaveText('AMZN,TSLA');
+      const chipTexts = await wrapper.locator('cps-chip').allTextContents();
+      expect(chipTexts).toEqual(['Amazon', 'Tesla']);
+    });
+  });
+
+  test.describe('Appearance variants', () => {
+    test('underlined and borderless apply their respective classes', async ({
+      page
+    }) => {
+      await expect(
+        example(page, 'underlined-select').getByTestId('cps-select-container')
+      ).toHaveClass(/underlined/);
+      await expect(
+        example(page, 'borderless-select').getByTestId('cps-select-container')
+      ).toHaveClass(/borderless/);
+    });
+  });
+
+  test.describe('Clear without reopening', () => {
+    test('does not reopen the dropdown after clearing', async ({ page }) => {
+      const wrapper = example(page, 'open-on-clear-false-select');
+
+      await wrapper.getByTestId('cps-select-clear-icon').click();
+      await expect(wrapper.getByTestId('cps-select-container')).toBeFocused();
+      await expect(page.getByTestId('cps-select-listbox')).toBeHidden();
+    });
+  });
+
+  test.describe('Hidden hint and error details', () => {
+    test('never renders hint or error text', async ({ page }) => {
+      const wrapper = example(page, 'hide-details-select');
+
+      await expect(wrapper.getByTestId('cps-select-hint')).toHaveCount(0);
+
+      await wrapper.click();
+      await page.locator('body').click({ position: { x: 0, y: 0 } });
+
+      await expect(wrapper.getByTestId('cps-select-error')).toHaveCount(0);
+    });
+  });
+
+  test.describe('Keyboard navigation', () => {
+    test('ArrowDown opens, then ArrowDown/ArrowUp highlight and wrap around', async ({
+      page
+    }) => {
+      const wrapper = example(page, 'icons-select');
+      const container = wrapper.getByTestId('cps-select-container');
+      const firstOption = page.getByTestId('cps-select-option').first();
+      const lastOption = page.getByTestId('cps-select-option').last();
+
+      await container.focus();
+      await page.keyboard.press('ArrowDown');
+      await expect(page.getByTestId('cps-select-listbox')).toBeVisible();
+
+      await page.keyboard.press('ArrowDown');
+      await expect(firstOption).toHaveClass(/highlighten/);
+
+      await page.keyboard.press('ArrowUp');
+      await expect(lastOption).toHaveClass(/highlighten/);
+      await expect(firstOption).not.toHaveClass(/highlighten/);
+    });
+
+    test('Enter selects the highlighted option and closes the dropdown', async ({
+      page
+    }) => {
+      const wrapper = example(page, 'icons-select');
+      const container = wrapper.getByTestId('cps-select-container');
+
+      await container.focus();
+      await page.keyboard.press('ArrowDown');
+      await page.keyboard.press('ArrowDown');
+      await page.keyboard.press('Enter');
+
+      await expect(wrapper.getByTestId('cps-select-selected-value')).toHaveText(
+        'Success'
+      );
+      await expect(page.getByTestId('cps-select-listbox')).toBeHidden();
+    });
+
+    test('Space also opens the dropdown when closed', async ({ page }) => {
+      const wrapper = example(page, 'icons-select');
+      const container = wrapper.getByTestId('cps-select-container');
+
+      await container.focus();
+      await page.keyboard.press('Space');
+      await expect(page.getByTestId('cps-select-listbox')).toBeVisible();
+    });
+
+    test('Escape closes the dropdown', async ({ page }) => {
+      const wrapper = example(page, 'required-select');
+
+      await wrapper.click();
+      await expect(page.getByTestId('cps-select-listbox')).toBeVisible();
+      await page.keyboard.press('Escape');
+      await expect(page.getByTestId('cps-select-listbox')).toBeHidden();
+    });
+  });
+});
diff --git a/projects/composition/src/app/pages/select-page/select-page.component.html b/projects/composition/src/app/pages/select-page/select-page.component.html
index 59167351d..cdeeb7536 100644
--- a/projects/composition/src/app/pages/select-page/select-page.component.html
+++ b/projects/composition/src/app/pages/select-page/select-page.component.html
@@ -7,6 +7,7 @@
     <form [formGroup]="form">
       <cps-select
         label="Required single select with a tooltip"
+        data-testid="required-select"
         [options]="options"
         optionLabel="name"
         optionInfo="info"
@@ -24,6 +25,7 @@
     [tsCode]="examples.loadingSelect.ts">
     <cps-select
       label="Loading select"
+      data-testid="loading-select"
       [loading]="true"
       [options]="options"
       optionLabel="name"
@@ -36,6 +38,7 @@
     [htmlCode]="examples.disabledSelect.html">
     <cps-select
       label="Disabled select"
+      data-testid="disabled-select"
       [disabled]="true"
       hint="This select is disabled">
     </cps-select>
@@ -47,6 +50,7 @@
     [tsCode]="examples.multipleSelect.ts">
     <cps-select
       label="Multiple select"
+      data-testid="multiple-select"
       [options]="options"
       optionLabel="name"
       optionValue="data"
@@ -66,6 +70,7 @@
     [tsCode]="examples.virtualScrollSelect.ts">
     <cps-select
       label="Multiple select with virtual scroll, chips and persistent clear icon"
+      data-testid="virtual-scroll-select"
       hint="This select doesn't have Select All option"
       [selectAll]="false"
       [virtualScroll]="true"
@@ -85,6 +90,7 @@
     [tsCode]="examples.nonClosableChipsSelect.ts">
     <cps-select
       label="Multiple select with non-closable chips"
+      data-testid="non-closable-chips-select"
       [returnObject]="false"
       [options]="options"
       optionLabel="name"
@@ -105,6 +111,7 @@
     [tsCode]="examples.prefixIconSelect.ts">
     <cps-select
       label="Multiple select with prefix icon"
+      data-testid="prefix-icon-select"
       [options]="options"
       optionLabel="name"
       optionInfo="info"
@@ -123,6 +130,7 @@
     [tsCode]="examples.iconsSelect.ts">
     <cps-select
       label="Single select with options icons"
+      data-testid="icons-select"
       [options]="statusOptions"
       optionLabel="name"
       optionIconColor="color"
@@ -138,6 +146,7 @@
       <cps-select
         width="31.25rem"
         label="Multiple select with two-way binding and keeping initial items order"
+        data-testid="two-way-binding-select"
         [returnObject]="false"
         [options]="syncOptions"
         [keepInitialOrder]="true"
@@ -161,6 +170,7 @@
     [tsCode]="examples.underlinedSelect.ts">
     <cps-select
       label="Underlined select"
+      data-testid="underlined-select"
       [options]="options"
       optionLabel="name"
       optionInfo="info"
@@ -178,6 +188,7 @@
     [tsCode]="examples.borderlessSelect.ts">
     <cps-select
       label="Borderless select"
+      data-testid="borderless-select"
       [options]="options"
       optionLabel="name"
       optionInfo="info"
@@ -188,4 +199,40 @@
       appearance="borderless">
     </cps-select>
   </app-code-example>
+
+  <app-code-example
+    label="Multiple select with hidden details"
+    [htmlCode]="examples.hideDetailsSelect.html"
+    [tsCode]="examples.hideDetailsSelect.ts">
+    <form [formGroup]="form">
+      <cps-select
+        label="Required select without hint or error text"
+        data-testid="hide-details-select"
+        hint="This hint is never shown because hideDetails is true"
+        [options]="options"
+        optionLabel="name"
+        optionInfo="info"
+        [clearable]="true"
+        [hideDetails]="true"
+        formControlName="hideDetailsSelect">
+      </cps-select>
+    </form>
+  </app-code-example>
+
+  <app-code-example
+    label="Select without reopening on clear"
+    [htmlCode]="examples.openOnClearSelect.html"
+    [tsCode]="examples.openOnClearSelect.ts">
+    <cps-select
+      data-testid="open-on-clear-false-select"
+      label="Select that stays closed after clearing"
+      hint="Clearing this select does not reopen the dropdown"
+      [options]="options"
+      optionLabel="name"
+      optionInfo="info"
+      [clearable]="true"
+      [openOnClear]="false"
+      [value]="openOnClearValue">
+    </cps-select>
+  </app-code-example>
 </app-component-docs-viewer>
diff --git a/projects/composition/src/app/pages/select-page/select-page.component.ts b/projects/composition/src/app/pages/select-page/select-page.component.ts
index 3c3ea63dc..ae3bce6e0 100644
--- a/projects/composition/src/app/pages/select-page/select-page.component.ts
+++ b/projects/composition/src/app/pages/select-page/select-page.component.ts
@@ -60,6 +60,7 @@ export class SelectPageComponent implements OnInit {
 
   form!: UntypedFormGroup;
   syncVal: string[] = [];
+  openOnClearValue = this.options[3];
   componentData = ComponentData;
 
   // eslint-disable-next-line no-useless-constructor
@@ -67,7 +68,8 @@ export class SelectPageComponent implements OnInit {
 
   ngOnInit(): void {
     this.form = this._formBuilder.group({
-      requiredSelect: [this.options[1], [Validators.required]]
+      requiredSelect: [this.options[1], [Validators.required]],
+      hideDetailsSelect: [null, [Validators.required]]
     });
   }
 }
diff --git a/projects/composition/src/app/pages/select-page/select-page.examples.ts b/projects/composition/src/app/pages/select-page/select-page.examples.ts
index d5e9ba02c..0dded80a2 100644
--- a/projects/composition/src/app/pages/select-page/select-page.examples.ts
+++ b/projects/composition/src/app/pages/select-page/select-page.examples.ts
@@ -216,5 +216,51 @@ syncVal: string[] = [];`
   appearance="borderless">
 </cps-select>`,
     ts: citiesOptionsTs
+  },
+
+  hideDetailsSelect: {
+    html: `
+<form [formGroup]="form">
+  <cps-select
+    label="Required select without hint or error text"
+    hint="This hint is never shown because hideDetails is true"
+    [options]="options"
+    optionLabel="name"
+    optionInfo="info"
+    [clearable]="true"
+    [hideDetails]="true"
+    formControlName="hideDetailsSelect">
+  </cps-select>
+</form>`,
+    ts: `
+private readonly _formBuilder = inject(UntypedFormBuilder);
+
+${citiesOptionsTs.trim()}
+
+form!: UntypedFormGroup;
+
+ngOnInit(): void {
+  this.form = this._formBuilder.group({
+    hideDetailsSelect: [null, [Validators.required]]
+  });
+}`
+  },
+
+  openOnClearSelect: {
+    html: `
+<cps-select
+  label="Select that stays closed after clearing"
+  hint="Clearing this select does not reopen the dropdown"
+  [options]="options"
+  optionLabel="name"
+  optionInfo="info"
+  [clearable]="true"
+  [openOnClear]="false"
+  [value]="openOnClearValue">
+</cps-select>`,
+    ts: `
+${citiesOptionsTs.trim()}
+
+openOnClearValue = this.options[3];`
   }
 };
diff --git a/projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.html b/projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.html
index a353c3daa..4f747f568 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.html
+++ b/projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.html
@@ -1,9 +1,11 @@
 <div
-  [ngStyle]="{ width: cvtWidth }"
+  [style.width]="cvtWidth"
   class="cps-select"
-  [ngClass]="{ disabled: disabled, error: error }">
+  data-testid="cps-select"
+  [class.disabled]="disabled"
+  [class.error]="error">
   @if (label) {
-    <div class="cps-select-label">
+    <div class="cps-select-label" data-testid="cps-select-label">
       <label>{{ label }}</label>
       @if (infoTooltip) {
         <cps-info-circle
@@ -20,6 +22,7 @@
   }
   <div
     class="cps-select-container"
+    data-testid="cps-select-container"
     [tabindex]="disabled ? -1 : 0"
     role="combobox"
     aria-haspopup="listbox"
@@ -32,35 +35,40 @@
     [attr.aria-label]="ariaLabel || label || null"
     [attr.aria-describedby]="describedBy"
     [attr.aria-disabled]="disabled || null"
-    [ngClass]="{
-      'persistent-clear': persistentClear,
-      borderless: appearance === 'borderless',
-      underlined: appearance === 'underlined',
-      active: isOpened,
-      focused: isActive
-    }"
+    [class.persistent-clear]="persistentClear"
+    [class.borderless]="appearance === 'borderless'"
+    [class.underlined]="appearance === 'underlined'"
+    [class.active]="isOpened"
+    [class.focused]="isActive"
     #selectContainer
     (keydown)="onContainerKeyDown($event)"
     (focus)="onFocus()"
     (blur)="onBlur()">
-    <div class="cps-select-box" #selectBox (mousedown)="onBoxClick()">
+    <div
+      class="cps-select-box"
+      data-testid="cps-select-box"
+      #selectBox
+      (mousedown)="onBoxClick()">
       <div class="cps-select-box-left">
         @if (prefixIcon) {
           <cps-icon
             [icon]="prefixIcon"
             [style.color]="disabled ? '#9a9595' : null"
             [size]="prefixIconSize"
-            class="prefix-icon">
+            class="prefix-icon"
+            data-testid="cps-select-prefix-icon">
           </cps-icon>
         }
         @if (!hasSelectedValue()) {
-          <div class="cps-select-box-placeholder">
+          <div
+            class="cps-select-box-placeholder"
+            data-testid="cps-select-placeholder">
             {{ placeholder }}
           </div>
         } @else {
           <div class="cps-select-box-items">
             @if (!multiple) {
-              <span class="single-item">
+              <span class="single-item" data-testid="cps-select-selected-value">
                 {{
                   returnObject
                     ? value[optionLabel]
@@ -71,7 +79,10 @@
             }
             @if (multiple && !chips) {
               <div class="text-group" role="list" aria-label="Selected options">
-                <span class="text-group-item" role="listitem">
+                <span
+                  class="text-group-item"
+                  role="listitem"
+                  data-testid="cps-select-selected-text-item">
                   {{
                     value
                       | combineLabels
@@ -113,9 +124,10 @@
           <span
             role="button"
             aria-label="Clear selection"
+            data-testid="cps-select-clear-icon"
             [tabindex]="disabled ? -1 : 0"
             (click)="clear($event)"
-            (mousedown)="$event.preventDefault()"
+            (mousedown)="$event.stopPropagation(); $event.preventDefault()"
             (keydown.enter)="clear($event)"
             (keydown.space)="clear($event)"
             [style.visibility]="
@@ -130,6 +142,7 @@
         @if (showChevron) {
           <span
             class="cps-select-box-chevron"
+            data-testid="cps-select-chevron"
             role="button"
             [attr.aria-label]="isOpened ? 'Collapse options' : 'Expand options'"
             [tabindex]="disabled ? -1 : 0"
@@ -154,6 +167,7 @@
       <div
         #optionsList
         [id]="optionsListId"
+        data-testid="cps-select-listbox"
         role="listbox"
         tabindex="-1"
         aria-readonly="false"
@@ -166,6 +180,7 @@
           @if (multiple && selectAll && options.length > 1) {
             <div
               class="cps-select-options-option select-all-option"
+              data-testid="cps-select-select-all"
               [id]="selectAllOptionId"
               role="option"
               tabindex="-1"
@@ -228,17 +243,21 @@
         radius="0.25rem"
         opacity="0.3"
         class="select-progress-bar"
+        data-testid="cps-select-loading-bar"
         bgColor="transparent">
       </cps-progress-linear>
     }
   </div>
   @if (!error && !hideDetails) {
-    <div [id]="hintId" class="cps-select-hint">{{ hint }}</div>
+    <div [id]="hintId" class="cps-select-hint" data-testid="cps-select-hint">
+      {{ hint }}
+    </div>
   }
   @if (error && !hideDetails) {
     <div
       [id]="errorId"
       class="cps-select-error"
+      data-testid="cps-select-error"
       aria-live="polite"
       aria-atomic="true">
       {{ error }}
@@ -249,6 +268,7 @@
 <ng-template #itemTemplate let-item="item" let-itemIdx="itemIdx">
   <div
     class="cps-select-options-option"
+    data-testid="cps-select-option"
     [id]="getOptionId(item, itemIdx)"
     role="option"
     tabindex="-1"
@@ -273,6 +293,7 @@
       }
       <span
         class="cps-select-options-option-label"
+        data-testid="cps-select-option-label"
         [class.virtual-row]="virtualScroll"
         >{{ item[optionLabel] }}</span
       >