diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 8f26aaa191..088714a670 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -164,3 +164,180 @@ jobs:
     - run: npm run build:storage:lite
     - run: npm run test:sync
     - run: npm run test:sync:schematics
+
+  # Detecta quais arquivos mudaram para decidir se roda testes visuais
+  changes:
+    name: Detect changes
+    runs-on: ubuntu-latest
+    if: github.event_name == 'pull_request'
+    outputs:
+      visual: ${{ steps.filter.outputs.visual }}
+    steps:
+    - uses: actions/checkout@v3
+    - uses: dorny/paths-filter@v3
+      id: filter
+      with:
+        filters: |
+          visual:
+            - 'e2e/visual/**'
+            - 'projects/ui/src/lib/**'
+            - 'package.json'
+            - 'playwright.config.ts'
+            - 'angular.json'
+            - '.github/workflows/ci.yml'
+
+  test-visual:
+    name: Test visual regression
+    needs: changes
+    # Roda sempre em push (master/development) e em PRs apenas se arquivos relevantes mudaram
+    # Usa always() para garantir que roda em push mesmo quando o job 'changes' foi skipped
+    if: always() && !cancelled() && (github.event_name == 'push' || needs.changes.outputs.visual == 'true')
+
+    runs-on: ubuntu-latest
+
+    steps:
+
+    - uses: actions/checkout@v3
+
+    - uses: actions/setup-node@v3
+      with:
+        node-version: 24
+
+    # Cache de node_modules para evitar npm install do zero a cada execucao
+    - name: Cache node_modules
+      id: cache-node-modules
+      uses: actions/cache@v4
+      with:
+        path: node_modules
+        key: node-modules-${{ runner.os }}-${{ hashFiles('package.json') }}
+
+    # Cache dos browsers do Playwright para evitar download a cada execucao
+    - name: Cache Playwright browsers
+      id: cache-playwright
+      uses: actions/cache@v4
+      with:
+        path: ~/.cache/ms-playwright
+        key: playwright-browsers-${{ runner.os }}-${{ hashFiles('package.json') }}
+
+    # Detecta o nome da branch atual
+    - name: Get branch name
+      id: branch
+      env:
+        HEAD_REF: ${{ github.head_ref }}
+        REF_NAME: ${{ github.ref_name }}
+        EVENT_NAME: ${{ github.event_name }}
+      run: |
+        if [ "$EVENT_NAME" = "pull_request" ]; then
+          BRANCH_NAME="$HEAD_REF"
+        else
+          BRANCH_NAME="$REF_NAME"
+        fi
+        echo "name=$BRANCH_NAME" >> $GITHUB_OUTPUT
+        echo "Branch name: $BRANCH_NAME"
+
+    # Verifica se existe uma branch de mesmo nome no po-style
+    - name: Check for matching po-style branch
+      id: po_style
+      env:
+        BRANCH_NAME: ${{ steps.branch.outputs.name }}
+      run: |
+        ENCODED_BRANCH=$(echo "$BRANCH_NAME" | sed 's|/|%2F|g')
+        HTTP_STATUS=$(curl -s -o /dev/null -w "%{http_code}" \
+          "https://api.github.com/repos/po-ui/po-style/branches/$ENCODED_BRANCH")
+        if [ "$HTTP_STATUS" = "200" ]; then
+          echo "found=true" >> $GITHUB_OUTPUT
+          echo "Branch '$BRANCH_NAME' encontrada no po-style"
+        else
+          echo "found=false" >> $GITHUB_OUTPUT
+          echo "Branch '$BRANCH_NAME' nao encontrada no po-style (HTTP $HTTP_STATUS), usando @po-ui/style do npm"
+        fi
+
+    # Se encontrou a branch, clona po-style, builda e gera o tgz
+    - name: Build po-style from matching branch
+      if: steps.po_style.outputs.found == 'true'
+      env:
+        BRANCH_NAME: ${{ steps.branch.outputs.name }}
+      run: |
+        git clone --branch "$BRANCH_NAME" --depth 1 https://github.com/po-ui/po-style.git /tmp/po-style
+        cd /tmp/po-style
+        npm ci
+        npm run build
+        npm run pack:style
+        echo "TGZ gerado:"
+        ls -la dist/style/*.tgz
+
+    # Instala dependencias do po-angular (skip se cache hit)
+    - name: Install dependencies
+      if: steps.cache-node-modules.outputs.cache-hit != 'true'
+      run: npm i
+
+    # Se o cache de node_modules foi restaurado mas NAO existe branch po-style,
+    # reinstala @po-ui/style do npm para evitar versao stale de um tgz anterior
+    - name: Ensure clean po-style from npm
+      if: steps.cache-node-modules.outputs.cache-hit == 'true' && steps.po_style.outputs.found != 'true'
+      run: npm install @po-ui/style@$(node -p "require('./package.json').dependencies['@po-ui/style']")
+
+    # Se tiver o tgz do po-style, instala por cima da versao do npm
+    - name: Install po-style from tgz
+      if: steps.po_style.outputs.found == 'true'
+      run: |
+        TGZ_PATH=$(ls /tmp/po-style/dist/style/*.tgz)
+        echo "Instalando @po-ui/style a partir de: $TGZ_PATH"
+        npm install "$TGZ_PATH"
+
+    # Cache do build da lib UI para evitar rebuild a cada execucao
+    - name: Cache UI build
+      id: cache-ui-build
+      uses: actions/cache@v4
+      with:
+        path: dist/ng-components
+        key: ui-build-${{ runner.os }}-${{ hashFiles('projects/ui/src/**', 'package.json') }}
+
+    - name: Build UI library
+      if: steps.cache-ui-build.outputs.cache-hit != 'true'
+      run: npm run build:ui:lite
+
+    # Instala dependencias de sistema do Playwright (sempre necessario, mesmo com cache de browsers)
+    - name: Install Playwright system deps
+      run: npx playwright install-deps chromium
+
+    # Instala browsers do Playwright (skip se cache hit)
+    - name: Install Playwright browsers
+      if: steps.cache-playwright.outputs.cache-hit != 'true'
+      run: npx playwright install chromium
+
+    # Cache de baselines geradas no ambiente CI (sem restore-keys para evitar matches parciais stale)
+    - name: Restore visual regression baselines from cache
+      id: baselines-cache
+      uses: actions/cache@v4
+      with:
+        path: e2e/visual/__snapshots__
+        key: visual-baselines-${{ runner.os }}-${{ hashFiles('e2e/visual/**/*.visual.spec.ts', 'e2e/visual/**/*.component.html') }}
+
+    # Se nao encontrou baselines no cache, regenera todas para o ambiente CI (Linux)
+    # Usa --update-snapshots para sobrescrever baselines commitadas (geradas em outro OS)
+    - name: Generate baselines for CI environment
+      if: steps.baselines-cache.outputs.cache-hit != 'true'
+      run: npx playwright test --update-snapshots --reporter=list
+
+    # Executa os testes visuais comparando com as baselines
+    - name: Run visual regression tests
+      run: npx playwright test
+
+    # Disponibiliza o relatorio HTML do Playwright como artefato
+    - name: Upload visual regression report
+      uses: actions/upload-artifact@v4
+      if: ${{ !cancelled() }}
+      with:
+        name: visual-regression-report
+        path: e2e/visual/playwright-report/
+        retention-days: 15
+
+    # Disponibiliza os resultados de teste (diffs, screenshots) como artefato
+    - name: Upload visual regression test results
+      uses: actions/upload-artifact@v4
+      if: ${{ !cancelled() }}
+      with:
+        name: visual-regression-test-results
+        path: e2e/visual/test-results/
+        retention-days: 15
diff --git a/.gitignore b/.gitignore
index f5845ba342..a9287aee48 100644
--- a/.gitignore
+++ b/.gitignore
@@ -49,6 +49,10 @@ testem.log
 .scannerwork
 .env
 
+# Playwright
+/e2e/visual/test-results/
+/e2e/visual/playwright-report/
+
 # System Files
 .DS_Store
 Thumbs.db
diff --git a/angular.json b/angular.json
index e64238d454..28ffefd39e 100644
--- a/angular.json
+++ b/angular.json
@@ -266,6 +266,46 @@
         }
       }
     },
+    "visual-app": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "e2e/visual",
+      "sourceRoot": "e2e/visual",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:application",
+          "options": {
+            "outputPath": {
+              "base": "dist/visual-app"
+            },
+            "index": "e2e/visual/app/index.html",
+            "polyfills": ["e2e/visual/app/polyfills.ts"],
+            "tsConfig": "e2e/visual/tsconfig.visual.json",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "node_modules/@po-ui/style/images",
+                "output": "/assets/images"
+              }
+            ],
+            "styles": ["./node_modules/@po-ui/style/css/po-theme-default.min.css"],
+            "scripts": [],
+            "extractLicenses": false,
+            "sourceMap": true,
+            "optimization": false,
+            "namedChunks": true,
+            "browser": "e2e/visual/app/main.ts"
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "buildTarget": "visual-app:build"
+          }
+        }
+      }
+    },
     "portal": {
       "projectType": "application",
       "schematics": {},
diff --git a/e2e/visual/__snapshots__/fields/po-checkbox-group/po-checkbox-group-states.visual.spec.ts-snapshots/po-checkbox-group-state-basic-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-checkbox-group/po-checkbox-group-states.visual.spec.ts-snapshots/po-checkbox-group-state-basic-chromium-linux.png
new file mode 100644
index 0000000000..585a5b5491
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-checkbox-group/po-checkbox-group-states.visual.spec.ts-snapshots/po-checkbox-group-state-basic-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-checkbox-group/po-checkbox-group-states.visual.spec.ts-snapshots/po-checkbox-group-state-disabled-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-checkbox-group/po-checkbox-group-states.visual.spec.ts-snapshots/po-checkbox-group-state-disabled-chromium-linux.png
new file mode 100644
index 0000000000..4824f66439
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-checkbox-group/po-checkbox-group-states.visual.spec.ts-snapshots/po-checkbox-group-state-disabled-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-checkbox-group/po-checkbox-group-states.visual.spec.ts-snapshots/po-checkbox-group-state-label-help-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-checkbox-group/po-checkbox-group-states.visual.spec.ts-snapshots/po-checkbox-group-state-label-help-chromium-linux.png
new file mode 100644
index 0000000000..a7762ed4e6
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-checkbox-group/po-checkbox-group-states.visual.spec.ts-snapshots/po-checkbox-group-state-label-help-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-checkbox-group/po-checkbox-group-states.visual.spec.ts-snapshots/po-checkbox-group-state-label-helper-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-checkbox-group/po-checkbox-group-states.visual.spec.ts-snapshots/po-checkbox-group-state-label-helper-chromium-linux.png
new file mode 100644
index 0000000000..31c16f2385
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-checkbox-group/po-checkbox-group-states.visual.spec.ts-snapshots/po-checkbox-group-state-label-helper-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-checkbox-group/po-checkbox-group-states.visual.spec.ts-snapshots/po-checkbox-group-state-required-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-checkbox-group/po-checkbox-group-states.visual.spec.ts-snapshots/po-checkbox-group-state-required-chromium-linux.png
new file mode 100644
index 0000000000..afe67e8a57
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-checkbox-group/po-checkbox-group-states.visual.spec.ts-snapshots/po-checkbox-group-state-required-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-checkbox/po-checkbox-states.visual.spec.ts-snapshots/po-checkbox-state-basic-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-checkbox/po-checkbox-states.visual.spec.ts-snapshots/po-checkbox-state-basic-chromium-linux.png
new file mode 100644
index 0000000000..5fe06d47c1
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-checkbox/po-checkbox-states.visual.spec.ts-snapshots/po-checkbox-state-basic-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-checkbox/po-checkbox-states.visual.spec.ts-snapshots/po-checkbox-state-disabled-checked-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-checkbox/po-checkbox-states.visual.spec.ts-snapshots/po-checkbox-state-disabled-checked-chromium-linux.png
new file mode 100644
index 0000000000..cacda56b41
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-checkbox/po-checkbox-states.visual.spec.ts-snapshots/po-checkbox-state-disabled-checked-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-checkbox/po-checkbox-states.visual.spec.ts-snapshots/po-checkbox-state-disabled-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-checkbox/po-checkbox-states.visual.spec.ts-snapshots/po-checkbox-state-disabled-chromium-linux.png
new file mode 100644
index 0000000000..a83aaaec83
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-checkbox/po-checkbox-states.visual.spec.ts-snapshots/po-checkbox-state-disabled-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-checkbox/po-checkbox-states.visual.spec.ts-snapshots/po-checkbox-state-label-help-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-checkbox/po-checkbox-states.visual.spec.ts-snapshots/po-checkbox-state-label-help-chromium-linux.png
new file mode 100644
index 0000000000..0974a20c4f
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-checkbox/po-checkbox-states.visual.spec.ts-snapshots/po-checkbox-state-label-help-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-checkbox/po-checkbox-states.visual.spec.ts-snapshots/po-checkbox-state-required-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-checkbox/po-checkbox-states.visual.spec.ts-snapshots/po-checkbox-state-required-chromium-linux.png
new file mode 100644
index 0000000000..2b4e224d48
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-checkbox/po-checkbox-states.visual.spec.ts-snapshots/po-checkbox-state-required-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-combo/po-combo-states.visual.spec.ts-snapshots/po-combo-state-basic-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-combo/po-combo-states.visual.spec.ts-snapshots/po-combo-state-basic-chromium-linux.png
new file mode 100644
index 0000000000..9e06dbf330
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-combo/po-combo-states.visual.spec.ts-snapshots/po-combo-state-basic-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-combo/po-combo-states.visual.spec.ts-snapshots/po-combo-state-disabled-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-combo/po-combo-states.visual.spec.ts-snapshots/po-combo-state-disabled-chromium-linux.png
new file mode 100644
index 0000000000..1e42057596
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-combo/po-combo-states.visual.spec.ts-snapshots/po-combo-state-disabled-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-combo/po-combo-states.visual.spec.ts-snapshots/po-combo-state-label-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-combo/po-combo-states.visual.spec.ts-snapshots/po-combo-state-label-chromium-linux.png
new file mode 100644
index 0000000000..22588a8520
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-combo/po-combo-states.visual.spec.ts-snapshots/po-combo-state-label-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-combo/po-combo-states.visual.spec.ts-snapshots/po-combo-state-label-help-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-combo/po-combo-states.visual.spec.ts-snapshots/po-combo-state-label-help-chromium-linux.png
new file mode 100644
index 0000000000..ea2aeb7350
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-combo/po-combo-states.visual.spec.ts-snapshots/po-combo-state-label-help-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-combo/po-combo-states.visual.spec.ts-snapshots/po-combo-state-label-helper-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-combo/po-combo-states.visual.spec.ts-snapshots/po-combo-state-label-helper-chromium-linux.png
new file mode 100644
index 0000000000..140b901c21
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-combo/po-combo-states.visual.spec.ts-snapshots/po-combo-state-label-helper-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-combo/po-combo-states.visual.spec.ts-snapshots/po-combo-state-required-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-combo/po-combo-states.visual.spec.ts-snapshots/po-combo-state-required-chromium-linux.png
new file mode 100644
index 0000000000..d621082332
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-combo/po-combo-states.visual.spec.ts-snapshots/po-combo-state-required-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-combo/po-combo-states.visual.spec.ts-snapshots/po-combo-state-required-error-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-combo/po-combo-states.visual.spec.ts-snapshots/po-combo-state-required-error-chromium-linux.png
new file mode 100644
index 0000000000..d63073b967
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-combo/po-combo-states.visual.spec.ts-snapshots/po-combo-state-required-error-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-datepicker-range/po-datepicker-range-states.visual.spec.ts-snapshots/po-datepicker-range-state-basic-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-datepicker-range/po-datepicker-range-states.visual.spec.ts-snapshots/po-datepicker-range-state-basic-chromium-linux.png
new file mode 100644
index 0000000000..da9453a409
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-datepicker-range/po-datepicker-range-states.visual.spec.ts-snapshots/po-datepicker-range-state-basic-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-datepicker-range/po-datepicker-range-states.visual.spec.ts-snapshots/po-datepicker-range-state-disabled-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-datepicker-range/po-datepicker-range-states.visual.spec.ts-snapshots/po-datepicker-range-state-disabled-chromium-linux.png
new file mode 100644
index 0000000000..f6f38834aa
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-datepicker-range/po-datepicker-range-states.visual.spec.ts-snapshots/po-datepicker-range-state-disabled-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-datepicker-range/po-datepicker-range-states.visual.spec.ts-snapshots/po-datepicker-range-state-label-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-datepicker-range/po-datepicker-range-states.visual.spec.ts-snapshots/po-datepicker-range-state-label-chromium-linux.png
new file mode 100644
index 0000000000..d3feefe70e
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-datepicker-range/po-datepicker-range-states.visual.spec.ts-snapshots/po-datepicker-range-state-label-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-datepicker-range/po-datepicker-range-states.visual.spec.ts-snapshots/po-datepicker-range-state-label-help-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-datepicker-range/po-datepicker-range-states.visual.spec.ts-snapshots/po-datepicker-range-state-label-help-chromium-linux.png
new file mode 100644
index 0000000000..772ac6e8af
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-datepicker-range/po-datepicker-range-states.visual.spec.ts-snapshots/po-datepicker-range-state-label-help-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-datepicker-range/po-datepicker-range-states.visual.spec.ts-snapshots/po-datepicker-range-state-label-helper-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-datepicker-range/po-datepicker-range-states.visual.spec.ts-snapshots/po-datepicker-range-state-label-helper-chromium-linux.png
new file mode 100644
index 0000000000..3f5c8b5644
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-datepicker-range/po-datepicker-range-states.visual.spec.ts-snapshots/po-datepicker-range-state-label-helper-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-datepicker-range/po-datepicker-range-states.visual.spec.ts-snapshots/po-datepicker-range-state-loading-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-datepicker-range/po-datepicker-range-states.visual.spec.ts-snapshots/po-datepicker-range-state-loading-chromium-linux.png
new file mode 100644
index 0000000000..2144a3e052
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-datepicker-range/po-datepicker-range-states.visual.spec.ts-snapshots/po-datepicker-range-state-loading-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-datepicker-range/po-datepicker-range-states.visual.spec.ts-snapshots/po-datepicker-range-state-loading-label-helper-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-datepicker-range/po-datepicker-range-states.visual.spec.ts-snapshots/po-datepicker-range-state-loading-label-helper-chromium-linux.png
new file mode 100644
index 0000000000..715187fb85
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-datepicker-range/po-datepicker-range-states.visual.spec.ts-snapshots/po-datepicker-range-state-loading-label-helper-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-datepicker-range/po-datepicker-range-states.visual.spec.ts-snapshots/po-datepicker-range-state-required-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-datepicker-range/po-datepicker-range-states.visual.spec.ts-snapshots/po-datepicker-range-state-required-chromium-linux.png
new file mode 100644
index 0000000000..b5929ae2d4
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-datepicker-range/po-datepicker-range-states.visual.spec.ts-snapshots/po-datepicker-range-state-required-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-datepicker/po-datepicker-states.visual.spec.ts-snapshots/po-datepicker-state-basic-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-datepicker/po-datepicker-states.visual.spec.ts-snapshots/po-datepicker-state-basic-chromium-linux.png
new file mode 100644
index 0000000000..36006448ab
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-datepicker/po-datepicker-states.visual.spec.ts-snapshots/po-datepicker-state-basic-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-datepicker/po-datepicker-states.visual.spec.ts-snapshots/po-datepicker-state-disabled-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-datepicker/po-datepicker-states.visual.spec.ts-snapshots/po-datepicker-state-disabled-chromium-linux.png
new file mode 100644
index 0000000000..85acb96448
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-datepicker/po-datepicker-states.visual.spec.ts-snapshots/po-datepicker-state-disabled-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-datepicker/po-datepicker-states.visual.spec.ts-snapshots/po-datepicker-state-label-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-datepicker/po-datepicker-states.visual.spec.ts-snapshots/po-datepicker-state-label-chromium-linux.png
new file mode 100644
index 0000000000..02c70a7f9a
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-datepicker/po-datepicker-states.visual.spec.ts-snapshots/po-datepicker-state-label-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-datepicker/po-datepicker-states.visual.spec.ts-snapshots/po-datepicker-state-label-help-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-datepicker/po-datepicker-states.visual.spec.ts-snapshots/po-datepicker-state-label-help-chromium-linux.png
new file mode 100644
index 0000000000..b9845862cf
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-datepicker/po-datepicker-states.visual.spec.ts-snapshots/po-datepicker-state-label-help-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-datepicker/po-datepicker-states.visual.spec.ts-snapshots/po-datepicker-state-label-helper-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-datepicker/po-datepicker-states.visual.spec.ts-snapshots/po-datepicker-state-label-helper-chromium-linux.png
new file mode 100644
index 0000000000..9c6e3d9c8e
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-datepicker/po-datepicker-states.visual.spec.ts-snapshots/po-datepicker-state-label-helper-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-datepicker/po-datepicker-states.visual.spec.ts-snapshots/po-datepicker-state-loading-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-datepicker/po-datepicker-states.visual.spec.ts-snapshots/po-datepicker-state-loading-chromium-linux.png
new file mode 100644
index 0000000000..8bc583c512
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-datepicker/po-datepicker-states.visual.spec.ts-snapshots/po-datepicker-state-loading-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-datepicker/po-datepicker-states.visual.spec.ts-snapshots/po-datepicker-state-loading-label-helper-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-datepicker/po-datepicker-states.visual.spec.ts-snapshots/po-datepicker-state-loading-label-helper-chromium-linux.png
new file mode 100644
index 0000000000..886d14d29d
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-datepicker/po-datepicker-states.visual.spec.ts-snapshots/po-datepicker-state-loading-label-helper-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-datepicker/po-datepicker-states.visual.spec.ts-snapshots/po-datepicker-state-readonly-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-datepicker/po-datepicker-states.visual.spec.ts-snapshots/po-datepicker-state-readonly-chromium-linux.png
new file mode 100644
index 0000000000..9153a79501
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-datepicker/po-datepicker-states.visual.spec.ts-snapshots/po-datepicker-state-readonly-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-datepicker/po-datepicker-states.visual.spec.ts-snapshots/po-datepicker-state-required-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-datepicker/po-datepicker-states.visual.spec.ts-snapshots/po-datepicker-state-required-chromium-linux.png
new file mode 100644
index 0000000000..7e9ca4f18f
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-datepicker/po-datepicker-states.visual.spec.ts-snapshots/po-datepicker-state-required-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-datepicker/po-datepicker-states.visual.spec.ts-snapshots/po-datepicker-state-required-error-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-datepicker/po-datepicker-states.visual.spec.ts-snapshots/po-datepicker-state-required-error-chromium-linux.png
new file mode 100644
index 0000000000..328e57eef0
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-datepicker/po-datepicker-states.visual.spec.ts-snapshots/po-datepicker-state-required-error-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-decimal/po-decimal-states.visual.spec.ts-snapshots/po-decimal-state-basic-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-decimal/po-decimal-states.visual.spec.ts-snapshots/po-decimal-state-basic-chromium-linux.png
new file mode 100644
index 0000000000..6e3e71519d
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-decimal/po-decimal-states.visual.spec.ts-snapshots/po-decimal-state-basic-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-decimal/po-decimal-states.visual.spec.ts-snapshots/po-decimal-state-disabled-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-decimal/po-decimal-states.visual.spec.ts-snapshots/po-decimal-state-disabled-chromium-linux.png
new file mode 100644
index 0000000000..a4ba033260
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-decimal/po-decimal-states.visual.spec.ts-snapshots/po-decimal-state-disabled-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-decimal/po-decimal-states.visual.spec.ts-snapshots/po-decimal-state-label-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-decimal/po-decimal-states.visual.spec.ts-snapshots/po-decimal-state-label-chromium-linux.png
new file mode 100644
index 0000000000..b10abd5d1d
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-decimal/po-decimal-states.visual.spec.ts-snapshots/po-decimal-state-label-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-decimal/po-decimal-states.visual.spec.ts-snapshots/po-decimal-state-label-help-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-decimal/po-decimal-states.visual.spec.ts-snapshots/po-decimal-state-label-help-chromium-linux.png
new file mode 100644
index 0000000000..31cfd9d8f2
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-decimal/po-decimal-states.visual.spec.ts-snapshots/po-decimal-state-label-help-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-decimal/po-decimal-states.visual.spec.ts-snapshots/po-decimal-state-label-helper-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-decimal/po-decimal-states.visual.spec.ts-snapshots/po-decimal-state-label-helper-chromium-linux.png
new file mode 100644
index 0000000000..3c93f859f5
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-decimal/po-decimal-states.visual.spec.ts-snapshots/po-decimal-state-label-helper-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-decimal/po-decimal-states.visual.spec.ts-snapshots/po-decimal-state-loading-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-decimal/po-decimal-states.visual.spec.ts-snapshots/po-decimal-state-loading-chromium-linux.png
new file mode 100644
index 0000000000..8bc583c512
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-decimal/po-decimal-states.visual.spec.ts-snapshots/po-decimal-state-loading-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-decimal/po-decimal-states.visual.spec.ts-snapshots/po-decimal-state-loading-label-helper-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-decimal/po-decimal-states.visual.spec.ts-snapshots/po-decimal-state-loading-label-helper-chromium-linux.png
new file mode 100644
index 0000000000..886d14d29d
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-decimal/po-decimal-states.visual.spec.ts-snapshots/po-decimal-state-loading-label-helper-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-decimal/po-decimal-states.visual.spec.ts-snapshots/po-decimal-state-readonly-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-decimal/po-decimal-states.visual.spec.ts-snapshots/po-decimal-state-readonly-chromium-linux.png
new file mode 100644
index 0000000000..f8ad05e406
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-decimal/po-decimal-states.visual.spec.ts-snapshots/po-decimal-state-readonly-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-decimal/po-decimal-states.visual.spec.ts-snapshots/po-decimal-state-required-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-decimal/po-decimal-states.visual.spec.ts-snapshots/po-decimal-state-required-chromium-linux.png
new file mode 100644
index 0000000000..ee3b9bcbdd
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-decimal/po-decimal-states.visual.spec.ts-snapshots/po-decimal-state-required-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-decimal/po-decimal-states.visual.spec.ts-snapshots/po-decimal-state-required-error-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-decimal/po-decimal-states.visual.spec.ts-snapshots/po-decimal-state-required-error-chromium-linux.png
new file mode 100644
index 0000000000..80055710d3
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-decimal/po-decimal-states.visual.spec.ts-snapshots/po-decimal-state-required-error-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-email/po-email-states.visual.spec.ts-snapshots/po-email-state-basic-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-email/po-email-states.visual.spec.ts-snapshots/po-email-state-basic-chromium-linux.png
new file mode 100644
index 0000000000..4ce62c1616
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-email/po-email-states.visual.spec.ts-snapshots/po-email-state-basic-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-email/po-email-states.visual.spec.ts-snapshots/po-email-state-disabled-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-email/po-email-states.visual.spec.ts-snapshots/po-email-state-disabled-chromium-linux.png
new file mode 100644
index 0000000000..1a633614b0
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-email/po-email-states.visual.spec.ts-snapshots/po-email-state-disabled-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-email/po-email-states.visual.spec.ts-snapshots/po-email-state-label-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-email/po-email-states.visual.spec.ts-snapshots/po-email-state-label-chromium-linux.png
new file mode 100644
index 0000000000..92ac964ce9
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-email/po-email-states.visual.spec.ts-snapshots/po-email-state-label-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-email/po-email-states.visual.spec.ts-snapshots/po-email-state-label-help-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-email/po-email-states.visual.spec.ts-snapshots/po-email-state-label-help-chromium-linux.png
new file mode 100644
index 0000000000..0503ede75e
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-email/po-email-states.visual.spec.ts-snapshots/po-email-state-label-help-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-email/po-email-states.visual.spec.ts-snapshots/po-email-state-label-helper-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-email/po-email-states.visual.spec.ts-snapshots/po-email-state-label-helper-chromium-linux.png
new file mode 100644
index 0000000000..bc03f852f6
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-email/po-email-states.visual.spec.ts-snapshots/po-email-state-label-helper-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-email/po-email-states.visual.spec.ts-snapshots/po-email-state-loading-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-email/po-email-states.visual.spec.ts-snapshots/po-email-state-loading-chromium-linux.png
new file mode 100644
index 0000000000..04c972e047
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-email/po-email-states.visual.spec.ts-snapshots/po-email-state-loading-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-email/po-email-states.visual.spec.ts-snapshots/po-email-state-loading-label-helper-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-email/po-email-states.visual.spec.ts-snapshots/po-email-state-loading-label-helper-chromium-linux.png
new file mode 100644
index 0000000000..1cd366bcaa
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-email/po-email-states.visual.spec.ts-snapshots/po-email-state-loading-label-helper-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-email/po-email-states.visual.spec.ts-snapshots/po-email-state-readonly-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-email/po-email-states.visual.spec.ts-snapshots/po-email-state-readonly-chromium-linux.png
new file mode 100644
index 0000000000..c31f288165
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-email/po-email-states.visual.spec.ts-snapshots/po-email-state-readonly-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-email/po-email-states.visual.spec.ts-snapshots/po-email-state-required-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-email/po-email-states.visual.spec.ts-snapshots/po-email-state-required-chromium-linux.png
new file mode 100644
index 0000000000..a09c8521c9
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-email/po-email-states.visual.spec.ts-snapshots/po-email-state-required-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-email/po-email-states.visual.spec.ts-snapshots/po-email-state-required-error-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-email/po-email-states.visual.spec.ts-snapshots/po-email-state-required-error-chromium-linux.png
new file mode 100644
index 0000000000..8fd16c3c93
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-email/po-email-states.visual.spec.ts-snapshots/po-email-state-required-error-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-basic-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-basic-chromium-linux.png
new file mode 100644
index 0000000000..23fc5d8451
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-basic-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-disabled-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-disabled-chromium-linux.png
new file mode 100644
index 0000000000..a4ba033260
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-disabled-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-helper-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-helper-chromium-linux.png
new file mode 100644
index 0000000000..b461ffac18
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-helper-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-label-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-label-chromium-linux.png
new file mode 100644
index 0000000000..b10abd5d1d
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-label-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-label-help-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-label-help-chromium-linux.png
new file mode 100644
index 0000000000..31cfd9d8f2
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-label-help-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-label-helper-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-label-helper-chromium-linux.png
new file mode 100644
index 0000000000..3c93f859f5
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-label-helper-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-label-helper-help-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-label-helper-help-chromium-linux.png
new file mode 100644
index 0000000000..d2544f3a6d
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-label-helper-help-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-loading-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-loading-chromium-linux.png
new file mode 100644
index 0000000000..0ad557973c
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-loading-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-loading-helper-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-loading-helper-chromium-linux.png
new file mode 100644
index 0000000000..7ba1bb3997
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-loading-helper-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-loading-label-helper-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-loading-label-helper-chromium-linux.png
new file mode 100644
index 0000000000..595770c74b
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-loading-label-helper-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-readonly-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-readonly-chromium-linux.png
new file mode 100644
index 0000000000..f0fccafaaa
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-readonly-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-required-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-required-chromium-linux.png
new file mode 100644
index 0000000000..ee3b9bcbdd
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-required-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-required-error-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-required-error-chromium-linux.png
new file mode 100644
index 0000000000..80055710d3
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-required-error-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-login/po-login-states.visual.spec.ts-snapshots/po-login-state-basic-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-login/po-login-states.visual.spec.ts-snapshots/po-login-state-basic-chromium-linux.png
new file mode 100644
index 0000000000..c570706a16
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-login/po-login-states.visual.spec.ts-snapshots/po-login-state-basic-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-login/po-login-states.visual.spec.ts-snapshots/po-login-state-disabled-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-login/po-login-states.visual.spec.ts-snapshots/po-login-state-disabled-chromium-linux.png
new file mode 100644
index 0000000000..8d82a22481
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-login/po-login-states.visual.spec.ts-snapshots/po-login-state-disabled-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-login/po-login-states.visual.spec.ts-snapshots/po-login-state-label-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-login/po-login-states.visual.spec.ts-snapshots/po-login-state-label-chromium-linux.png
new file mode 100644
index 0000000000..0d85552985
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-login/po-login-states.visual.spec.ts-snapshots/po-login-state-label-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-login/po-login-states.visual.spec.ts-snapshots/po-login-state-label-help-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-login/po-login-states.visual.spec.ts-snapshots/po-login-state-label-help-chromium-linux.png
new file mode 100644
index 0000000000..da61905416
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-login/po-login-states.visual.spec.ts-snapshots/po-login-state-label-help-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-login/po-login-states.visual.spec.ts-snapshots/po-login-state-label-helper-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-login/po-login-states.visual.spec.ts-snapshots/po-login-state-label-helper-chromium-linux.png
new file mode 100644
index 0000000000..d2eb8d6bf2
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-login/po-login-states.visual.spec.ts-snapshots/po-login-state-label-helper-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-login/po-login-states.visual.spec.ts-snapshots/po-login-state-loading-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-login/po-login-states.visual.spec.ts-snapshots/po-login-state-loading-chromium-linux.png
new file mode 100644
index 0000000000..c1e8ca93f9
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-login/po-login-states.visual.spec.ts-snapshots/po-login-state-loading-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-login/po-login-states.visual.spec.ts-snapshots/po-login-state-loading-label-helper-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-login/po-login-states.visual.spec.ts-snapshots/po-login-state-loading-label-helper-chromium-linux.png
new file mode 100644
index 0000000000..494bf8b0cb
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-login/po-login-states.visual.spec.ts-snapshots/po-login-state-loading-label-helper-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-login/po-login-states.visual.spec.ts-snapshots/po-login-state-readonly-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-login/po-login-states.visual.spec.ts-snapshots/po-login-state-readonly-chromium-linux.png
new file mode 100644
index 0000000000..6f0e73bc1f
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-login/po-login-states.visual.spec.ts-snapshots/po-login-state-readonly-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-login/po-login-states.visual.spec.ts-snapshots/po-login-state-required-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-login/po-login-states.visual.spec.ts-snapshots/po-login-state-required-chromium-linux.png
new file mode 100644
index 0000000000..af8a39ba2b
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-login/po-login-states.visual.spec.ts-snapshots/po-login-state-required-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-login/po-login-states.visual.spec.ts-snapshots/po-login-state-required-error-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-login/po-login-states.visual.spec.ts-snapshots/po-login-state-required-error-chromium-linux.png
new file mode 100644
index 0000000000..a736ab4142
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-login/po-login-states.visual.spec.ts-snapshots/po-login-state-required-error-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-lookup/po-lookup-states.visual.spec.ts-snapshots/po-lookup-state-basic-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-lookup/po-lookup-states.visual.spec.ts-snapshots/po-lookup-state-basic-chromium-linux.png
new file mode 100644
index 0000000000..98d04c11c6
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-lookup/po-lookup-states.visual.spec.ts-snapshots/po-lookup-state-basic-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-lookup/po-lookup-states.visual.spec.ts-snapshots/po-lookup-state-clean-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-lookup/po-lookup-states.visual.spec.ts-snapshots/po-lookup-state-clean-chromium-linux.png
new file mode 100644
index 0000000000..ba86abe6da
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-lookup/po-lookup-states.visual.spec.ts-snapshots/po-lookup-state-clean-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-lookup/po-lookup-states.visual.spec.ts-snapshots/po-lookup-state-disabled-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-lookup/po-lookup-states.visual.spec.ts-snapshots/po-lookup-state-disabled-chromium-linux.png
new file mode 100644
index 0000000000..5f698bcdb3
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-lookup/po-lookup-states.visual.spec.ts-snapshots/po-lookup-state-disabled-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-lookup/po-lookup-states.visual.spec.ts-snapshots/po-lookup-state-label-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-lookup/po-lookup-states.visual.spec.ts-snapshots/po-lookup-state-label-chromium-linux.png
new file mode 100644
index 0000000000..09c76e71f2
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-lookup/po-lookup-states.visual.spec.ts-snapshots/po-lookup-state-label-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-lookup/po-lookup-states.visual.spec.ts-snapshots/po-lookup-state-label-help-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-lookup/po-lookup-states.visual.spec.ts-snapshots/po-lookup-state-label-help-chromium-linux.png
new file mode 100644
index 0000000000..6545d7c410
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-lookup/po-lookup-states.visual.spec.ts-snapshots/po-lookup-state-label-help-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-lookup/po-lookup-states.visual.spec.ts-snapshots/po-lookup-state-label-helper-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-lookup/po-lookup-states.visual.spec.ts-snapshots/po-lookup-state-label-helper-chromium-linux.png
new file mode 100644
index 0000000000..b5bd25a9c5
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-lookup/po-lookup-states.visual.spec.ts-snapshots/po-lookup-state-label-helper-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-lookup/po-lookup-states.visual.spec.ts-snapshots/po-lookup-state-required-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-lookup/po-lookup-states.visual.spec.ts-snapshots/po-lookup-state-required-chromium-linux.png
new file mode 100644
index 0000000000..69cb710075
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-lookup/po-lookup-states.visual.spec.ts-snapshots/po-lookup-state-required-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-multiselect/po-multiselect-states.visual.spec.ts-snapshots/po-multiselect-state-basic-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-multiselect/po-multiselect-states.visual.spec.ts-snapshots/po-multiselect-state-basic-chromium-linux.png
new file mode 100644
index 0000000000..821a558fc7
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-multiselect/po-multiselect-states.visual.spec.ts-snapshots/po-multiselect-state-basic-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-multiselect/po-multiselect-states.visual.spec.ts-snapshots/po-multiselect-state-disabled-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-multiselect/po-multiselect-states.visual.spec.ts-snapshots/po-multiselect-state-disabled-chromium-linux.png
new file mode 100644
index 0000000000..b4a269980f
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-multiselect/po-multiselect-states.visual.spec.ts-snapshots/po-multiselect-state-disabled-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-multiselect/po-multiselect-states.visual.spec.ts-snapshots/po-multiselect-state-label-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-multiselect/po-multiselect-states.visual.spec.ts-snapshots/po-multiselect-state-label-chromium-linux.png
new file mode 100644
index 0000000000..a8880be751
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-multiselect/po-multiselect-states.visual.spec.ts-snapshots/po-multiselect-state-label-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-multiselect/po-multiselect-states.visual.spec.ts-snapshots/po-multiselect-state-label-help-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-multiselect/po-multiselect-states.visual.spec.ts-snapshots/po-multiselect-state-label-help-chromium-linux.png
new file mode 100644
index 0000000000..b904e16f98
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-multiselect/po-multiselect-states.visual.spec.ts-snapshots/po-multiselect-state-label-help-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-multiselect/po-multiselect-states.visual.spec.ts-snapshots/po-multiselect-state-label-helper-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-multiselect/po-multiselect-states.visual.spec.ts-snapshots/po-multiselect-state-label-helper-chromium-linux.png
new file mode 100644
index 0000000000..14d07b124a
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-multiselect/po-multiselect-states.visual.spec.ts-snapshots/po-multiselect-state-label-helper-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-multiselect/po-multiselect-states.visual.spec.ts-snapshots/po-multiselect-state-required-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-multiselect/po-multiselect-states.visual.spec.ts-snapshots/po-multiselect-state-required-chromium-linux.png
new file mode 100644
index 0000000000..9e1a308a23
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-multiselect/po-multiselect-states.visual.spec.ts-snapshots/po-multiselect-state-required-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-number/po-number-states.visual.spec.ts-snapshots/po-number-state-basic-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-number/po-number-states.visual.spec.ts-snapshots/po-number-state-basic-chromium-linux.png
new file mode 100644
index 0000000000..13a8e92336
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-number/po-number-states.visual.spec.ts-snapshots/po-number-state-basic-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-number/po-number-states.visual.spec.ts-snapshots/po-number-state-disabled-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-number/po-number-states.visual.spec.ts-snapshots/po-number-state-disabled-chromium-linux.png
new file mode 100644
index 0000000000..a4ba033260
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-number/po-number-states.visual.spec.ts-snapshots/po-number-state-disabled-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-number/po-number-states.visual.spec.ts-snapshots/po-number-state-label-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-number/po-number-states.visual.spec.ts-snapshots/po-number-state-label-chromium-linux.png
new file mode 100644
index 0000000000..b10abd5d1d
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-number/po-number-states.visual.spec.ts-snapshots/po-number-state-label-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-number/po-number-states.visual.spec.ts-snapshots/po-number-state-label-help-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-number/po-number-states.visual.spec.ts-snapshots/po-number-state-label-help-chromium-linux.png
new file mode 100644
index 0000000000..31cfd9d8f2
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-number/po-number-states.visual.spec.ts-snapshots/po-number-state-label-help-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-number/po-number-states.visual.spec.ts-snapshots/po-number-state-label-helper-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-number/po-number-states.visual.spec.ts-snapshots/po-number-state-label-helper-chromium-linux.png
new file mode 100644
index 0000000000..3c93f859f5
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-number/po-number-states.visual.spec.ts-snapshots/po-number-state-label-helper-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-number/po-number-states.visual.spec.ts-snapshots/po-number-state-loading-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-number/po-number-states.visual.spec.ts-snapshots/po-number-state-loading-chromium-linux.png
new file mode 100644
index 0000000000..8bc583c512
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-number/po-number-states.visual.spec.ts-snapshots/po-number-state-loading-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-number/po-number-states.visual.spec.ts-snapshots/po-number-state-loading-label-helper-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-number/po-number-states.visual.spec.ts-snapshots/po-number-state-loading-label-helper-chromium-linux.png
new file mode 100644
index 0000000000..886d14d29d
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-number/po-number-states.visual.spec.ts-snapshots/po-number-state-loading-label-helper-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-number/po-number-states.visual.spec.ts-snapshots/po-number-state-readonly-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-number/po-number-states.visual.spec.ts-snapshots/po-number-state-readonly-chromium-linux.png
new file mode 100644
index 0000000000..c21cad6278
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-number/po-number-states.visual.spec.ts-snapshots/po-number-state-readonly-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-number/po-number-states.visual.spec.ts-snapshots/po-number-state-required-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-number/po-number-states.visual.spec.ts-snapshots/po-number-state-required-chromium-linux.png
new file mode 100644
index 0000000000..ee3b9bcbdd
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-number/po-number-states.visual.spec.ts-snapshots/po-number-state-required-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-number/po-number-states.visual.spec.ts-snapshots/po-number-state-required-error-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-number/po-number-states.visual.spec.ts-snapshots/po-number-state-required-error-chromium-linux.png
new file mode 100644
index 0000000000..af60e0ce87
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-number/po-number-states.visual.spec.ts-snapshots/po-number-state-required-error-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-password/po-password-states.visual.spec.ts-snapshots/po-password-state-basic-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-password/po-password-states.visual.spec.ts-snapshots/po-password-state-basic-chromium-linux.png
new file mode 100644
index 0000000000..71f2f99ae6
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-password/po-password-states.visual.spec.ts-snapshots/po-password-state-basic-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-password/po-password-states.visual.spec.ts-snapshots/po-password-state-disabled-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-password/po-password-states.visual.spec.ts-snapshots/po-password-state-disabled-chromium-linux.png
new file mode 100644
index 0000000000..d88ec6d0d8
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-password/po-password-states.visual.spec.ts-snapshots/po-password-state-disabled-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-password/po-password-states.visual.spec.ts-snapshots/po-password-state-label-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-password/po-password-states.visual.spec.ts-snapshots/po-password-state-label-chromium-linux.png
new file mode 100644
index 0000000000..646bc70bd7
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-password/po-password-states.visual.spec.ts-snapshots/po-password-state-label-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-password/po-password-states.visual.spec.ts-snapshots/po-password-state-label-help-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-password/po-password-states.visual.spec.ts-snapshots/po-password-state-label-help-chromium-linux.png
new file mode 100644
index 0000000000..20813d671a
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-password/po-password-states.visual.spec.ts-snapshots/po-password-state-label-help-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-password/po-password-states.visual.spec.ts-snapshots/po-password-state-label-helper-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-password/po-password-states.visual.spec.ts-snapshots/po-password-state-label-helper-chromium-linux.png
new file mode 100644
index 0000000000..cf5b35394c
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-password/po-password-states.visual.spec.ts-snapshots/po-password-state-label-helper-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-password/po-password-states.visual.spec.ts-snapshots/po-password-state-loading-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-password/po-password-states.visual.spec.ts-snapshots/po-password-state-loading-chromium-linux.png
new file mode 100644
index 0000000000..cb07913e01
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-password/po-password-states.visual.spec.ts-snapshots/po-password-state-loading-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-password/po-password-states.visual.spec.ts-snapshots/po-password-state-loading-label-helper-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-password/po-password-states.visual.spec.ts-snapshots/po-password-state-loading-label-helper-chromium-linux.png
new file mode 100644
index 0000000000..7875c1da1a
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-password/po-password-states.visual.spec.ts-snapshots/po-password-state-loading-label-helper-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-password/po-password-states.visual.spec.ts-snapshots/po-password-state-readonly-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-password/po-password-states.visual.spec.ts-snapshots/po-password-state-readonly-chromium-linux.png
new file mode 100644
index 0000000000..2cd9817930
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-password/po-password-states.visual.spec.ts-snapshots/po-password-state-readonly-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-password/po-password-states.visual.spec.ts-snapshots/po-password-state-required-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-password/po-password-states.visual.spec.ts-snapshots/po-password-state-required-chromium-linux.png
new file mode 100644
index 0000000000..b621bfb599
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-password/po-password-states.visual.spec.ts-snapshots/po-password-state-required-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-password/po-password-states.visual.spec.ts-snapshots/po-password-state-required-error-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-password/po-password-states.visual.spec.ts-snapshots/po-password-state-required-error-chromium-linux.png
new file mode 100644
index 0000000000..aa753eada1
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-password/po-password-states.visual.spec.ts-snapshots/po-password-state-required-error-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-radio-group/po-radio-group-states.visual.spec.ts-snapshots/po-radio-group-state-basic-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-radio-group/po-radio-group-states.visual.spec.ts-snapshots/po-radio-group-state-basic-chromium-linux.png
new file mode 100644
index 0000000000..0d5a8fc983
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-radio-group/po-radio-group-states.visual.spec.ts-snapshots/po-radio-group-state-basic-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-radio-group/po-radio-group-states.visual.spec.ts-snapshots/po-radio-group-state-disabled-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-radio-group/po-radio-group-states.visual.spec.ts-snapshots/po-radio-group-state-disabled-chromium-linux.png
new file mode 100644
index 0000000000..90516656d3
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-radio-group/po-radio-group-states.visual.spec.ts-snapshots/po-radio-group-state-disabled-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-radio-group/po-radio-group-states.visual.spec.ts-snapshots/po-radio-group-state-label-help-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-radio-group/po-radio-group-states.visual.spec.ts-snapshots/po-radio-group-state-label-help-chromium-linux.png
new file mode 100644
index 0000000000..ae524720b7
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-radio-group/po-radio-group-states.visual.spec.ts-snapshots/po-radio-group-state-label-help-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-radio-group/po-radio-group-states.visual.spec.ts-snapshots/po-radio-group-state-label-helper-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-radio-group/po-radio-group-states.visual.spec.ts-snapshots/po-radio-group-state-label-helper-chromium-linux.png
new file mode 100644
index 0000000000..969d3b14b7
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-radio-group/po-radio-group-states.visual.spec.ts-snapshots/po-radio-group-state-label-helper-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-radio-group/po-radio-group-states.visual.spec.ts-snapshots/po-radio-group-state-required-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-radio-group/po-radio-group-states.visual.spec.ts-snapshots/po-radio-group-state-required-chromium-linux.png
new file mode 100644
index 0000000000..fcc6c52ae7
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-radio-group/po-radio-group-states.visual.spec.ts-snapshots/po-radio-group-state-required-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-rich-text/po-rich-text-states.visual.spec.ts-snapshots/po-rich-text-state-basic-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-rich-text/po-rich-text-states.visual.spec.ts-snapshots/po-rich-text-state-basic-chromium-linux.png
new file mode 100644
index 0000000000..291202fb8a
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-rich-text/po-rich-text-states.visual.spec.ts-snapshots/po-rich-text-state-basic-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-rich-text/po-rich-text-states.visual.spec.ts-snapshots/po-rich-text-state-disabled-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-rich-text/po-rich-text-states.visual.spec.ts-snapshots/po-rich-text-state-disabled-chromium-linux.png
new file mode 100644
index 0000000000..492587eea0
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-rich-text/po-rich-text-states.visual.spec.ts-snapshots/po-rich-text-state-disabled-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-rich-text/po-rich-text-states.visual.spec.ts-snapshots/po-rich-text-state-label-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-rich-text/po-rich-text-states.visual.spec.ts-snapshots/po-rich-text-state-label-chromium-linux.png
new file mode 100644
index 0000000000..dc5b1b9ebf
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-rich-text/po-rich-text-states.visual.spec.ts-snapshots/po-rich-text-state-label-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-rich-text/po-rich-text-states.visual.spec.ts-snapshots/po-rich-text-state-label-help-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-rich-text/po-rich-text-states.visual.spec.ts-snapshots/po-rich-text-state-label-help-chromium-linux.png
new file mode 100644
index 0000000000..ce2d9bb271
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-rich-text/po-rich-text-states.visual.spec.ts-snapshots/po-rich-text-state-label-help-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-rich-text/po-rich-text-states.visual.spec.ts-snapshots/po-rich-text-state-label-helper-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-rich-text/po-rich-text-states.visual.spec.ts-snapshots/po-rich-text-state-label-helper-chromium-linux.png
new file mode 100644
index 0000000000..56a7eb0990
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-rich-text/po-rich-text-states.visual.spec.ts-snapshots/po-rich-text-state-label-helper-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-rich-text/po-rich-text-states.visual.spec.ts-snapshots/po-rich-text-state-readonly-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-rich-text/po-rich-text-states.visual.spec.ts-snapshots/po-rich-text-state-readonly-chromium-linux.png
new file mode 100644
index 0000000000..123f37a6fc
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-rich-text/po-rich-text-states.visual.spec.ts-snapshots/po-rich-text-state-readonly-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-rich-text/po-rich-text-states.visual.spec.ts-snapshots/po-rich-text-state-required-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-rich-text/po-rich-text-states.visual.spec.ts-snapshots/po-rich-text-state-required-chromium-linux.png
new file mode 100644
index 0000000000..0a6050b9f9
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-rich-text/po-rich-text-states.visual.spec.ts-snapshots/po-rich-text-state-required-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-select/po-select-states.visual.spec.ts-snapshots/po-select-state-basic-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-select/po-select-states.visual.spec.ts-snapshots/po-select-state-basic-chromium-linux.png
new file mode 100644
index 0000000000..eabf10e628
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-select/po-select-states.visual.spec.ts-snapshots/po-select-state-basic-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-select/po-select-states.visual.spec.ts-snapshots/po-select-state-disabled-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-select/po-select-states.visual.spec.ts-snapshots/po-select-state-disabled-chromium-linux.png
new file mode 100644
index 0000000000..9fce17c947
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-select/po-select-states.visual.spec.ts-snapshots/po-select-state-disabled-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-select/po-select-states.visual.spec.ts-snapshots/po-select-state-label-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-select/po-select-states.visual.spec.ts-snapshots/po-select-state-label-chromium-linux.png
new file mode 100644
index 0000000000..f413a3cd91
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-select/po-select-states.visual.spec.ts-snapshots/po-select-state-label-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-select/po-select-states.visual.spec.ts-snapshots/po-select-state-label-help-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-select/po-select-states.visual.spec.ts-snapshots/po-select-state-label-help-chromium-linux.png
new file mode 100644
index 0000000000..00e0285a2d
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-select/po-select-states.visual.spec.ts-snapshots/po-select-state-label-help-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-select/po-select-states.visual.spec.ts-snapshots/po-select-state-label-helper-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-select/po-select-states.visual.spec.ts-snapshots/po-select-state-label-helper-chromium-linux.png
new file mode 100644
index 0000000000..7c9671adf4
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-select/po-select-states.visual.spec.ts-snapshots/po-select-state-label-helper-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-select/po-select-states.visual.spec.ts-snapshots/po-select-state-loading-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-select/po-select-states.visual.spec.ts-snapshots/po-select-state-loading-chromium-linux.png
new file mode 100644
index 0000000000..74ac27c120
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-select/po-select-states.visual.spec.ts-snapshots/po-select-state-loading-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-select/po-select-states.visual.spec.ts-snapshots/po-select-state-loading-label-helper-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-select/po-select-states.visual.spec.ts-snapshots/po-select-state-loading-label-helper-chromium-linux.png
new file mode 100644
index 0000000000..0804e255f2
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-select/po-select-states.visual.spec.ts-snapshots/po-select-state-loading-label-helper-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-select/po-select-states.visual.spec.ts-snapshots/po-select-state-readonly-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-select/po-select-states.visual.spec.ts-snapshots/po-select-state-readonly-chromium-linux.png
new file mode 100644
index 0000000000..2498251ba3
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-select/po-select-states.visual.spec.ts-snapshots/po-select-state-readonly-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-select/po-select-states.visual.spec.ts-snapshots/po-select-state-required-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-select/po-select-states.visual.spec.ts-snapshots/po-select-state-required-chromium-linux.png
new file mode 100644
index 0000000000..f4f7bf270c
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-select/po-select-states.visual.spec.ts-snapshots/po-select-state-required-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-switch/po-switch-states.visual.spec.ts-snapshots/po-switch-state-basic-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-switch/po-switch-states.visual.spec.ts-snapshots/po-switch-state-basic-chromium-linux.png
new file mode 100644
index 0000000000..13de2055a0
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-switch/po-switch-states.visual.spec.ts-snapshots/po-switch-state-basic-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-switch/po-switch-states.visual.spec.ts-snapshots/po-switch-state-disabled-checked-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-switch/po-switch-states.visual.spec.ts-snapshots/po-switch-state-disabled-checked-chromium-linux.png
new file mode 100644
index 0000000000..2fcf92a974
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-switch/po-switch-states.visual.spec.ts-snapshots/po-switch-state-disabled-checked-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-switch/po-switch-states.visual.spec.ts-snapshots/po-switch-state-disabled-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-switch/po-switch-states.visual.spec.ts-snapshots/po-switch-state-disabled-chromium-linux.png
new file mode 100644
index 0000000000..41d4c6bf6e
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-switch/po-switch-states.visual.spec.ts-snapshots/po-switch-state-disabled-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-switch/po-switch-states.visual.spec.ts-snapshots/po-switch-state-label-helper-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-switch/po-switch-states.visual.spec.ts-snapshots/po-switch-state-label-helper-chromium-linux.png
new file mode 100644
index 0000000000..1351707345
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-switch/po-switch-states.visual.spec.ts-snapshots/po-switch-state-label-helper-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-switch/po-switch-states.visual.spec.ts-snapshots/po-switch-state-labels-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-switch/po-switch-states.visual.spec.ts-snapshots/po-switch-state-labels-chromium-linux.png
new file mode 100644
index 0000000000..f9a1cabd77
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-switch/po-switch-states.visual.spec.ts-snapshots/po-switch-state-labels-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-switch/po-switch-states.visual.spec.ts-snapshots/po-switch-state-loading-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-switch/po-switch-states.visual.spec.ts-snapshots/po-switch-state-loading-chromium-linux.png
new file mode 100644
index 0000000000..1d533b6f02
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-switch/po-switch-states.visual.spec.ts-snapshots/po-switch-state-loading-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-textarea/po-textarea-states.visual.spec.ts-snapshots/po-textarea-state-basic-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-textarea/po-textarea-states.visual.spec.ts-snapshots/po-textarea-state-basic-chromium-linux.png
new file mode 100644
index 0000000000..d8b23e7cb3
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-textarea/po-textarea-states.visual.spec.ts-snapshots/po-textarea-state-basic-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-textarea/po-textarea-states.visual.spec.ts-snapshots/po-textarea-state-disabled-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-textarea/po-textarea-states.visual.spec.ts-snapshots/po-textarea-state-disabled-chromium-linux.png
new file mode 100644
index 0000000000..b8143e63bd
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-textarea/po-textarea-states.visual.spec.ts-snapshots/po-textarea-state-disabled-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-textarea/po-textarea-states.visual.spec.ts-snapshots/po-textarea-state-label-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-textarea/po-textarea-states.visual.spec.ts-snapshots/po-textarea-state-label-chromium-linux.png
new file mode 100644
index 0000000000..d31f5b3cd1
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-textarea/po-textarea-states.visual.spec.ts-snapshots/po-textarea-state-label-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-textarea/po-textarea-states.visual.spec.ts-snapshots/po-textarea-state-label-help-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-textarea/po-textarea-states.visual.spec.ts-snapshots/po-textarea-state-label-help-chromium-linux.png
new file mode 100644
index 0000000000..b8fa666361
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-textarea/po-textarea-states.visual.spec.ts-snapshots/po-textarea-state-label-help-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-textarea/po-textarea-states.visual.spec.ts-snapshots/po-textarea-state-label-helper-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-textarea/po-textarea-states.visual.spec.ts-snapshots/po-textarea-state-label-helper-chromium-linux.png
new file mode 100644
index 0000000000..e8abf10a1d
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-textarea/po-textarea-states.visual.spec.ts-snapshots/po-textarea-state-label-helper-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-textarea/po-textarea-states.visual.spec.ts-snapshots/po-textarea-state-readonly-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-textarea/po-textarea-states.visual.spec.ts-snapshots/po-textarea-state-readonly-chromium-linux.png
new file mode 100644
index 0000000000..93dc44f6b7
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-textarea/po-textarea-states.visual.spec.ts-snapshots/po-textarea-state-readonly-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-textarea/po-textarea-states.visual.spec.ts-snapshots/po-textarea-state-required-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-textarea/po-textarea-states.visual.spec.ts-snapshots/po-textarea-state-required-chromium-linux.png
new file mode 100644
index 0000000000..5ef06c0554
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-textarea/po-textarea-states.visual.spec.ts-snapshots/po-textarea-state-required-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-textarea/po-textarea-states.visual.spec.ts-snapshots/po-textarea-state-required-error-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-textarea/po-textarea-states.visual.spec.ts-snapshots/po-textarea-state-required-error-chromium-linux.png
new file mode 100644
index 0000000000..6c094ccf0b
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-textarea/po-textarea-states.visual.spec.ts-snapshots/po-textarea-state-required-error-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-upload/po-upload-states.visual.spec.ts-snapshots/po-upload-state-basic-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-upload/po-upload-states.visual.spec.ts-snapshots/po-upload-state-basic-chromium-linux.png
new file mode 100644
index 0000000000..ca30916b03
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-upload/po-upload-states.visual.spec.ts-snapshots/po-upload-state-basic-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-upload/po-upload-states.visual.spec.ts-snapshots/po-upload-state-disabled-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-upload/po-upload-states.visual.spec.ts-snapshots/po-upload-state-disabled-chromium-linux.png
new file mode 100644
index 0000000000..e7126cf73c
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-upload/po-upload-states.visual.spec.ts-snapshots/po-upload-state-disabled-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-upload/po-upload-states.visual.spec.ts-snapshots/po-upload-state-label-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-upload/po-upload-states.visual.spec.ts-snapshots/po-upload-state-label-chromium-linux.png
new file mode 100644
index 0000000000..ce6af63af1
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-upload/po-upload-states.visual.spec.ts-snapshots/po-upload-state-label-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-upload/po-upload-states.visual.spec.ts-snapshots/po-upload-state-label-help-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-upload/po-upload-states.visual.spec.ts-snapshots/po-upload-state-label-help-chromium-linux.png
new file mode 100644
index 0000000000..80e5477afb
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-upload/po-upload-states.visual.spec.ts-snapshots/po-upload-state-label-help-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-upload/po-upload-states.visual.spec.ts-snapshots/po-upload-state-label-helper-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-upload/po-upload-states.visual.spec.ts-snapshots/po-upload-state-label-helper-chromium-linux.png
new file mode 100644
index 0000000000..44715e995e
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-upload/po-upload-states.visual.spec.ts-snapshots/po-upload-state-label-helper-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-upload/po-upload-states.visual.spec.ts-snapshots/po-upload-state-required-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-upload/po-upload-states.visual.spec.ts-snapshots/po-upload-state-required-chromium-linux.png
new file mode 100644
index 0000000000..3dacec6679
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-upload/po-upload-states.visual.spec.ts-snapshots/po-upload-state-required-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-url/po-url-states.visual.spec.ts-snapshots/po-url-state-basic-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-url/po-url-states.visual.spec.ts-snapshots/po-url-state-basic-chromium-linux.png
new file mode 100644
index 0000000000..fc53e9b973
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-url/po-url-states.visual.spec.ts-snapshots/po-url-state-basic-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-url/po-url-states.visual.spec.ts-snapshots/po-url-state-disabled-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-url/po-url-states.visual.spec.ts-snapshots/po-url-state-disabled-chromium-linux.png
new file mode 100644
index 0000000000..c4f74828ee
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-url/po-url-states.visual.spec.ts-snapshots/po-url-state-disabled-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-url/po-url-states.visual.spec.ts-snapshots/po-url-state-label-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-url/po-url-states.visual.spec.ts-snapshots/po-url-state-label-chromium-linux.png
new file mode 100644
index 0000000000..c5ffd84fec
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-url/po-url-states.visual.spec.ts-snapshots/po-url-state-label-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-url/po-url-states.visual.spec.ts-snapshots/po-url-state-label-help-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-url/po-url-states.visual.spec.ts-snapshots/po-url-state-label-help-chromium-linux.png
new file mode 100644
index 0000000000..beb85f7c9d
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-url/po-url-states.visual.spec.ts-snapshots/po-url-state-label-help-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-url/po-url-states.visual.spec.ts-snapshots/po-url-state-label-helper-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-url/po-url-states.visual.spec.ts-snapshots/po-url-state-label-helper-chromium-linux.png
new file mode 100644
index 0000000000..45e8777655
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-url/po-url-states.visual.spec.ts-snapshots/po-url-state-label-helper-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-url/po-url-states.visual.spec.ts-snapshots/po-url-state-loading-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-url/po-url-states.visual.spec.ts-snapshots/po-url-state-loading-chromium-linux.png
new file mode 100644
index 0000000000..24fb5ca1eb
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-url/po-url-states.visual.spec.ts-snapshots/po-url-state-loading-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-url/po-url-states.visual.spec.ts-snapshots/po-url-state-loading-label-helper-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-url/po-url-states.visual.spec.ts-snapshots/po-url-state-loading-label-helper-chromium-linux.png
new file mode 100644
index 0000000000..fb6a51d8a8
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-url/po-url-states.visual.spec.ts-snapshots/po-url-state-loading-label-helper-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-url/po-url-states.visual.spec.ts-snapshots/po-url-state-readonly-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-url/po-url-states.visual.spec.ts-snapshots/po-url-state-readonly-chromium-linux.png
new file mode 100644
index 0000000000..037234c7e2
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-url/po-url-states.visual.spec.ts-snapshots/po-url-state-readonly-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-url/po-url-states.visual.spec.ts-snapshots/po-url-state-required-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-url/po-url-states.visual.spec.ts-snapshots/po-url-state-required-chromium-linux.png
new file mode 100644
index 0000000000..8d54a59f64
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-url/po-url-states.visual.spec.ts-snapshots/po-url-state-required-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/fields/po-url/po-url-states.visual.spec.ts-snapshots/po-url-state-required-error-chromium-linux.png b/e2e/visual/__snapshots__/fields/po-url/po-url-states.visual.spec.ts-snapshots/po-url-state-required-error-chromium-linux.png
new file mode 100644
index 0000000000..dbd84e03aa
Binary files /dev/null and b/e2e/visual/__snapshots__/fields/po-url/po-url-states.visual.spec.ts-snapshots/po-url-state-required-error-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/po-accordion/po-accordion.visual.spec.ts-snapshots/po-accordion-basic-chromium-linux.png b/e2e/visual/__snapshots__/po-accordion/po-accordion.visual.spec.ts-snapshots/po-accordion-basic-chromium-linux.png
new file mode 100644
index 0000000000..33d81d5370
Binary files /dev/null and b/e2e/visual/__snapshots__/po-accordion/po-accordion.visual.spec.ts-snapshots/po-accordion-basic-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/po-button-group/po-button-group.visual.spec.ts-snapshots/po-button-group-basic-chromium-linux.png b/e2e/visual/__snapshots__/po-button-group/po-button-group.visual.spec.ts-snapshots/po-button-group-basic-chromium-linux.png
new file mode 100644
index 0000000000..8ffba1f078
Binary files /dev/null and b/e2e/visual/__snapshots__/po-button-group/po-button-group.visual.spec.ts-snapshots/po-button-group-basic-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/po-button/po-button.visual.spec.ts-snapshots/po-button-basic-chromium-linux.png b/e2e/visual/__snapshots__/po-button/po-button.visual.spec.ts-snapshots/po-button-basic-chromium-linux.png
new file mode 100644
index 0000000000..496ee3f4c1
Binary files /dev/null and b/e2e/visual/__snapshots__/po-button/po-button.visual.spec.ts-snapshots/po-button-basic-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/po-checkbox/po-checkbox.visual.spec.ts-snapshots/po-checkbox-basic-chromium-linux.png b/e2e/visual/__snapshots__/po-checkbox/po-checkbox.visual.spec.ts-snapshots/po-checkbox-basic-chromium-linux.png
new file mode 100644
index 0000000000..1f85a53468
Binary files /dev/null and b/e2e/visual/__snapshots__/po-checkbox/po-checkbox.visual.spec.ts-snapshots/po-checkbox-basic-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/po-divider/po-divider.visual.spec.ts-snapshots/po-divider-basic-chromium-linux.png b/e2e/visual/__snapshots__/po-divider/po-divider.visual.spec.ts-snapshots/po-divider-basic-chromium-linux.png
new file mode 100644
index 0000000000..3b584bb34e
Binary files /dev/null and b/e2e/visual/__snapshots__/po-divider/po-divider.visual.spec.ts-snapshots/po-divider-basic-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/po-input/po-input-basic.visual.spec.ts-snapshots/po-input-basic-chromium-linux.png b/e2e/visual/__snapshots__/po-input/po-input-basic.visual.spec.ts-snapshots/po-input-basic-chromium-linux.png
new file mode 100644
index 0000000000..9f7252eb7a
Binary files /dev/null and b/e2e/visual/__snapshots__/po-input/po-input-basic.visual.spec.ts-snapshots/po-input-basic-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-basic-chromium-linux.png b/e2e/visual/__snapshots__/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-basic-chromium-linux.png
new file mode 100644
index 0000000000..23fc5d8451
Binary files /dev/null and b/e2e/visual/__snapshots__/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-basic-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-disabled-chromium-linux.png b/e2e/visual/__snapshots__/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-disabled-chromium-linux.png
new file mode 100644
index 0000000000..a4ba033260
Binary files /dev/null and b/e2e/visual/__snapshots__/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-disabled-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-helper-chromium-linux.png b/e2e/visual/__snapshots__/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-helper-chromium-linux.png
new file mode 100644
index 0000000000..b461ffac18
Binary files /dev/null and b/e2e/visual/__snapshots__/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-helper-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-label-chromium-linux.png b/e2e/visual/__snapshots__/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-label-chromium-linux.png
new file mode 100644
index 0000000000..b10abd5d1d
Binary files /dev/null and b/e2e/visual/__snapshots__/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-label-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-label-help-chromium-linux.png b/e2e/visual/__snapshots__/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-label-help-chromium-linux.png
new file mode 100644
index 0000000000..31cfd9d8f2
Binary files /dev/null and b/e2e/visual/__snapshots__/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-label-help-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-label-helper-chromium-linux.png b/e2e/visual/__snapshots__/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-label-helper-chromium-linux.png
new file mode 100644
index 0000000000..3c93f859f5
Binary files /dev/null and b/e2e/visual/__snapshots__/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-label-helper-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-label-helper-help-chromium-linux.png b/e2e/visual/__snapshots__/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-label-helper-help-chromium-linux.png
new file mode 100644
index 0000000000..d2544f3a6d
Binary files /dev/null and b/e2e/visual/__snapshots__/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-label-helper-help-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-loading-chromium-linux.png b/e2e/visual/__snapshots__/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-loading-chromium-linux.png
new file mode 100644
index 0000000000..0ad557973c
Binary files /dev/null and b/e2e/visual/__snapshots__/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-loading-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-loading-helper-chromium-linux.png b/e2e/visual/__snapshots__/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-loading-helper-chromium-linux.png
new file mode 100644
index 0000000000..7ba1bb3997
Binary files /dev/null and b/e2e/visual/__snapshots__/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-loading-helper-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-loading-label-helper-chromium-linux.png b/e2e/visual/__snapshots__/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-loading-label-helper-chromium-linux.png
new file mode 100644
index 0000000000..595770c74b
Binary files /dev/null and b/e2e/visual/__snapshots__/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-loading-label-helper-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-readonly-chromium-linux.png b/e2e/visual/__snapshots__/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-readonly-chromium-linux.png
new file mode 100644
index 0000000000..f0fccafaaa
Binary files /dev/null and b/e2e/visual/__snapshots__/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-readonly-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-required-chromium-linux.png b/e2e/visual/__snapshots__/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-required-chromium-linux.png
new file mode 100644
index 0000000000..cdcebc7f5f
Binary files /dev/null and b/e2e/visual/__snapshots__/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-required-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-required-error-chromium-linux.png b/e2e/visual/__snapshots__/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-required-error-chromium-linux.png
new file mode 100644
index 0000000000..68a482cc7a
Binary files /dev/null and b/e2e/visual/__snapshots__/po-input/po-input-states.visual.spec.ts-snapshots/po-input-state-required-error-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/po-progress/po-progress.visual.spec.ts-snapshots/po-progress-basic-chromium-linux.png b/e2e/visual/__snapshots__/po-progress/po-progress.visual.spec.ts-snapshots/po-progress-basic-chromium-linux.png
new file mode 100644
index 0000000000..ffd080b9e6
Binary files /dev/null and b/e2e/visual/__snapshots__/po-progress/po-progress.visual.spec.ts-snapshots/po-progress-basic-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/po-select/po-select.visual.spec.ts-snapshots/po-select-basic-chromium-linux.png b/e2e/visual/__snapshots__/po-select/po-select.visual.spec.ts-snapshots/po-select-basic-chromium-linux.png
new file mode 100644
index 0000000000..852811ad3e
Binary files /dev/null and b/e2e/visual/__snapshots__/po-select/po-select.visual.spec.ts-snapshots/po-select-basic-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/po-switch/po-switch.visual.spec.ts-snapshots/po-switch-basic-chromium-linux.png b/e2e/visual/__snapshots__/po-switch/po-switch.visual.spec.ts-snapshots/po-switch-basic-chromium-linux.png
new file mode 100644
index 0000000000..cf0e2ff476
Binary files /dev/null and b/e2e/visual/__snapshots__/po-switch/po-switch.visual.spec.ts-snapshots/po-switch-basic-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/po-table/po-table.visual.spec.ts-snapshots/po-table-basic-chromium-linux.png b/e2e/visual/__snapshots__/po-table/po-table.visual.spec.ts-snapshots/po-table-basic-chromium-linux.png
new file mode 100644
index 0000000000..3f6592492b
Binary files /dev/null and b/e2e/visual/__snapshots__/po-table/po-table.visual.spec.ts-snapshots/po-table-basic-chromium-linux.png differ
diff --git a/e2e/visual/__snapshots__/po-tag/po-tag.visual.spec.ts-snapshots/po-tag-basic-chromium-linux.png b/e2e/visual/__snapshots__/po-tag/po-tag.visual.spec.ts-snapshots/po-tag-basic-chromium-linux.png
new file mode 100644
index 0000000000..057c9bbefe
Binary files /dev/null and b/e2e/visual/__snapshots__/po-tag/po-tag.visual.spec.ts-snapshots/po-tag-basic-chromium-linux.png differ
diff --git a/e2e/visual/app/app.component.ts b/e2e/visual/app/app.component.ts
new file mode 100644
index 0000000000..5b0f083a3e
--- /dev/null
+++ b/e2e/visual/app/app.component.ts
@@ -0,0 +1,168 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  template: '<router-outlet></router-outlet>',
+  standalone: false
+})
+export class AppComponent {}
+
+@Component({
+  selector: 'visual-home',
+  standalone: false,
+  template: `
+    <div style="max-width: 960px; margin: 0 auto; padding: 24px; font-family: 'NotoSans', Arial, sans-serif;">
+      <h1 style="font-size: 24px; margin-bottom: 8px;">PO UI - Visual Regression Tests</h1>
+      <p style="color: #666; margin-bottom: 32px;">
+        Cenarios de teste visual para componentes PO UI. Clique em um cenario para visualiza-lo.
+      </p>
+
+      <h2 style="font-size: 18px; margin-bottom: 12px; border-bottom: 2px solid #1464a5; padding-bottom: 8px;">
+        Fields - Combinacoes de estados
+      </h2>
+      <div
+        style="display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-bottom: 32px;"
+      >
+        <a
+          *ngFor="let route of fieldRoutes"
+          [routerLink]="'/' + route.path"
+          style="display: block; padding: 12px 16px; border: 1px solid #dae0e5; border-radius: 4px; text-decoration: none; color: #1464a5; transition: background 0.15s;"
+          onmouseover="this.style.background='#f0f4f8'"
+          onmouseout="this.style.background='white'"
+        >
+          <strong>{{ route.label }}</strong>
+          <span style="display: block; font-size: 12px; color: #888; margin-top: 4px;">{{ route.description }}</span>
+        </a>
+      </div>
+
+      <h2 style="font-size: 18px; margin-bottom: 12px; border-bottom: 2px solid #1464a5; padding-bottom: 8px;">
+        Samples - Componentes basicos
+      </h2>
+      <div
+        style="display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-bottom: 32px;"
+      >
+        <a
+          *ngFor="let route of sampleRoutes"
+          [routerLink]="'/' + route.path"
+          style="display: block; padding: 12px 16px; border: 1px solid #dae0e5; border-radius: 4px; text-decoration: none; color: #1464a5; transition: background 0.15s;"
+          onmouseover="this.style.background='#f0f4f8'"
+          onmouseout="this.style.background='white'"
+        >
+          <strong>{{ route.label }}</strong>
+          <span style="display: block; font-size: 12px; color: #888; margin-top: 4px;">{{ route.description }}</span>
+        </a>
+      </div>
+    </div>
+  `
+})
+export class VisualHomeComponent {
+  fieldRoutes = [
+    {
+      path: 'visual/fields/po-input-states',
+      label: 'po-input',
+      description: 'basic, label, helper, help, disabled, readonly, required, error, loading'
+    },
+    {
+      path: 'visual/fields/po-decimal-states',
+      label: 'po-decimal',
+      description: 'basic, label, helper, help, disabled, readonly, required, error, loading'
+    },
+    {
+      path: 'visual/fields/po-email-states',
+      label: 'po-email',
+      description: 'basic, label, helper, help, disabled, readonly, required, error, loading'
+    },
+    {
+      path: 'visual/fields/po-login-states',
+      label: 'po-login',
+      description: 'basic, label, helper, help, disabled, readonly, required, error, loading'
+    },
+    {
+      path: 'visual/fields/po-number-states',
+      label: 'po-number',
+      description: 'basic, label, helper, help, disabled, readonly, required, error, loading'
+    },
+    {
+      path: 'visual/fields/po-password-states',
+      label: 'po-password',
+      description: 'basic, label, helper, help, disabled, readonly, required, error, loading'
+    },
+    {
+      path: 'visual/fields/po-url-states',
+      label: 'po-url',
+      description: 'basic, label, helper, help, disabled, readonly, required, error, loading'
+    },
+    {
+      path: 'visual/fields/po-textarea-states',
+      label: 'po-textarea',
+      description: 'basic, label, helper, help, disabled, readonly, required, error'
+    },
+    {
+      path: 'visual/fields/po-select-states',
+      label: 'po-select',
+      description: 'basic, label, helper, help, disabled, readonly, required, error'
+    },
+    {
+      path: 'visual/fields/po-combo-states',
+      label: 'po-combo',
+      description: 'basic, label, helper, help, disabled, required, error'
+    },
+    {
+      path: 'visual/fields/po-datepicker-states',
+      label: 'po-datepicker',
+      description: 'basic, label, helper, help, disabled, readonly, required, error'
+    },
+    {
+      path: 'visual/fields/po-datepicker-range-states',
+      label: 'po-datepicker-range',
+      description: 'basic, label, helper, help, disabled, readonly, required'
+    },
+    {
+      path: 'visual/fields/po-lookup-states',
+      label: 'po-lookup',
+      description: 'basic, label, helper, help, disabled, required'
+    },
+    {
+      path: 'visual/fields/po-multiselect-states',
+      label: 'po-multiselect',
+      description: 'basic, label, helper, help, disabled, required'
+    },
+    {
+      path: 'visual/fields/po-rich-text-states',
+      label: 'po-rich-text',
+      description: 'basic, label, helper, help, disabled, readonly, required'
+    },
+    {
+      path: 'visual/fields/po-upload-states',
+      label: 'po-upload',
+      description: 'basic, label, helper, help, disabled, required'
+    },
+    { path: 'visual/fields/po-checkbox-states', label: 'po-checkbox', description: 'basic, label, disabled' },
+    {
+      path: 'visual/fields/po-checkbox-group-states',
+      label: 'po-checkbox-group',
+      description: 'basic, label, helper, help, disabled, required'
+    },
+    { path: 'visual/fields/po-switch-states', label: 'po-switch', description: 'basic, label, helper, disabled' },
+    {
+      path: 'visual/fields/po-radio-group-states',
+      label: 'po-radio-group',
+      description: 'basic, label, helper, help, disabled, required'
+    }
+  ];
+
+  sampleRoutes = [
+    { path: 'visual/po-button-basic', label: 'po-button', description: 'Sample basico' },
+    { path: 'visual/po-button-group-basic', label: 'po-button-group', description: 'Sample basico' },
+    { path: 'visual/po-input-basic', label: 'po-input (sample)', description: 'Sample basico' },
+    { path: 'visual/po-checkbox-basic', label: 'po-checkbox (sample)', description: 'Sample basico' },
+    { path: 'visual/po-switch-basic', label: 'po-switch (sample)', description: 'Sample basico' },
+    { path: 'visual/po-select-basic', label: 'po-select (sample)', description: 'Sample basico' },
+    { path: 'visual/po-table-basic', label: 'po-table', description: 'Sample basico' },
+    { path: 'visual/po-tag-basic', label: 'po-tag', description: 'Sample basico' },
+    { path: 'visual/po-accordion-basic', label: 'po-accordion', description: 'Sample basico' },
+    { path: 'visual/po-divider-basic', label: 'po-divider', description: 'Sample basico' },
+    { path: 'visual/po-progress-basic', label: 'po-progress', description: 'Sample basico' },
+    { path: 'visual/po-input-states', label: 'po-input (estados legado)', description: '13 combinacoes de estado' }
+  ];
+}
diff --git a/e2e/visual/app/app.module.ts b/e2e/visual/app/app.module.ts
new file mode 100644
index 0000000000..f82f8e0a36
--- /dev/null
+++ b/e2e/visual/app/app.module.ts
@@ -0,0 +1,139 @@
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { PoModule } from '@po-ui/ng-components';
+
+import { AppComponent, VisualHomeComponent } from './app.component';
+
+// Sample components - Buttons & Controls
+import { SamplePoButtonBasicComponent } from '../../../projects/ui/src/lib/components/po-button/samples/sample-po-button-basic/sample-po-button-basic.component';
+import { SamplePoButtonGroupBasicComponent } from '../../../projects/ui/src/lib/components/po-button-group/samples/sample-po-button-group-basic/sample-po-button-group-basic.component';
+
+// Sample components - Form Fields
+import { SamplePoInputBasicComponent } from '../../../projects/ui/src/lib/components/po-field/po-input/samples/sample-po-input-basic/sample-po-input-basic.component';
+import { SamplePoCheckboxBasicComponent } from '../../../projects/ui/src/lib/components/po-field/po-checkbox/samples/sample-po-checkbox-basic/sample-po-checkbox-basic.component';
+import { SamplePoSwitchBasicComponent } from '../../../projects/ui/src/lib/components/po-field/po-switch/samples/sample-po-switch-basic/sample-po-switch-basic.component';
+import { SamplePoSelectBasicComponent } from '../../../projects/ui/src/lib/components/po-field/po-select/samples/sample-po-select-basic/sample-po-select-basic.component';
+
+// Sample components - Data Display
+import { SamplePoTableBasicComponent } from '../../../projects/ui/src/lib/components/po-table/samples/sample-po-table-basic/sample-po-table-basic.component';
+import { SamplePoTagBasicComponent } from '../../../projects/ui/src/lib/components/po-tag/samples/sample-po-tag-basic/sample-po-tag-basic.component';
+
+// Sample components - Layout & Navigation
+import { SamplePoAccordionBasicComponent } from '../../../projects/ui/src/lib/components/po-accordion/samples/sample-po-accordion-basic/sample-po-accordion-basic.component';
+import { SamplePoDividerBasicComponent } from '../../../projects/ui/src/lib/components/po-divider/samples/sample-po-divider-basic/sample-po-divider-basic.component';
+import { SamplePoProgressBasicComponent } from '../../../projects/ui/src/lib/components/po-progress/samples/sample-po-progress-basic/sample-po-progress-basic.component';
+
+// Visual test - po-input states (legacy route, kept for backward compatibility)
+import { VisualTestPoInputStatesComponent } from '../po-input/po-input-states.component';
+
+// Visual test - Field state components (co-located in e2e/visual/fields/)
+import { VisualTestPoInputFieldStatesComponent } from '../fields/po-input/po-input-states.component';
+import { VisualTestPoDecimalStatesComponent } from '../fields/po-decimal/po-decimal-states.component';
+import { VisualTestPoEmailStatesComponent } from '../fields/po-email/po-email-states.component';
+import { VisualTestPoNumberStatesComponent } from '../fields/po-number/po-number-states.component';
+import { VisualTestPoPasswordStatesComponent } from '../fields/po-password/po-password-states.component';
+import { VisualTestPoUrlStatesComponent } from '../fields/po-url/po-url-states.component';
+import { VisualTestPoLoginStatesComponent } from '../fields/po-login/po-login-states.component';
+import { VisualTestPoComboStatesComponent } from '../fields/po-combo/po-combo-states.component';
+import { VisualTestPoDatepickerStatesComponent } from '../fields/po-datepicker/po-datepicker-states.component';
+import { VisualTestPoDatepickerRangeStatesComponent } from '../fields/po-datepicker-range/po-datepicker-range-states.component';
+import { VisualTestPoLookupStatesComponent } from '../fields/po-lookup/po-lookup-states.component';
+import { VisualTestPoMultiselectStatesComponent } from '../fields/po-multiselect/po-multiselect-states.component';
+import { VisualTestPoSelectStatesComponent } from '../fields/po-select/po-select-states.component';
+import { VisualTestPoTextareaStatesComponent } from '../fields/po-textarea/po-textarea-states.component';
+import { VisualTestPoRichTextStatesComponent } from '../fields/po-rich-text/po-rich-text-states.component';
+import { VisualTestPoUploadStatesComponent } from '../fields/po-upload/po-upload-states.component';
+import { VisualTestPoCheckboxStatesComponent } from '../fields/po-checkbox/po-checkbox-states.component';
+import { VisualTestPoCheckboxGroupStatesComponent } from '../fields/po-checkbox-group/po-checkbox-group-states.component';
+import { VisualTestPoSwitchStatesComponent } from '../fields/po-switch/po-switch-states.component';
+import { VisualTestPoRadioGroupStatesComponent } from '../fields/po-radio-group/po-radio-group-states.component';
+
+const visualRoutes: Routes = [
+  // Basic sample routes
+  { path: 'visual/po-button-basic', component: SamplePoButtonBasicComponent },
+  { path: 'visual/po-button-group-basic', component: SamplePoButtonGroupBasicComponent },
+  { path: 'visual/po-input-basic', component: SamplePoInputBasicComponent },
+  { path: 'visual/po-checkbox-basic', component: SamplePoCheckboxBasicComponent },
+  { path: 'visual/po-switch-basic', component: SamplePoSwitchBasicComponent },
+  { path: 'visual/po-select-basic', component: SamplePoSelectBasicComponent },
+  { path: 'visual/po-table-basic', component: SamplePoTableBasicComponent },
+  { path: 'visual/po-tag-basic', component: SamplePoTagBasicComponent },
+  { path: 'visual/po-accordion-basic', component: SamplePoAccordionBasicComponent },
+  { path: 'visual/po-divider-basic', component: SamplePoDividerBasicComponent },
+  { path: 'visual/po-progress-basic', component: SamplePoProgressBasicComponent },
+  { path: 'visual/po-input-states', component: VisualTestPoInputStatesComponent },
+
+  // Field state combination routes (e2e/visual/fields/)
+  { path: 'visual/fields/po-input-states', component: VisualTestPoInputFieldStatesComponent },
+  { path: 'visual/fields/po-decimal-states', component: VisualTestPoDecimalStatesComponent },
+  { path: 'visual/fields/po-email-states', component: VisualTestPoEmailStatesComponent },
+  { path: 'visual/fields/po-number-states', component: VisualTestPoNumberStatesComponent },
+  { path: 'visual/fields/po-password-states', component: VisualTestPoPasswordStatesComponent },
+  { path: 'visual/fields/po-url-states', component: VisualTestPoUrlStatesComponent },
+  { path: 'visual/fields/po-login-states', component: VisualTestPoLoginStatesComponent },
+  { path: 'visual/fields/po-combo-states', component: VisualTestPoComboStatesComponent },
+  { path: 'visual/fields/po-datepicker-states', component: VisualTestPoDatepickerStatesComponent },
+  { path: 'visual/fields/po-datepicker-range-states', component: VisualTestPoDatepickerRangeStatesComponent },
+  { path: 'visual/fields/po-lookup-states', component: VisualTestPoLookupStatesComponent },
+  { path: 'visual/fields/po-multiselect-states', component: VisualTestPoMultiselectStatesComponent },
+  { path: 'visual/fields/po-select-states', component: VisualTestPoSelectStatesComponent },
+  { path: 'visual/fields/po-textarea-states', component: VisualTestPoTextareaStatesComponent },
+  { path: 'visual/fields/po-rich-text-states', component: VisualTestPoRichTextStatesComponent },
+  { path: 'visual/fields/po-upload-states', component: VisualTestPoUploadStatesComponent },
+  { path: 'visual/fields/po-checkbox-states', component: VisualTestPoCheckboxStatesComponent },
+  { path: 'visual/fields/po-checkbox-group-states', component: VisualTestPoCheckboxGroupStatesComponent },
+  { path: 'visual/fields/po-switch-states', component: VisualTestPoSwitchStatesComponent },
+  { path: 'visual/fields/po-radio-group-states', component: VisualTestPoRadioGroupStatesComponent },
+
+  // Landing page
+  { path: '', component: VisualHomeComponent }
+];
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    VisualHomeComponent,
+    // Basic samples
+    SamplePoButtonBasicComponent,
+    SamplePoButtonGroupBasicComponent,
+    SamplePoInputBasicComponent,
+    SamplePoCheckboxBasicComponent,
+    SamplePoSwitchBasicComponent,
+    SamplePoSelectBasicComponent,
+    SamplePoTableBasicComponent,
+    SamplePoTagBasicComponent,
+    SamplePoAccordionBasicComponent,
+    SamplePoDividerBasicComponent,
+    SamplePoProgressBasicComponent,
+    VisualTestPoInputStatesComponent,
+    // Field state components
+    VisualTestPoInputFieldStatesComponent,
+    VisualTestPoDecimalStatesComponent,
+    VisualTestPoEmailStatesComponent,
+    VisualTestPoNumberStatesComponent,
+    VisualTestPoPasswordStatesComponent,
+    VisualTestPoUrlStatesComponent,
+    VisualTestPoLoginStatesComponent,
+    VisualTestPoComboStatesComponent,
+    VisualTestPoDatepickerStatesComponent,
+    VisualTestPoDatepickerRangeStatesComponent,
+    VisualTestPoLookupStatesComponent,
+    VisualTestPoMultiselectStatesComponent,
+    VisualTestPoSelectStatesComponent,
+    VisualTestPoTextareaStatesComponent,
+    VisualTestPoRichTextStatesComponent,
+    VisualTestPoUploadStatesComponent,
+    VisualTestPoCheckboxStatesComponent,
+    VisualTestPoCheckboxGroupStatesComponent,
+    VisualTestPoSwitchStatesComponent,
+    VisualTestPoRadioGroupStatesComponent
+  ],
+  bootstrap: [AppComponent],
+  imports: [BrowserModule, FormsModule, RouterModule.forRoot(visualRoutes, {}), PoModule],
+  providers: [provideHttpClient(withInterceptorsFromDi())]
+})
+export class VisualAppModule {}
diff --git a/e2e/visual/app/index.html b/e2e/visual/app/index.html
new file mode 100644
index 0000000000..0d3f6337af
--- /dev/null
+++ b/e2e/visual/app/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>PO UI Visual Regression Tests</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
+</html>
diff --git a/e2e/visual/app/main.ts b/e2e/visual/app/main.ts
new file mode 100644
index 0000000000..fdaeee7588
--- /dev/null
+++ b/e2e/visual/app/main.ts
@@ -0,0 +1,8 @@
+import { enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { VisualAppModule } from './app.module';
+
+platformBrowserDynamic()
+  .bootstrapModule(VisualAppModule, { applicationProviders: [provideZoneChangeDetection()] })
+  .catch(err => console.error('Error in visual-app bootstrap:', err));
diff --git a/e2e/visual/app/polyfills.ts b/e2e/visual/app/polyfills.ts
new file mode 100644
index 0000000000..aa09a9ff6a
--- /dev/null
+++ b/e2e/visual/app/polyfills.ts
@@ -0,0 +1 @@
+import 'zone.js';
diff --git a/e2e/visual/fields/po-checkbox-group/po-checkbox-group-states.component.html b/e2e/visual/fields/po-checkbox-group/po-checkbox-group-states.component.html
new file mode 100644
index 0000000000..633d02c004
--- /dev/null
+++ b/e2e/visual/fields/po-checkbox-group/po-checkbox-group-states.component.html
@@ -0,0 +1,41 @@
+<div style="padding: 16px; display: flex; flex-direction: column; gap: 24px">
+  <!-- State: basic -->
+  <div data-testid="state-basic">
+    <po-checkbox-group name="basic" p-label="Grupo basico" [p-options]="options"></po-checkbox-group>
+  </div>
+
+  <!-- State: label + helper -->
+  <div data-testid="state-label-helper">
+    <po-checkbox-group
+      name="label-helper"
+      p-label="Grupo com helper"
+      p-helper="Texto de ajuda do helper"
+      [p-options]="options"
+    ></po-checkbox-group>
+  </div>
+
+  <!-- State: label + help-text -->
+  <div data-testid="state-label-help">
+    <po-checkbox-group
+      name="label-help"
+      p-label="Grupo com help"
+      p-help="Texto de apoio do campo"
+      [p-options]="options"
+    ></po-checkbox-group>
+  </div>
+
+  <!-- State: disabled -->
+  <div data-testid="state-disabled">
+    <po-checkbox-group
+      name="disabled"
+      p-label="Grupo desabilitado"
+      p-disabled
+      [p-options]="options"
+    ></po-checkbox-group>
+  </div>
+
+  <!-- State: required -->
+  <div data-testid="state-required">
+    <po-checkbox-group name="required" p-label="Grupo obrigatorio" p-required [p-options]="options"></po-checkbox-group>
+  </div>
+</div>
diff --git a/e2e/visual/fields/po-checkbox-group/po-checkbox-group-states.component.ts b/e2e/visual/fields/po-checkbox-group/po-checkbox-group-states.component.ts
new file mode 100644
index 0000000000..c951ac374f
--- /dev/null
+++ b/e2e/visual/fields/po-checkbox-group/po-checkbox-group-states.component.ts
@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-visual-test-po-checkbox-group-states',
+  templateUrl: './po-checkbox-group-states.component.html',
+  standalone: false
+})
+export class VisualTestPoCheckboxGroupStatesComponent {
+  options = [
+    { label: 'Opcao 1', value: '1' },
+    { label: 'Opcao 2', value: '2' },
+    { label: 'Opcao 3', value: '3' }
+  ];
+}
diff --git a/e2e/visual/fields/po-checkbox-group/po-checkbox-group-states.visual.spec.ts b/e2e/visual/fields/po-checkbox-group/po-checkbox-group-states.visual.spec.ts
new file mode 100644
index 0000000000..a001baeef1
--- /dev/null
+++ b/e2e/visual/fields/po-checkbox-group/po-checkbox-group-states.visual.spec.ts
@@ -0,0 +1,33 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('po-checkbox-group - visual regression por estado', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/visual/fields/po-checkbox-group-states');
+    await page.waitForSelector('[data-testid="state-basic"]');
+  });
+
+  test('basic', async ({ page }) => {
+    const el = page.locator('[data-testid="state-basic"]');
+    await expect(el).toHaveScreenshot('po-checkbox-group-state-basic.png');
+  });
+
+  test('label + helper', async ({ page }) => {
+    const el = page.locator('[data-testid="state-label-helper"]');
+    await expect(el).toHaveScreenshot('po-checkbox-group-state-label-helper.png');
+  });
+
+  test('label + help-text', async ({ page }) => {
+    const el = page.locator('[data-testid="state-label-help"]');
+    await expect(el).toHaveScreenshot('po-checkbox-group-state-label-help.png');
+  });
+
+  test('disabled', async ({ page }) => {
+    const el = page.locator('[data-testid="state-disabled"]');
+    await expect(el).toHaveScreenshot('po-checkbox-group-state-disabled.png');
+  });
+
+  test('required', async ({ page }) => {
+    const el = page.locator('[data-testid="state-required"]');
+    await expect(el).toHaveScreenshot('po-checkbox-group-state-required.png');
+  });
+});
diff --git a/e2e/visual/fields/po-checkbox/po-checkbox-states.component.html b/e2e/visual/fields/po-checkbox/po-checkbox-states.component.html
new file mode 100644
index 0000000000..60c6a4bb92
--- /dev/null
+++ b/e2e/visual/fields/po-checkbox/po-checkbox-states.component.html
@@ -0,0 +1,31 @@
+<div style="padding: 16px; display: flex; flex-direction: column; gap: 24px">
+  <!-- State: basic -->
+  <div data-testid="state-basic">
+    <po-checkbox name="basic" p-label="Checkbox basico"></po-checkbox>
+  </div>
+
+  <!-- State: label + help-text -->
+  <div data-testid="state-label-help">
+    <po-checkbox name="label-help" p-label="Checkbox com help" p-help="Texto de apoio do campo"></po-checkbox>
+  </div>
+
+  <!-- State: disabled -->
+  <div data-testid="state-disabled">
+    <po-checkbox name="disabled" p-label="Checkbox desabilitado" p-disabled></po-checkbox>
+  </div>
+
+  <!-- State: disabled + checked -->
+  <div data-testid="state-disabled-checked">
+    <po-checkbox
+      name="disabled-checked"
+      p-label="Checkbox desabilitado marcado"
+      p-disabled
+      [(ngModel)]="checkedValue"
+    ></po-checkbox>
+  </div>
+
+  <!-- State: required -->
+  <div data-testid="state-required">
+    <po-checkbox name="required" p-label="Checkbox obrigatorio" p-required></po-checkbox>
+  </div>
+</div>
diff --git a/e2e/visual/fields/po-checkbox/po-checkbox-states.component.ts b/e2e/visual/fields/po-checkbox/po-checkbox-states.component.ts
new file mode 100644
index 0000000000..7091801caa
--- /dev/null
+++ b/e2e/visual/fields/po-checkbox/po-checkbox-states.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-visual-test-po-checkbox-states',
+  templateUrl: './po-checkbox-states.component.html',
+  standalone: false
+})
+export class VisualTestPoCheckboxStatesComponent {
+  checkedValue = true;
+}
diff --git a/e2e/visual/fields/po-checkbox/po-checkbox-states.visual.spec.ts b/e2e/visual/fields/po-checkbox/po-checkbox-states.visual.spec.ts
new file mode 100644
index 0000000000..19163a95ff
--- /dev/null
+++ b/e2e/visual/fields/po-checkbox/po-checkbox-states.visual.spec.ts
@@ -0,0 +1,33 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('po-checkbox - visual regression por estado', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/visual/fields/po-checkbox-states');
+    await page.waitForSelector('[data-testid="state-basic"]');
+  });
+
+  test('basic', async ({ page }) => {
+    const el = page.locator('[data-testid="state-basic"]');
+    await expect(el).toHaveScreenshot('po-checkbox-state-basic.png');
+  });
+
+  test('label + help-text', async ({ page }) => {
+    const el = page.locator('[data-testid="state-label-help"]');
+    await expect(el).toHaveScreenshot('po-checkbox-state-label-help.png');
+  });
+
+  test('disabled', async ({ page }) => {
+    const el = page.locator('[data-testid="state-disabled"]');
+    await expect(el).toHaveScreenshot('po-checkbox-state-disabled.png');
+  });
+
+  test('disabled + checked', async ({ page }) => {
+    const el = page.locator('[data-testid="state-disabled-checked"]');
+    await expect(el).toHaveScreenshot('po-checkbox-state-disabled-checked.png');
+  });
+
+  test('required', async ({ page }) => {
+    const el = page.locator('[data-testid="state-required"]');
+    await expect(el).toHaveScreenshot('po-checkbox-state-required.png');
+  });
+});
diff --git a/e2e/visual/fields/po-combo/po-combo-states.component.html b/e2e/visual/fields/po-combo/po-combo-states.component.html
new file mode 100644
index 0000000000..520dc8a138
--- /dev/null
+++ b/e2e/visual/fields/po-combo/po-combo-states.component.html
@@ -0,0 +1,69 @@
+<div style="padding: 16px; display: flex; flex-direction: column; gap: 24px">
+  <!-- State: basic -->
+  <div data-testid="state-basic">
+    <po-combo name="basic" p-placeholder="Selecione uma opcao" [p-options]="options"></po-combo>
+  </div>
+
+  <!-- State: label -->
+  <div data-testid="state-label">
+    <po-combo name="label" p-label="Label do campo" p-placeholder="Campo com label" [p-options]="options"></po-combo>
+  </div>
+
+  <!-- State: label + helper -->
+  <div data-testid="state-label-helper">
+    <po-combo
+      name="label-helper"
+      p-label="Label do campo"
+      p-helper="Texto de ajuda do helper"
+      p-placeholder="Campo com label e helper"
+      [p-options]="options"
+    ></po-combo>
+  </div>
+
+  <!-- State: label + help-text -->
+  <div data-testid="state-label-help">
+    <po-combo
+      name="label-help"
+      p-label="Label do campo"
+      p-help="Texto de apoio do campo"
+      p-placeholder="Campo com label e help"
+      [p-options]="options"
+    ></po-combo>
+  </div>
+
+  <!-- State: disabled -->
+  <div data-testid="state-disabled">
+    <po-combo
+      name="disabled"
+      p-label="Campo desabilitado"
+      p-disabled
+      p-placeholder="Campo desabilitado"
+      [p-options]="options"
+    ></po-combo>
+  </div>
+
+  <!-- State: required -->
+  <div data-testid="state-required">
+    <po-combo
+      name="required"
+      p-label="Campo obrigatorio"
+      p-required
+      [p-show-required]="true"
+      p-placeholder="Campo obrigatorio"
+      [p-options]="options"
+    ></po-combo>
+  </div>
+
+  <!-- State: required + errorMessage -->
+  <div data-testid="state-required-error">
+    <po-combo
+      name="required-error"
+      p-label="Campo obrigatorio com erro"
+      p-required
+      [p-show-required]="true"
+      p-field-error-message="Este campo e obrigatorio"
+      p-placeholder="Campo obrigatorio com mensagem de erro"
+      [p-options]="options"
+    ></po-combo>
+  </div>
+</div>
diff --git a/e2e/visual/fields/po-combo/po-combo-states.component.ts b/e2e/visual/fields/po-combo/po-combo-states.component.ts
new file mode 100644
index 0000000000..f710d7e7b4
--- /dev/null
+++ b/e2e/visual/fields/po-combo/po-combo-states.component.ts
@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-visual-test-po-combo-states',
+  templateUrl: './po-combo-states.component.html',
+  standalone: false
+})
+export class VisualTestPoComboStatesComponent {
+  options = [
+    { label: 'Opcao 1', value: '1' },
+    { label: 'Opcao 2', value: '2' },
+    { label: 'Opcao 3', value: '3' }
+  ];
+}
diff --git a/e2e/visual/fields/po-combo/po-combo-states.visual.spec.ts b/e2e/visual/fields/po-combo/po-combo-states.visual.spec.ts
new file mode 100644
index 0000000000..fe6073072b
--- /dev/null
+++ b/e2e/visual/fields/po-combo/po-combo-states.visual.spec.ts
@@ -0,0 +1,45 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('po-combo - visual regression por estado', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/visual/fields/po-combo-states');
+    await page.waitForSelector('[data-testid="state-basic"]');
+  });
+
+  test('basic', async ({ page }) => {
+    const el = page.locator('[data-testid="state-basic"]');
+    await expect(el).toHaveScreenshot('po-combo-state-basic.png');
+  });
+
+  test('label', async ({ page }) => {
+    const el = page.locator('[data-testid="state-label"]');
+    await expect(el).toHaveScreenshot('po-combo-state-label.png');
+  });
+
+  test('label + helper', async ({ page }) => {
+    const el = page.locator('[data-testid="state-label-helper"]');
+    await expect(el).toHaveScreenshot('po-combo-state-label-helper.png');
+  });
+
+  test('label + help-text', async ({ page }) => {
+    const el = page.locator('[data-testid="state-label-help"]');
+    await expect(el).toHaveScreenshot('po-combo-state-label-help.png');
+  });
+
+  test('disabled', async ({ page }) => {
+    const el = page.locator('[data-testid="state-disabled"]');
+    await expect(el).toHaveScreenshot('po-combo-state-disabled.png');
+  });
+
+  test('required', async ({ page }) => {
+    const el = page.locator('[data-testid="state-required"]');
+    await expect(el).toHaveScreenshot('po-combo-state-required.png');
+  });
+
+  test('required + errorMessage', async ({ page }) => {
+    const el = page.locator('[data-testid="state-required-error"]');
+    await el.locator('input').focus();
+    await el.locator('input').blur();
+    await expect(el).toHaveScreenshot('po-combo-state-required-error.png');
+  });
+});
diff --git a/e2e/visual/fields/po-datepicker-range/po-datepicker-range-states.component.html b/e2e/visual/fields/po-datepicker-range/po-datepicker-range-states.component.html
new file mode 100644
index 0000000000..fb65a7bf4c
--- /dev/null
+++ b/e2e/visual/fields/po-datepicker-range/po-datepicker-range-states.component.html
@@ -0,0 +1,67 @@
+<div style="padding: 16px; display: flex; flex-direction: column; gap: 24px">
+  <!-- State: basic -->
+  <div data-testid="state-basic">
+    <po-datepicker-range name="basic" p-placeholder="Selecione um periodo"></po-datepicker-range>
+  </div>
+
+  <!-- State: label -->
+  <div data-testid="state-label">
+    <po-datepicker-range name="label" p-label="Label do campo" p-placeholder="Campo com label"></po-datepicker-range>
+  </div>
+
+  <!-- State: label + helper -->
+  <div data-testid="state-label-helper">
+    <po-datepicker-range
+      name="label-helper"
+      p-label="Label do campo"
+      p-helper="Texto de ajuda do helper"
+      p-placeholder="Campo com label e helper"
+    ></po-datepicker-range>
+  </div>
+
+  <!-- State: label + help-text -->
+  <div data-testid="state-label-help">
+    <po-datepicker-range
+      name="label-help"
+      p-label="Label do campo"
+      p-help="Texto de apoio do campo"
+      p-placeholder="Campo com label e help"
+    ></po-datepicker-range>
+  </div>
+
+  <!-- State: disabled -->
+  <div data-testid="state-disabled">
+    <po-datepicker-range
+      name="disabled"
+      p-label="Campo desabilitado"
+      p-disabled
+      p-placeholder="Campo desabilitado"
+    ></po-datepicker-range>
+  </div>
+
+  <!-- State: required -->
+  <div data-testid="state-required">
+    <po-datepicker-range
+      name="required"
+      p-label="Campo obrigatorio"
+      p-required
+      p-placeholder="Campo obrigatorio"
+    ></po-datepicker-range>
+  </div>
+
+  <!-- State: loading -->
+  <div data-testid="state-loading">
+    <po-datepicker-range name="loading" p-loading p-placeholder="Carregando..."></po-datepicker-range>
+  </div>
+
+  <!-- State: loading + label + helper -->
+  <div data-testid="state-loading-label-helper">
+    <po-datepicker-range
+      name="loading-label-helper"
+      p-label="Campo com loading, label e helper"
+      p-loading
+      p-helper="Texto de ajuda"
+      p-placeholder="Carregando..."
+    ></po-datepicker-range>
+  </div>
+</div>
diff --git a/e2e/visual/fields/po-datepicker-range/po-datepicker-range-states.component.ts b/e2e/visual/fields/po-datepicker-range/po-datepicker-range-states.component.ts
new file mode 100644
index 0000000000..ed5bf85386
--- /dev/null
+++ b/e2e/visual/fields/po-datepicker-range/po-datepicker-range-states.component.ts
@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-visual-test-po-datepicker-range-states',
+  templateUrl: './po-datepicker-range-states.component.html',
+  standalone: false
+})
+export class VisualTestPoDatepickerRangeStatesComponent {}
diff --git a/e2e/visual/fields/po-datepicker-range/po-datepicker-range-states.visual.spec.ts b/e2e/visual/fields/po-datepicker-range/po-datepicker-range-states.visual.spec.ts
new file mode 100644
index 0000000000..8ef6f1bdba
--- /dev/null
+++ b/e2e/visual/fields/po-datepicker-range/po-datepicker-range-states.visual.spec.ts
@@ -0,0 +1,48 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('po-datepicker-range - visual regression por estado', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/visual/fields/po-datepicker-range-states');
+    await page.waitForSelector('[data-testid="state-basic"]');
+  });
+
+  test('basic', async ({ page }) => {
+    const el = page.locator('[data-testid="state-basic"]');
+    await expect(el).toHaveScreenshot('po-datepicker-range-state-basic.png');
+  });
+
+  test('label', async ({ page }) => {
+    const el = page.locator('[data-testid="state-label"]');
+    await expect(el).toHaveScreenshot('po-datepicker-range-state-label.png');
+  });
+
+  test('label + helper', async ({ page }) => {
+    const el = page.locator('[data-testid="state-label-helper"]');
+    await expect(el).toHaveScreenshot('po-datepicker-range-state-label-helper.png');
+  });
+
+  test('label + help-text', async ({ page }) => {
+    const el = page.locator('[data-testid="state-label-help"]');
+    await expect(el).toHaveScreenshot('po-datepicker-range-state-label-help.png');
+  });
+
+  test('disabled', async ({ page }) => {
+    const el = page.locator('[data-testid="state-disabled"]');
+    await expect(el).toHaveScreenshot('po-datepicker-range-state-disabled.png');
+  });
+
+  test('required', async ({ page }) => {
+    const el = page.locator('[data-testid="state-required"]');
+    await expect(el).toHaveScreenshot('po-datepicker-range-state-required.png');
+  });
+
+  test('loading', async ({ page }) => {
+    const el = page.locator('[data-testid="state-loading"]');
+    await expect(el).toHaveScreenshot('po-datepicker-range-state-loading.png');
+  });
+
+  test('loading + label + helper', async ({ page }) => {
+    const el = page.locator('[data-testid="state-loading-label-helper"]');
+    await expect(el).toHaveScreenshot('po-datepicker-range-state-loading-label-helper.png');
+  });
+});
diff --git a/e2e/visual/fields/po-datepicker/po-datepicker-states.component.html b/e2e/visual/fields/po-datepicker/po-datepicker-states.component.html
new file mode 100644
index 0000000000..c23a69cd60
--- /dev/null
+++ b/e2e/visual/fields/po-datepicker/po-datepicker-states.component.html
@@ -0,0 +1,91 @@
+<div style="padding: 16px; display: flex; flex-direction: column; gap: 24px">
+  <!-- State: basic -->
+  <div data-testid="state-basic">
+    <po-datepicker name="basic" p-placeholder="Selecione uma data"></po-datepicker>
+  </div>
+
+  <!-- State: label -->
+  <div data-testid="state-label">
+    <po-datepicker name="label" p-label="Label do campo" p-placeholder="Campo com label"></po-datepicker>
+  </div>
+
+  <!-- State: label + helper -->
+  <div data-testid="state-label-helper">
+    <po-datepicker
+      name="label-helper"
+      p-label="Label do campo"
+      p-helper="Texto de ajuda do helper"
+      p-placeholder="Campo com label e helper"
+    ></po-datepicker>
+  </div>
+
+  <!-- State: label + help-text -->
+  <div data-testid="state-label-help">
+    <po-datepicker
+      name="label-help"
+      p-label="Label do campo"
+      p-help="Texto de apoio do campo"
+      p-placeholder="Campo com label e help"
+    ></po-datepicker>
+  </div>
+
+  <!-- State: disabled -->
+  <div data-testid="state-disabled">
+    <po-datepicker
+      name="disabled"
+      p-label="Campo desabilitado"
+      p-disabled
+      p-placeholder="Campo desabilitado"
+    ></po-datepicker>
+  </div>
+
+  <!-- State: readonly -->
+  <div data-testid="state-readonly">
+    <po-datepicker
+      name="readonly"
+      p-label="Campo somente leitura"
+      p-readonly
+      p-placeholder="Campo readonly"
+    ></po-datepicker>
+  </div>
+
+  <!-- State: required -->
+  <div data-testid="state-required">
+    <po-datepicker
+      name="required"
+      p-label="Campo obrigatorio"
+      p-required
+      [p-show-required]="true"
+      p-placeholder="Campo obrigatorio"
+    ></po-datepicker>
+  </div>
+
+  <!-- State: required + errorMessage -->
+  <div data-testid="state-required-error">
+    <po-datepicker
+      name="required-error"
+      p-label="Campo obrigatorio com erro"
+      p-required
+      [p-show-required]="true"
+      p-error-pattern="Este campo e obrigatorio"
+      [p-required-field-error-message]="true"
+      p-placeholder="Campo obrigatorio com mensagem de erro"
+    ></po-datepicker>
+  </div>
+
+  <!-- State: loading -->
+  <div data-testid="state-loading">
+    <po-datepicker name="loading" p-loading p-placeholder="Carregando..."></po-datepicker>
+  </div>
+
+  <!-- State: loading + label + helper -->
+  <div data-testid="state-loading-label-helper">
+    <po-datepicker
+      name="loading-label-helper"
+      p-label="Campo com loading, label e helper"
+      p-loading
+      p-helper="Texto de ajuda"
+      p-placeholder="Carregando..."
+    ></po-datepicker>
+  </div>
+</div>
diff --git a/e2e/visual/fields/po-datepicker/po-datepicker-states.component.ts b/e2e/visual/fields/po-datepicker/po-datepicker-states.component.ts
new file mode 100644
index 0000000000..b312228b7e
--- /dev/null
+++ b/e2e/visual/fields/po-datepicker/po-datepicker-states.component.ts
@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-visual-test-po-datepicker-states',
+  templateUrl: './po-datepicker-states.component.html',
+  standalone: false
+})
+export class VisualTestPoDatepickerStatesComponent {}
diff --git a/e2e/visual/fields/po-datepicker/po-datepicker-states.visual.spec.ts b/e2e/visual/fields/po-datepicker/po-datepicker-states.visual.spec.ts
new file mode 100644
index 0000000000..12158e37f3
--- /dev/null
+++ b/e2e/visual/fields/po-datepicker/po-datepicker-states.visual.spec.ts
@@ -0,0 +1,60 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('po-datepicker - visual regression por estado', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/visual/fields/po-datepicker-states');
+    await page.waitForSelector('[data-testid="state-basic"]');
+  });
+
+  test('basic', async ({ page }) => {
+    const el = page.locator('[data-testid="state-basic"]');
+    await expect(el).toHaveScreenshot('po-datepicker-state-basic.png');
+  });
+
+  test('label', async ({ page }) => {
+    const el = page.locator('[data-testid="state-label"]');
+    await expect(el).toHaveScreenshot('po-datepicker-state-label.png');
+  });
+
+  test('label + helper', async ({ page }) => {
+    const el = page.locator('[data-testid="state-label-helper"]');
+    await expect(el).toHaveScreenshot('po-datepicker-state-label-helper.png');
+  });
+
+  test('label + help-text', async ({ page }) => {
+    const el = page.locator('[data-testid="state-label-help"]');
+    await expect(el).toHaveScreenshot('po-datepicker-state-label-help.png');
+  });
+
+  test('disabled', async ({ page }) => {
+    const el = page.locator('[data-testid="state-disabled"]');
+    await expect(el).toHaveScreenshot('po-datepicker-state-disabled.png');
+  });
+
+  test('readonly', async ({ page }) => {
+    const el = page.locator('[data-testid="state-readonly"]');
+    await expect(el).toHaveScreenshot('po-datepicker-state-readonly.png');
+  });
+
+  test('required', async ({ page }) => {
+    const el = page.locator('[data-testid="state-required"]');
+    await expect(el).toHaveScreenshot('po-datepicker-state-required.png');
+  });
+
+  test('required + errorMessage', async ({ page }) => {
+    const el = page.locator('[data-testid="state-required-error"]');
+    await el.locator('input').first().focus();
+    await el.locator('input').first().blur();
+    await expect(el).toHaveScreenshot('po-datepicker-state-required-error.png');
+  });
+
+  test('loading', async ({ page }) => {
+    const el = page.locator('[data-testid="state-loading"]');
+    await expect(el).toHaveScreenshot('po-datepicker-state-loading.png');
+  });
+
+  test('loading + label + helper', async ({ page }) => {
+    const el = page.locator('[data-testid="state-loading-label-helper"]');
+    await expect(el).toHaveScreenshot('po-datepicker-state-loading-label-helper.png');
+  });
+});
diff --git a/e2e/visual/fields/po-decimal/po-decimal-states.component.html b/e2e/visual/fields/po-decimal/po-decimal-states.component.html
new file mode 100644
index 0000000000..f353dfab63
--- /dev/null
+++ b/e2e/visual/fields/po-decimal/po-decimal-states.component.html
@@ -0,0 +1,87 @@
+<div style="padding: 16px; display: flex; flex-direction: column; gap: 24px">
+  <!-- State: basic -->
+  <div data-testid="state-basic">
+    <po-decimal name="basic" p-placeholder="Digite um valor"></po-decimal>
+  </div>
+
+  <!-- State: label -->
+  <div data-testid="state-label">
+    <po-decimal name="label" p-label="Label do campo" p-placeholder="Campo com label"></po-decimal>
+  </div>
+
+  <!-- State: label + helper -->
+  <div data-testid="state-label-helper">
+    <po-decimal
+      name="label-helper"
+      p-label="Label do campo"
+      p-helper="Texto de ajuda do helper"
+      p-placeholder="Campo com label e helper"
+    ></po-decimal>
+  </div>
+
+  <!-- State: label + help-text -->
+  <div data-testid="state-label-help">
+    <po-decimal
+      name="label-help"
+      p-label="Label do campo"
+      p-help="Texto de apoio do campo"
+      p-placeholder="Campo com label e help"
+    ></po-decimal>
+  </div>
+
+  <!-- State: disabled -->
+  <div data-testid="state-disabled">
+    <po-decimal name="disabled" p-label="Campo desabilitado" p-disabled p-placeholder="Campo desabilitado"></po-decimal>
+  </div>
+
+  <!-- State: readonly -->
+  <div data-testid="state-readonly">
+    <po-decimal
+      name="readonly"
+      p-label="Campo somente leitura"
+      p-readonly
+      p-placeholder="Campo readonly"
+      [(ngModel)]="readonlyValue"
+    ></po-decimal>
+  </div>
+
+  <!-- State: required -->
+  <div data-testid="state-required">
+    <po-decimal
+      name="required"
+      p-label="Campo obrigatorio"
+      p-required
+      [p-show-required]="true"
+      p-placeholder="Campo obrigatorio"
+    ></po-decimal>
+  </div>
+
+  <!-- State: required + errorMessage -->
+  <div data-testid="state-required-error">
+    <po-decimal
+      name="required-error"
+      p-label="Campo obrigatorio com erro"
+      p-required
+      [p-show-required]="true"
+      p-error-pattern="Este campo e obrigatorio"
+      [p-required-field-error-message]="true"
+      p-placeholder="Campo obrigatorio com mensagem de erro"
+    ></po-decimal>
+  </div>
+
+  <!-- State: loading -->
+  <div data-testid="state-loading">
+    <po-decimal name="loading" p-loading p-placeholder="Carregando..."></po-decimal>
+  </div>
+
+  <!-- State: loading + label + helper -->
+  <div data-testid="state-loading-label-helper">
+    <po-decimal
+      name="loading-label-helper"
+      p-label="Campo com loading, label e helper"
+      p-loading
+      p-helper="Texto de ajuda"
+      p-placeholder="Carregando..."
+    ></po-decimal>
+  </div>
+</div>
diff --git a/e2e/visual/fields/po-decimal/po-decimal-states.component.ts b/e2e/visual/fields/po-decimal/po-decimal-states.component.ts
new file mode 100644
index 0000000000..dc40f42972
--- /dev/null
+++ b/e2e/visual/fields/po-decimal/po-decimal-states.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-visual-test-po-decimal-states',
+  templateUrl: './po-decimal-states.component.html',
+  standalone: false
+})
+export class VisualTestPoDecimalStatesComponent {
+  readonlyValue = 1234.56;
+}
diff --git a/e2e/visual/fields/po-decimal/po-decimal-states.visual.spec.ts b/e2e/visual/fields/po-decimal/po-decimal-states.visual.spec.ts
new file mode 100644
index 0000000000..3f266ed4fb
--- /dev/null
+++ b/e2e/visual/fields/po-decimal/po-decimal-states.visual.spec.ts
@@ -0,0 +1,60 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('po-decimal - visual regression por estado', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/visual/fields/po-decimal-states');
+    await page.waitForSelector('[data-testid="state-basic"]');
+  });
+
+  test('basic', async ({ page }) => {
+    const el = page.locator('[data-testid="state-basic"]');
+    await expect(el).toHaveScreenshot('po-decimal-state-basic.png');
+  });
+
+  test('label', async ({ page }) => {
+    const el = page.locator('[data-testid="state-label"]');
+    await expect(el).toHaveScreenshot('po-decimal-state-label.png');
+  });
+
+  test('label + helper', async ({ page }) => {
+    const el = page.locator('[data-testid="state-label-helper"]');
+    await expect(el).toHaveScreenshot('po-decimal-state-label-helper.png');
+  });
+
+  test('label + help-text', async ({ page }) => {
+    const el = page.locator('[data-testid="state-label-help"]');
+    await expect(el).toHaveScreenshot('po-decimal-state-label-help.png');
+  });
+
+  test('disabled', async ({ page }) => {
+    const el = page.locator('[data-testid="state-disabled"]');
+    await expect(el).toHaveScreenshot('po-decimal-state-disabled.png');
+  });
+
+  test('readonly', async ({ page }) => {
+    const el = page.locator('[data-testid="state-readonly"]');
+    await expect(el).toHaveScreenshot('po-decimal-state-readonly.png');
+  });
+
+  test('required', async ({ page }) => {
+    const el = page.locator('[data-testid="state-required"]');
+    await expect(el).toHaveScreenshot('po-decimal-state-required.png');
+  });
+
+  test('required + errorMessage', async ({ page }) => {
+    const el = page.locator('[data-testid="state-required-error"]');
+    await el.locator('input').focus();
+    await el.locator('input').blur();
+    await expect(el).toHaveScreenshot('po-decimal-state-required-error.png');
+  });
+
+  test('loading', async ({ page }) => {
+    const el = page.locator('[data-testid="state-loading"]');
+    await expect(el).toHaveScreenshot('po-decimal-state-loading.png');
+  });
+
+  test('loading + label + helper', async ({ page }) => {
+    const el = page.locator('[data-testid="state-loading-label-helper"]');
+    await expect(el).toHaveScreenshot('po-decimal-state-loading-label-helper.png');
+  });
+});
diff --git a/e2e/visual/fields/po-email/po-email-states.component.html b/e2e/visual/fields/po-email/po-email-states.component.html
new file mode 100644
index 0000000000..471dc60d58
--- /dev/null
+++ b/e2e/visual/fields/po-email/po-email-states.component.html
@@ -0,0 +1,87 @@
+<div style="padding: 16px; display: flex; flex-direction: column; gap: 24px">
+  <!-- State: basic -->
+  <div data-testid="state-basic">
+    <po-email name="basic" p-placeholder="Digite um e-mail"></po-email>
+  </div>
+
+  <!-- State: label -->
+  <div data-testid="state-label">
+    <po-email name="label" p-label="Label do campo" p-placeholder="Campo com label"></po-email>
+  </div>
+
+  <!-- State: label + helper -->
+  <div data-testid="state-label-helper">
+    <po-email
+      name="label-helper"
+      p-label="Label do campo"
+      p-helper="Texto de ajuda do helper"
+      p-placeholder="Campo com label e helper"
+    ></po-email>
+  </div>
+
+  <!-- State: label + help-text -->
+  <div data-testid="state-label-help">
+    <po-email
+      name="label-help"
+      p-label="Label do campo"
+      p-help="Texto de apoio do campo"
+      p-placeholder="Campo com label e help"
+    ></po-email>
+  </div>
+
+  <!-- State: disabled -->
+  <div data-testid="state-disabled">
+    <po-email name="disabled" p-label="Campo desabilitado" p-disabled p-placeholder="Campo desabilitado"></po-email>
+  </div>
+
+  <!-- State: readonly -->
+  <div data-testid="state-readonly">
+    <po-email
+      name="readonly"
+      p-label="Campo somente leitura"
+      p-readonly
+      p-placeholder="Campo readonly"
+      [(ngModel)]="readonlyValue"
+    ></po-email>
+  </div>
+
+  <!-- State: required -->
+  <div data-testid="state-required">
+    <po-email
+      name="required"
+      p-label="Campo obrigatorio"
+      p-required
+      [p-show-required]="true"
+      p-placeholder="Campo obrigatorio"
+    ></po-email>
+  </div>
+
+  <!-- State: required + errorMessage -->
+  <div data-testid="state-required-error">
+    <po-email
+      name="required-error"
+      p-label="Campo obrigatorio com erro"
+      p-required
+      [p-show-required]="true"
+      p-error-pattern="Este campo e obrigatorio"
+      [p-required-field-error-message]="true"
+      p-placeholder="Campo obrigatorio com mensagem de erro"
+    ></po-email>
+  </div>
+
+  <!-- State: loading -->
+  <div data-testid="state-loading">
+    <po-email name="loading" p-loading p-placeholder="Carregando..."></po-email>
+  </div>
+
+  <!-- State: loading + label + helper -->
+  <div data-testid="state-loading-label-helper">
+    <po-email
+      name="loading-label-helper"
+      p-label="Campo com loading, label e helper"
+      p-loading
+      p-helper="Texto de ajuda"
+      p-placeholder="Carregando..."
+    ></po-email>
+  </div>
+</div>
diff --git a/e2e/visual/fields/po-email/po-email-states.component.ts b/e2e/visual/fields/po-email/po-email-states.component.ts
new file mode 100644
index 0000000000..382710993d
--- /dev/null
+++ b/e2e/visual/fields/po-email/po-email-states.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-visual-test-po-email-states',
+  templateUrl: './po-email-states.component.html',
+  standalone: false
+})
+export class VisualTestPoEmailStatesComponent {
+  readonlyValue = 'usuario@email.com';
+}
diff --git a/e2e/visual/fields/po-email/po-email-states.visual.spec.ts b/e2e/visual/fields/po-email/po-email-states.visual.spec.ts
new file mode 100644
index 0000000000..8b28cc1c7d
--- /dev/null
+++ b/e2e/visual/fields/po-email/po-email-states.visual.spec.ts
@@ -0,0 +1,60 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('po-email - visual regression por estado', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/visual/fields/po-email-states');
+    await page.waitForSelector('[data-testid="state-basic"]');
+  });
+
+  test('basic', async ({ page }) => {
+    const el = page.locator('[data-testid="state-basic"]');
+    await expect(el).toHaveScreenshot('po-email-state-basic.png');
+  });
+
+  test('label', async ({ page }) => {
+    const el = page.locator('[data-testid="state-label"]');
+    await expect(el).toHaveScreenshot('po-email-state-label.png');
+  });
+
+  test('label + helper', async ({ page }) => {
+    const el = page.locator('[data-testid="state-label-helper"]');
+    await expect(el).toHaveScreenshot('po-email-state-label-helper.png');
+  });
+
+  test('label + help-text', async ({ page }) => {
+    const el = page.locator('[data-testid="state-label-help"]');
+    await expect(el).toHaveScreenshot('po-email-state-label-help.png');
+  });
+
+  test('disabled', async ({ page }) => {
+    const el = page.locator('[data-testid="state-disabled"]');
+    await expect(el).toHaveScreenshot('po-email-state-disabled.png');
+  });
+
+  test('readonly', async ({ page }) => {
+    const el = page.locator('[data-testid="state-readonly"]');
+    await expect(el).toHaveScreenshot('po-email-state-readonly.png');
+  });
+
+  test('required', async ({ page }) => {
+    const el = page.locator('[data-testid="state-required"]');
+    await expect(el).toHaveScreenshot('po-email-state-required.png');
+  });
+
+  test('required + errorMessage', async ({ page }) => {
+    const el = page.locator('[data-testid="state-required-error"]');
+    await el.locator('input').focus();
+    await el.locator('input').blur();
+    await expect(el).toHaveScreenshot('po-email-state-required-error.png');
+  });
+
+  test('loading', async ({ page }) => {
+    const el = page.locator('[data-testid="state-loading"]');
+    await expect(el).toHaveScreenshot('po-email-state-loading.png');
+  });
+
+  test('loading + label + helper', async ({ page }) => {
+    const el = page.locator('[data-testid="state-loading-label-helper"]');
+    await expect(el).toHaveScreenshot('po-email-state-loading-label-helper.png');
+  });
+});
diff --git a/e2e/visual/fields/po-input/po-input-states.component.html b/e2e/visual/fields/po-input/po-input-states.component.html
new file mode 100644
index 0000000000..0c63b74348
--- /dev/null
+++ b/e2e/visual/fields/po-input/po-input-states.component.html
@@ -0,0 +1,108 @@
+<div style="padding: 16px; display: flex; flex-direction: column; gap: 24px">
+  <!-- State: basic -->
+  <div data-testid="state-basic">
+    <po-input name="basic" p-placeholder="Digite algo"></po-input>
+  </div>
+
+  <!-- State: label -->
+  <div data-testid="state-label">
+    <po-input name="label" p-label="Label do campo" p-placeholder="Campo com label"></po-input>
+  </div>
+
+  <!-- State: label + helper -->
+  <div data-testid="state-label-helper">
+    <po-input
+      name="label-helper"
+      p-label="Label do campo"
+      p-helper="Texto de ajuda do helper"
+      p-placeholder="Campo com label e helper"
+    ></po-input>
+  </div>
+
+  <!-- State: label + help-text -->
+  <div data-testid="state-label-help">
+    <po-input
+      name="label-help"
+      p-label="Label do campo"
+      p-help="Texto de apoio do campo"
+      p-placeholder="Campo com label e help"
+    ></po-input>
+  </div>
+
+  <!-- State: label + helper + help-text -->
+  <div data-testid="state-label-helper-help">
+    <po-input
+      name="label-helper-help"
+      p-label="Label do campo"
+      p-helper="Texto de ajuda do helper"
+      p-help="Texto de apoio do campo"
+      p-placeholder="Campo com label, helper e help"
+    ></po-input>
+  </div>
+
+  <!-- State: helper (sem label) -->
+  <div data-testid="state-helper">
+    <po-input name="helper" p-helper="Texto de ajuda do helper" p-placeholder="Campo apenas com helper"></po-input>
+  </div>
+
+  <!-- State: disabled -->
+  <div data-testid="state-disabled">
+    <po-input name="disabled" p-label="Campo desabilitado" p-disabled p-placeholder="Campo desabilitado"></po-input>
+  </div>
+
+  <!-- State: readonly -->
+  <div data-testid="state-readonly">
+    <po-input
+      name="readonly"
+      p-label="Campo somente leitura"
+      p-readonly
+      p-placeholder="Campo readonly"
+      [(ngModel)]="readonlyValue"
+    ></po-input>
+  </div>
+
+  <!-- State: required -->
+  <div data-testid="state-required">
+    <po-input
+      name="required"
+      p-label="Campo obrigatorio"
+      p-required
+      [p-show-required]="true"
+      p-placeholder="Campo obrigatorio"
+    ></po-input>
+  </div>
+
+  <!-- State: required + errorMessage -->
+  <div data-testid="state-required-error">
+    <po-input
+      name="required-error"
+      p-label="Campo obrigatorio com erro"
+      p-required
+      [p-show-required]="true"
+      p-error-pattern="Este campo e obrigatorio"
+      [p-required-field-error-message]="true"
+      p-placeholder="Campo obrigatorio com mensagem de erro"
+    ></po-input>
+  </div>
+
+  <!-- State: loading (sem label) -->
+  <div data-testid="state-loading">
+    <po-input name="loading" p-loading p-placeholder="Carregando..."></po-input>
+  </div>
+
+  <!-- State: loading + helper (sem label) -->
+  <div data-testid="state-loading-helper">
+    <po-input name="loading-helper" p-loading p-helper="Texto de ajuda" p-placeholder="Carregando..."></po-input>
+  </div>
+
+  <!-- State: loading + label + helper -->
+  <div data-testid="state-loading-label-helper">
+    <po-input
+      name="loading-label-helper"
+      p-label="Campo com loading, label e helper"
+      p-loading
+      p-helper="Texto de ajuda"
+      p-placeholder="Carregando..."
+    ></po-input>
+  </div>
+</div>
diff --git a/e2e/visual/fields/po-input/po-input-states.component.ts b/e2e/visual/fields/po-input/po-input-states.component.ts
new file mode 100644
index 0000000000..79cacda0d8
--- /dev/null
+++ b/e2e/visual/fields/po-input/po-input-states.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-visual-test-po-input-field-states',
+  templateUrl: './po-input-states.component.html',
+  standalone: false
+})
+export class VisualTestPoInputFieldStatesComponent {
+  readonlyValue = 'Valor somente leitura';
+}
diff --git a/e2e/visual/fields/po-input/po-input-states.visual.spec.ts b/e2e/visual/fields/po-input/po-input-states.visual.spec.ts
new file mode 100644
index 0000000000..8551451298
--- /dev/null
+++ b/e2e/visual/fields/po-input/po-input-states.visual.spec.ts
@@ -0,0 +1,76 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('po-input - visual regression por estado', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/visual/fields/po-input-states');
+    await page.waitForSelector('[data-testid="state-basic"]');
+  });
+
+  test('basic (sem propriedades)', async ({ page }) => {
+    const el = page.locator('[data-testid="state-basic"]');
+    await expect(el).toHaveScreenshot('po-input-state-basic.png');
+  });
+
+  test('label', async ({ page }) => {
+    const el = page.locator('[data-testid="state-label"]');
+    await expect(el).toHaveScreenshot('po-input-state-label.png');
+  });
+
+  test('label + helper', async ({ page }) => {
+    const el = page.locator('[data-testid="state-label-helper"]');
+    await expect(el).toHaveScreenshot('po-input-state-label-helper.png');
+  });
+
+  test('label + help-text', async ({ page }) => {
+    const el = page.locator('[data-testid="state-label-help"]');
+    await expect(el).toHaveScreenshot('po-input-state-label-help.png');
+  });
+
+  test('label + helper + help-text', async ({ page }) => {
+    const el = page.locator('[data-testid="state-label-helper-help"]');
+    await expect(el).toHaveScreenshot('po-input-state-label-helper-help.png');
+  });
+
+  test('helper (sem label)', async ({ page }) => {
+    const el = page.locator('[data-testid="state-helper"]');
+    await expect(el).toHaveScreenshot('po-input-state-helper.png');
+  });
+
+  test('disabled', async ({ page }) => {
+    const el = page.locator('[data-testid="state-disabled"]');
+    await expect(el).toHaveScreenshot('po-input-state-disabled.png');
+  });
+
+  test('readonly', async ({ page }) => {
+    const el = page.locator('[data-testid="state-readonly"]');
+    await expect(el).toHaveScreenshot('po-input-state-readonly.png');
+  });
+
+  test('required', async ({ page }) => {
+    const el = page.locator('[data-testid="state-required"]');
+    await expect(el).toHaveScreenshot('po-input-state-required.png');
+  });
+
+  test('required + errorMessage', async ({ page }) => {
+    const el = page.locator('[data-testid="state-required-error"]');
+    // Foca e desfoca o campo para acionar a validacao e exibir o erro
+    await el.locator('input').focus();
+    await el.locator('input').blur();
+    await expect(el).toHaveScreenshot('po-input-state-required-error.png');
+  });
+
+  test('loading', async ({ page }) => {
+    const el = page.locator('[data-testid="state-loading"]');
+    await expect(el).toHaveScreenshot('po-input-state-loading.png');
+  });
+
+  test('loading + helper', async ({ page }) => {
+    const el = page.locator('[data-testid="state-loading-helper"]');
+    await expect(el).toHaveScreenshot('po-input-state-loading-helper.png');
+  });
+
+  test('loading + label + helper', async ({ page }) => {
+    const el = page.locator('[data-testid="state-loading-label-helper"]');
+    await expect(el).toHaveScreenshot('po-input-state-loading-label-helper.png');
+  });
+});
diff --git a/e2e/visual/fields/po-login/po-login-states.component.html b/e2e/visual/fields/po-login/po-login-states.component.html
new file mode 100644
index 0000000000..8397f4eddf
--- /dev/null
+++ b/e2e/visual/fields/po-login/po-login-states.component.html
@@ -0,0 +1,87 @@
+<div style="padding: 16px; display: flex; flex-direction: column; gap: 24px">
+  <!-- State: basic -->
+  <div data-testid="state-basic">
+    <po-login name="basic" p-placeholder="Digite o login"></po-login>
+  </div>
+
+  <!-- State: label -->
+  <div data-testid="state-label">
+    <po-login name="label" p-label="Label do campo" p-placeholder="Campo com label"></po-login>
+  </div>
+
+  <!-- State: label + helper -->
+  <div data-testid="state-label-helper">
+    <po-login
+      name="label-helper"
+      p-label="Label do campo"
+      p-helper="Texto de ajuda do helper"
+      p-placeholder="Campo com label e helper"
+    ></po-login>
+  </div>
+
+  <!-- State: label + help-text -->
+  <div data-testid="state-label-help">
+    <po-login
+      name="label-help"
+      p-label="Label do campo"
+      p-help="Texto de apoio do campo"
+      p-placeholder="Campo com label e help"
+    ></po-login>
+  </div>
+
+  <!-- State: disabled -->
+  <div data-testid="state-disabled">
+    <po-login name="disabled" p-label="Campo desabilitado" p-disabled p-placeholder="Campo desabilitado"></po-login>
+  </div>
+
+  <!-- State: readonly -->
+  <div data-testid="state-readonly">
+    <po-login
+      name="readonly"
+      p-label="Campo somente leitura"
+      p-readonly
+      p-placeholder="Campo readonly"
+      [(ngModel)]="readonlyValue"
+    ></po-login>
+  </div>
+
+  <!-- State: required -->
+  <div data-testid="state-required">
+    <po-login
+      name="required"
+      p-label="Campo obrigatorio"
+      p-required
+      [p-show-required]="true"
+      p-placeholder="Campo obrigatorio"
+    ></po-login>
+  </div>
+
+  <!-- State: required + errorMessage -->
+  <div data-testid="state-required-error">
+    <po-login
+      name="required-error"
+      p-label="Campo obrigatorio com erro"
+      p-required
+      [p-show-required]="true"
+      p-error-pattern="Este campo e obrigatorio"
+      [p-required-field-error-message]="true"
+      p-placeholder="Campo obrigatorio com mensagem de erro"
+    ></po-login>
+  </div>
+
+  <!-- State: loading -->
+  <div data-testid="state-loading">
+    <po-login name="loading" p-loading p-placeholder="Carregando..."></po-login>
+  </div>
+
+  <!-- State: loading + label + helper -->
+  <div data-testid="state-loading-label-helper">
+    <po-login
+      name="loading-label-helper"
+      p-label="Campo com loading, label e helper"
+      p-loading
+      p-helper="Texto de ajuda"
+      p-placeholder="Carregando..."
+    ></po-login>
+  </div>
+</div>
diff --git a/e2e/visual/fields/po-login/po-login-states.component.ts b/e2e/visual/fields/po-login/po-login-states.component.ts
new file mode 100644
index 0000000000..da04a5c149
--- /dev/null
+++ b/e2e/visual/fields/po-login/po-login-states.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-visual-test-po-login-states',
+  templateUrl: './po-login-states.component.html',
+  standalone: false
+})
+export class VisualTestPoLoginStatesComponent {
+  readonlyValue = 'usuario.login';
+}
diff --git a/e2e/visual/fields/po-login/po-login-states.visual.spec.ts b/e2e/visual/fields/po-login/po-login-states.visual.spec.ts
new file mode 100644
index 0000000000..0a9ae36a57
--- /dev/null
+++ b/e2e/visual/fields/po-login/po-login-states.visual.spec.ts
@@ -0,0 +1,60 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('po-login - visual regression por estado', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/visual/fields/po-login-states');
+    await page.waitForSelector('[data-testid="state-basic"]');
+  });
+
+  test('basic', async ({ page }) => {
+    const el = page.locator('[data-testid="state-basic"]');
+    await expect(el).toHaveScreenshot('po-login-state-basic.png');
+  });
+
+  test('label', async ({ page }) => {
+    const el = page.locator('[data-testid="state-label"]');
+    await expect(el).toHaveScreenshot('po-login-state-label.png');
+  });
+
+  test('label + helper', async ({ page }) => {
+    const el = page.locator('[data-testid="state-label-helper"]');
+    await expect(el).toHaveScreenshot('po-login-state-label-helper.png');
+  });
+
+  test('label + help-text', async ({ page }) => {
+    const el = page.locator('[data-testid="state-label-help"]');
+    await expect(el).toHaveScreenshot('po-login-state-label-help.png');
+  });
+
+  test('disabled', async ({ page }) => {
+    const el = page.locator('[data-testid="state-disabled"]');
+    await expect(el).toHaveScreenshot('po-login-state-disabled.png');
+  });
+
+  test('readonly', async ({ page }) => {
+    const el = page.locator('[data-testid="state-readonly"]');
+    await expect(el).toHaveScreenshot('po-login-state-readonly.png');
+  });
+
+  test('required', async ({ page }) => {
+    const el = page.locator('[data-testid="state-required"]');
+    await expect(el).toHaveScreenshot('po-login-state-required.png');
+  });
+
+  test('required + errorMessage', async ({ page }) => {
+    const el = page.locator('[data-testid="state-required-error"]');
+    await el.locator('input').focus();
+    await el.locator('input').blur();
+    await expect(el).toHaveScreenshot('po-login-state-required-error.png');
+  });
+
+  test('loading', async ({ page }) => {
+    const el = page.locator('[data-testid="state-loading"]');
+    await expect(el).toHaveScreenshot('po-login-state-loading.png');
+  });
+
+  test('loading + label + helper', async ({ page }) => {
+    const el = page.locator('[data-testid="state-loading-label-helper"]');
+    await expect(el).toHaveScreenshot('po-login-state-loading-label-helper.png');
+  });
+});
diff --git a/e2e/visual/fields/po-lookup/po-lookup-states.component.html b/e2e/visual/fields/po-lookup/po-lookup-states.component.html
new file mode 100644
index 0000000000..4fc3cb51d0
--- /dev/null
+++ b/e2e/visual/fields/po-lookup/po-lookup-states.component.html
@@ -0,0 +1,91 @@
+<div style="padding: 16px; display: flex; flex-direction: column; gap: 24px">
+  <!-- State: basic -->
+  <div data-testid="state-basic">
+    <po-lookup
+      name="basic"
+      p-placeholder="Pesquisar"
+      p-field-label="label"
+      p-field-value="value"
+      [p-filter-service]="filterService"
+    ></po-lookup>
+  </div>
+
+  <!-- State: label -->
+  <div data-testid="state-label">
+    <po-lookup
+      name="label"
+      p-label="Label do campo"
+      p-placeholder="Campo com label"
+      p-field-label="label"
+      p-field-value="value"
+      [p-filter-service]="filterService"
+    ></po-lookup>
+  </div>
+
+  <!-- State: label + helper -->
+  <div data-testid="state-label-helper">
+    <po-lookup
+      name="label-helper"
+      p-label="Label do campo"
+      p-helper="Texto de ajuda do helper"
+      p-placeholder="Campo com label e helper"
+      p-field-label="label"
+      p-field-value="value"
+      [p-filter-service]="filterService"
+    ></po-lookup>
+  </div>
+
+  <!-- State: label + help-text -->
+  <div data-testid="state-label-help">
+    <po-lookup
+      name="label-help"
+      p-label="Label do campo"
+      p-help="Texto de apoio do campo"
+      p-placeholder="Campo com label e help"
+      p-field-label="label"
+      p-field-value="value"
+      [p-filter-service]="filterService"
+    ></po-lookup>
+  </div>
+
+  <!-- State: disabled -->
+  <div data-testid="state-disabled">
+    <po-lookup
+      name="disabled"
+      p-label="Campo desabilitado"
+      [p-disabled]="true"
+      p-placeholder="Campo desabilitado"
+      p-field-label="label"
+      p-field-value="value"
+      [p-filter-service]="filterService"
+    ></po-lookup>
+  </div>
+
+  <!-- State: required -->
+  <div data-testid="state-required">
+    <po-lookup
+      name="required"
+      p-label="Campo obrigatorio"
+      p-required
+      [p-show-required]="true"
+      p-placeholder="Campo obrigatorio"
+      p-field-label="label"
+      p-field-value="value"
+      [p-filter-service]="filterService"
+    ></po-lookup>
+  </div>
+
+  <!-- State: clean -->
+  <div data-testid="state-clean">
+    <po-lookup
+      name="clean"
+      p-label="Campo com clean"
+      [p-clean]="true"
+      p-placeholder="Campo com botao limpar"
+      p-field-label="label"
+      p-field-value="value"
+      [p-filter-service]="filterService"
+      [(ngModel)]="cleanValue"
+    ></po-lookup>
+  </div>
+</div>
diff --git a/e2e/visual/fields/po-lookup/po-lookup-states.component.ts b/e2e/visual/fields/po-lookup/po-lookup-states.component.ts
new file mode 100644
index 0000000000..68ec2df96f
--- /dev/null
+++ b/e2e/visual/fields/po-lookup/po-lookup-states.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-visual-test-po-lookup-states',
+  templateUrl: './po-lookup-states.component.html',
+  standalone: false
+})
+export class VisualTestPoLookupStatesComponent {
+  filterService = 'https://po-sample-api.onrender.com/v1/heroes';
+  cleanValue = '1';
+}
diff --git a/e2e/visual/fields/po-lookup/po-lookup-states.visual.spec.ts b/e2e/visual/fields/po-lookup/po-lookup-states.visual.spec.ts
new file mode 100644
index 0000000000..f517c1a40d
--- /dev/null
+++ b/e2e/visual/fields/po-lookup/po-lookup-states.visual.spec.ts
@@ -0,0 +1,43 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('po-lookup - visual regression por estado', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/visual/fields/po-lookup-states');
+    await page.waitForSelector('[data-testid="state-basic"]');
+  });
+
+  test('basic', async ({ page }) => {
+    const el = page.locator('[data-testid="state-basic"]');
+    await expect(el).toHaveScreenshot('po-lookup-state-basic.png');
+  });
+
+  test('label', async ({ page }) => {
+    const el = page.locator('[data-testid="state-label"]');
+    await expect(el).toHaveScreenshot('po-lookup-state-label.png');
+  });
+
+  test('label + helper', async ({ page }) => {
+    const el = page.locator('[data-testid="state-label-helper"]');
+    await expect(el).toHaveScreenshot('po-lookup-state-label-helper.png');
+  });
+
+  test('label + help-text', async ({ page }) => {
+    const el = page.locator('[data-testid="state-label-help"]');
+    await expect(el).toHaveScreenshot('po-lookup-state-label-help.png');
+  });
+
+  test('disabled', async ({ page }) => {
+    const el = page.locator('[data-testid="state-disabled"]');
+    await expect(el).toHaveScreenshot('po-lookup-state-disabled.png');
+  });
+
+  test('required', async ({ page }) => {
+    const el = page.locator('[data-testid="state-required"]');
+    await expect(el).toHaveScreenshot('po-lookup-state-required.png');
+  });
+
+  test('clean', async ({ page }) => {
+    const el = page.locator('[data-testid="state-clean"]');
+    await expect(el).toHaveScreenshot('po-lookup-state-clean.png');
+  });
+});
diff --git a/e2e/visual/fields/po-multiselect/po-multiselect-states.component.html b/e2e/visual/fields/po-multiselect/po-multiselect-states.component.html
new file mode 100644
index 0000000000..17e6ea9724
--- /dev/null
+++ b/e2e/visual/fields/po-multiselect/po-multiselect-states.component.html
@@ -0,0 +1,60 @@
+<div style="padding: 16px; display: flex; flex-direction: column; gap: 24px">
+  <!-- State: basic -->
+  <div data-testid="state-basic">
+    <po-multiselect name="basic" p-placeholder="Selecione opcoes" [p-options]="options"></po-multiselect>
+  </div>
+
+  <!-- State: label -->
+  <div data-testid="state-label">
+    <po-multiselect
+      name="label"
+      p-label="Label do campo"
+      p-placeholder="Campo com label"
+      [p-options]="options"
+    ></po-multiselect>
+  </div>
+
+  <!-- State: label + helper -->
+  <div data-testid="state-label-helper">
+    <po-multiselect
+      name="label-helper"
+      p-label="Label do campo"
+      p-helper="Texto de ajuda do helper"
+      p-placeholder="Campo com label e helper"
+      [p-options]="options"
+    ></po-multiselect>
+  </div>
+
+  <!-- State: label + help-text -->
+  <div data-testid="state-label-help">
+    <po-multiselect
+      name="label-help"
+      p-label="Label do campo"
+      p-help="Texto de apoio do campo"
+      p-placeholder="Campo com label e help"
+      [p-options]="options"
+    ></po-multiselect>
+  </div>
+
+  <!-- State: disabled -->
+  <div data-testid="state-disabled">
+    <po-multiselect
+      name="disabled"
+      p-label="Campo desabilitado"
+      [p-disabled]="true"
+      p-placeholder="Campo desabilitado"
+      [p-options]="options"
+    ></po-multiselect>
+  </div>
+
+  <!-- State: required -->
+  <div data-testid="state-required">
+    <po-multiselect
+      name="required"
+      p-label="Campo obrigatorio"
+      p-required
+      p-placeholder="Campo obrigatorio"
+      [p-options]="options"
+    ></po-multiselect>
+  </div>
+</div>
diff --git a/e2e/visual/fields/po-multiselect/po-multiselect-states.component.ts b/e2e/visual/fields/po-multiselect/po-multiselect-states.component.ts
new file mode 100644
index 0000000000..efd7936342
--- /dev/null
+++ b/e2e/visual/fields/po-multiselect/po-multiselect-states.component.ts
@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-visual-test-po-multiselect-states',
+  templateUrl: './po-multiselect-states.component.html',
+  standalone: false
+})
+export class VisualTestPoMultiselectStatesComponent {
+  options = [
+    { label: 'Opcao 1', value: '1' },
+    { label: 'Opcao 2', value: '2' },
+    { label: 'Opcao 3', value: '3' }
+  ];
+}
diff --git a/e2e/visual/fields/po-multiselect/po-multiselect-states.visual.spec.ts b/e2e/visual/fields/po-multiselect/po-multiselect-states.visual.spec.ts
new file mode 100644
index 0000000000..f75189b2c0
--- /dev/null
+++ b/e2e/visual/fields/po-multiselect/po-multiselect-states.visual.spec.ts
@@ -0,0 +1,38 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('po-multiselect - visual regression por estado', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/visual/fields/po-multiselect-states');
+    await page.waitForSelector('[data-testid="state-basic"]');
+  });
+
+  test('basic', async ({ page }) => {
+    const el = page.locator('[data-testid="state-basic"]');
+    await expect(el).toHaveScreenshot('po-multiselect-state-basic.png');
+  });
+
+  test('label', async ({ page }) => {
+    const el = page.locator('[data-testid="state-label"]');
+    await expect(el).toHaveScreenshot('po-multiselect-state-label.png');
+  });
+
+  test('label + helper', async ({ page }) => {
+    const el = page.locator('[data-testid="state-label-helper"]');
+    await expect(el).toHaveScreenshot('po-multiselect-state-label-helper.png');
+  });
+
+  test('label + help-text', async ({ page }) => {
+    const el = page.locator('[data-testid="state-label-help"]');
+    await expect(el).toHaveScreenshot('po-multiselect-state-label-help.png');
+  });
+
+  test('disabled', async ({ page }) => {
+    const el = page.locator('[data-testid="state-disabled"]');
+    await expect(el).toHaveScreenshot('po-multiselect-state-disabled.png');
+  });
+
+  test('required', async ({ page }) => {
+    const el = page.locator('[data-testid="state-required"]');
+    await expect(el).toHaveScreenshot('po-multiselect-state-required.png');
+  });
+});
diff --git a/e2e/visual/fields/po-number/po-number-states.component.html b/e2e/visual/fields/po-number/po-number-states.component.html
new file mode 100644
index 0000000000..8289e5284e
--- /dev/null
+++ b/e2e/visual/fields/po-number/po-number-states.component.html
@@ -0,0 +1,87 @@
+<div style="padding: 16px; display: flex; flex-direction: column; gap: 24px">
+  <!-- State: basic -->
+  <div data-testid="state-basic">
+    <po-number name="basic" p-placeholder="Digite um numero"></po-number>
+  </div>
+
+  <!-- State: label -->
+  <div data-testid="state-label">
+    <po-number name="label" p-label="Label do campo" p-placeholder="Campo com label"></po-number>
+  </div>
+
+  <!-- State: label + helper -->
+  <div data-testid="state-label-helper">
+    <po-number
+      name="label-helper"
+      p-label="Label do campo"
+      p-helper="Texto de ajuda do helper"
+      p-placeholder="Campo com label e helper"
+    ></po-number>
+  </div>
+
+  <!-- State: label + help-text -->
+  <div data-testid="state-label-help">
+    <po-number
+      name="label-help"
+      p-label="Label do campo"
+      p-help="Texto de apoio do campo"
+      p-placeholder="Campo com label e help"
+    ></po-number>
+  </div>
+
+  <!-- State: disabled -->
+  <div data-testid="state-disabled">
+    <po-number name="disabled" p-label="Campo desabilitado" p-disabled p-placeholder="Campo desabilitado"></po-number>
+  </div>
+
+  <!-- State: readonly -->
+  <div data-testid="state-readonly">
+    <po-number
+      name="readonly"
+      p-label="Campo somente leitura"
+      p-readonly
+      p-placeholder="Campo readonly"
+      [(ngModel)]="readonlyValue"
+    ></po-number>
+  </div>
+
+  <!-- State: required -->
+  <div data-testid="state-required">
+    <po-number
+      name="required"
+      p-label="Campo obrigatorio"
+      p-required
+      [p-show-required]="true"
+      p-placeholder="Campo obrigatorio"
+    ></po-number>
+  </div>
+
+  <!-- State: required + errorMessage -->
+  <div data-testid="state-required-error">
+    <po-number
+      name="required-error"
+      p-label="Campo obrigatorio com erro"
+      p-required
+      [p-show-required]="true"
+      p-error-pattern="Este campo e obrigatorio"
+      [p-required-field-error-message]="true"
+      p-placeholder="Campo obrigatorio com mensagem de erro"
+    ></po-number>
+  </div>
+
+  <!-- State: loading -->
+  <div data-testid="state-loading">
+    <po-number name="loading" p-loading p-placeholder="Carregando..."></po-number>
+  </div>
+
+  <!-- State: loading + label + helper -->
+  <div data-testid="state-loading-label-helper">
+    <po-number
+      name="loading-label-helper"
+      p-label="Campo com loading, label e helper"
+      p-loading
+      p-helper="Texto de ajuda"
+      p-placeholder="Carregando..."
+    ></po-number>
+  </div>
+</div>
diff --git a/e2e/visual/fields/po-number/po-number-states.component.ts b/e2e/visual/fields/po-number/po-number-states.component.ts
new file mode 100644
index 0000000000..b5389c1ae0
--- /dev/null
+++ b/e2e/visual/fields/po-number/po-number-states.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-visual-test-po-number-states',
+  templateUrl: './po-number-states.component.html',
+  standalone: false
+})
+export class VisualTestPoNumberStatesComponent {
+  readonlyValue = '12345';
+}
diff --git a/e2e/visual/fields/po-number/po-number-states.visual.spec.ts b/e2e/visual/fields/po-number/po-number-states.visual.spec.ts
new file mode 100644
index 0000000000..f6c5271a46
--- /dev/null
+++ b/e2e/visual/fields/po-number/po-number-states.visual.spec.ts
@@ -0,0 +1,60 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('po-number - visual regression por estado', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/visual/fields/po-number-states');
+    await page.waitForSelector('[data-testid="state-basic"]');
+  });
+
+  test('basic', async ({ page }) => {
+    const el = page.locator('[data-testid="state-basic"]');
+    await expect(el).toHaveScreenshot('po-number-state-basic.png');
+  });
+
+  test('label', async ({ page }) => {
+    const el = page.locator('[data-testid="state-label"]');
+    await expect(el).toHaveScreenshot('po-number-state-label.png');
+  });
+
+  test('label + helper', async ({ page }) => {
+    const el = page.locator('[data-testid="state-label-helper"]');
+    await expect(el).toHaveScreenshot('po-number-state-label-helper.png');
+  });
+
+  test('label + help-text', async ({ page }) => {
+    const el = page.locator('[data-testid="state-label-help"]');
+    await expect(el).toHaveScreenshot('po-number-state-label-help.png');
+  });
+
+  test('disabled', async ({ page }) => {
+    const el = page.locator('[data-testid="state-disabled"]');
+    await expect(el).toHaveScreenshot('po-number-state-disabled.png');
+  });
+
+  test('readonly', async ({ page }) => {
+    const el = page.locator('[data-testid="state-readonly"]');
+    await expect(el).toHaveScreenshot('po-number-state-readonly.png');
+  });
+
+  test('required', async ({ page }) => {
+    const el = page.locator('[data-testid="state-required"]');
+    await expect(el).toHaveScreenshot('po-number-state-required.png');
+  });
+
+  test('required + errorMessage', async ({ page }) => {
+    const el = page.locator('[data-testid="state-required-error"]');
+    await el.locator('input').focus();
+    await el.locator('input').blur();
+    await expect(el).toHaveScreenshot('po-number-state-required-error.png');
+  });
+
+  test('loading', async ({ page }) => {
+    const el = page.locator('[data-testid="state-loading"]');
+    await expect(el).toHaveScreenshot('po-number-state-loading.png');
+  });
+
+  test('loading + label + helper', async ({ page }) => {
+    const el = page.locator('[data-testid="state-loading-label-helper"]');
+    await expect(el).toHaveScreenshot('po-number-state-loading-label-helper.png');
+  });
+});
diff --git a/e2e/visual/fields/po-password/po-password-states.component.html b/e2e/visual/fields/po-password/po-password-states.component.html
new file mode 100644
index 0000000000..573458a002
--- /dev/null
+++ b/e2e/visual/fields/po-password/po-password-states.component.html
@@ -0,0 +1,92 @@
+<div style="padding: 16px; display: flex; flex-direction: column; gap: 24px">
+  <!-- State: basic -->
+  <div data-testid="state-basic">
+    <po-password name="basic" p-placeholder="Digite a senha"></po-password>
+  </div>
+
+  <!-- State: label -->
+  <div data-testid="state-label">
+    <po-password name="label" p-label="Label do campo" p-placeholder="Campo com label"></po-password>
+  </div>
+
+  <!-- State: label + helper -->
+  <div data-testid="state-label-helper">
+    <po-password
+      name="label-helper"
+      p-label="Label do campo"
+      p-helper="Texto de ajuda do helper"
+      p-placeholder="Campo com label e helper"
+    ></po-password>
+  </div>
+
+  <!-- State: label + help-text -->
+  <div data-testid="state-label-help">
+    <po-password
+      name="label-help"
+      p-label="Label do campo"
+      p-help="Texto de apoio do campo"
+      p-placeholder="Campo com label e help"
+    ></po-password>
+  </div>
+
+  <!-- State: disabled -->
+  <div data-testid="state-disabled">
+    <po-password
+      name="disabled"
+      p-label="Campo desabilitado"
+      p-disabled
+      p-placeholder="Campo desabilitado"
+    ></po-password>
+  </div>
+
+  <!-- State: readonly -->
+  <div data-testid="state-readonly">
+    <po-password
+      name="readonly"
+      p-label="Campo somente leitura"
+      p-readonly
+      p-placeholder="Campo readonly"
+      [(ngModel)]="readonlyValue"
+    ></po-password>
+  </div>
+
+  <!-- State: required -->
+  <div data-testid="state-required">
+    <po-password
+      name="required"
+      p-label="Campo obrigatorio"
+      p-required
+      [p-show-required]="true"
+      p-placeholder="Campo obrigatorio"
+    ></po-password>
+  </div>
+
+  <!-- State: required + errorMessage -->
+  <div data-testid="state-required-error">
+    <po-password
+      name="required-error"
+      p-label="Campo obrigatorio com erro"
+      p-required
+      [p-show-required]="true"
+      p-error-pattern="Este campo e obrigatorio"
+      [p-required-field-error-message]="true"
+      p-placeholder="Campo obrigatorio com mensagem de erro"
+    ></po-password>
+  </div>
+
+  <!-- State: loading -->
+  <div data-testid="state-loading">
+    <po-password name="loading" p-loading p-placeholder="Carregando..."></po-password>
+  </div>
+
+  <!-- State: loading + label + helper -->
+  <div data-testid="state-loading-label-helper">
+    <po-password
+      name="loading-label-helper"
+      p-label="Campo com loading, label e helper"
+      p-loading
+      p-helper="Texto de ajuda"
+      p-placeholder="Carregando..."
+    ></po-password>
+  </div>
+</div>
diff --git a/e2e/visual/fields/po-password/po-password-states.component.ts b/e2e/visual/fields/po-password/po-password-states.component.ts
new file mode 100644
index 0000000000..2a67b43954
--- /dev/null
+++ b/e2e/visual/fields/po-password/po-password-states.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-visual-test-po-password-states',
+  templateUrl: './po-password-states.component.html',
+  standalone: false
+})
+export class VisualTestPoPasswordStatesComponent {
+  readonlyValue = 'senha123';
+}
diff --git a/e2e/visual/fields/po-password/po-password-states.visual.spec.ts b/e2e/visual/fields/po-password/po-password-states.visual.spec.ts
new file mode 100644
index 0000000000..c71066faab
--- /dev/null
+++ b/e2e/visual/fields/po-password/po-password-states.visual.spec.ts
@@ -0,0 +1,60 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('po-password - visual regression por estado', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/visual/fields/po-password-states');
+    await page.waitForSelector('[data-testid="state-basic"]');
+  });
+
+  test('basic', async ({ page }) => {
+    const el = page.locator('[data-testid="state-basic"]');
+    await expect(el).toHaveScreenshot('po-password-state-basic.png');
+  });
+
+  test('label', async ({ page }) => {
+    const el = page.locator('[data-testid="state-label"]');
+    await expect(el).toHaveScreenshot('po-password-state-label.png');
+  });
+
+  test('label + helper', async ({ page }) => {
+    const el = page.locator('[data-testid="state-label-helper"]');
+    await expect(el).toHaveScreenshot('po-password-state-label-helper.png');
+  });
+
+  test('label + help-text', async ({ page }) => {
+    const el = page.locator('[data-testid="state-label-help"]');
+    await expect(el).toHaveScreenshot('po-password-state-label-help.png');
+  });
+
+  test('disabled', async ({ page }) => {
+    const el = page.locator('[data-testid="state-disabled"]');
+    await expect(el).toHaveScreenshot('po-password-state-disabled.png');
+  });
+
+  test('readonly', async ({ page }) => {
+    const el = page.locator('[data-testid="state-readonly"]');
+    await expect(el).toHaveScreenshot('po-password-state-readonly.png');
+  });
+
+  test('required', async ({ page }) => {
+    const el = page.locator('[data-testid="state-required"]');
+    await expect(el).toHaveScreenshot('po-password-state-required.png');
+  });
+
+  test('required + errorMessage', async ({ page }) => {
+    const el = page.locator('[data-testid="state-required-error"]');
+    await el.locator('input').focus();
+    await el.locator('input').blur();
+    await expect(el).toHaveScreenshot('po-password-state-required-error.png');
+  });
+
+  test('loading', async ({ page }) => {
+    const el = page.locator('[data-testid="state-loading"]');
+    await expect(el).toHaveScreenshot('po-password-state-loading.png');
+  });
+
+  test('loading + label + helper', async ({ page }) => {
+    const el = page.locator('[data-testid="state-loading-label-helper"]');
+    await expect(el).toHaveScreenshot('po-password-state-loading-label-helper.png');
+  });
+});
diff --git a/e2e/visual/fields/po-radio-group/po-radio-group-states.component.html b/e2e/visual/fields/po-radio-group/po-radio-group-states.component.html
new file mode 100644
index 0000000000..23c26980de
--- /dev/null
+++ b/e2e/visual/fields/po-radio-group/po-radio-group-states.component.html
@@ -0,0 +1,42 @@
+<div style="padding: 16px; display: flex; flex-direction: column; gap: 24px">
+  <!-- State: basic -->
+  <div data-testid="state-basic">
+    <po-radio-group name="basic" p-label="Grupo basico" [p-options]="options"></po-radio-group>
+  </div>
+
+  <!-- State: label + helper -->
+  <div data-testid="state-label-helper">
+    <po-radio-group
+      name="label-helper"
+      p-label="Grupo com helper"
+      p-helper="Texto de ajuda do helper"
+      [p-options]="options"
+    ></po-radio-group>
+  </div>
+
+  <!-- State: label + help-text -->
+  <div data-testid="state-label-help">
+    <po-radio-group
+      name="label-help"
+      p-label="Grupo com help"
+      p-help="Texto de apoio do campo"
+      [p-options]="options"
+    ></po-radio-group>
+  </div>
+
+  <!-- State: disabled -->
+  <div data-testid="state-disabled">
+    <po-radio-group name="disabled" p-label="Grupo desabilitado" p-disabled [p-options]="options"></po-radio-group>
+  </div>
+
+  <!-- State: required -->
+  <div data-testid="state-required">
+    <po-radio-group
+      name="required"
+      p-label="Grupo obrigatorio"
+      p-required
+      [p-show-required]="true"
+      [p-options]="options"
+    ></po-radio-group>
+  </div>
+</div>
diff --git a/e2e/visual/fields/po-radio-group/po-radio-group-states.component.ts b/e2e/visual/fields/po-radio-group/po-radio-group-states.component.ts
new file mode 100644
index 0000000000..f93bfa2f11
--- /dev/null
+++ b/e2e/visual/fields/po-radio-group/po-radio-group-states.component.ts
@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-visual-test-po-radio-group-states',
+  templateUrl: './po-radio-group-states.component.html',
+  standalone: false
+})
+export class VisualTestPoRadioGroupStatesComponent {
+  options = [
+    { label: 'Opcao 1', value: '1' },
+    { label: 'Opcao 2', value: '2' },
+    { label: 'Opcao 3', value: '3' }
+  ];
+}
diff --git a/e2e/visual/fields/po-radio-group/po-radio-group-states.visual.spec.ts b/e2e/visual/fields/po-radio-group/po-radio-group-states.visual.spec.ts
new file mode 100644
index 0000000000..7294489839
--- /dev/null
+++ b/e2e/visual/fields/po-radio-group/po-radio-group-states.visual.spec.ts
@@ -0,0 +1,33 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('po-radio-group - visual regression por estado', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/visual/fields/po-radio-group-states');
+    await page.waitForSelector('[data-testid="state-basic"]');
+  });
+
+  test('basic', async ({ page }) => {
+    const el = page.locator('[data-testid="state-basic"]');
+    await expect(el).toHaveScreenshot('po-radio-group-state-basic.png');
+  });
+
+  test('label + helper', async ({ page }) => {
+    const el = page.locator('[data-testid="state-label-helper"]');
+    await expect(el).toHaveScreenshot('po-radio-group-state-label-helper.png');
+  });
+
+  test('label + help-text', async ({ page }) => {
+    const el = page.locator('[data-testid="state-label-help"]');
+    await expect(el).toHaveScreenshot('po-radio-group-state-label-help.png');
+  });
+
+  test('disabled', async ({ page }) => {
+    const el = page.locator('[data-testid="state-disabled"]');
+    await expect(el).toHaveScreenshot('po-radio-group-state-disabled.png');
+  });
+
+  test('required', async ({ page }) => {
+    const el = page.locator('[data-testid="state-required"]');
+    await expect(el).toHaveScreenshot('po-radio-group-state-required.png');
+  });
+});
diff --git a/e2e/visual/fields/po-rich-text/po-rich-text-states.component.html b/e2e/visual/fields/po-rich-text/po-rich-text-states.component.html
new file mode 100644
index 0000000000..d044413f4b
--- /dev/null
+++ b/e2e/visual/fields/po-rich-text/po-rich-text-states.component.html
@@ -0,0 +1,62 @@
+<div style="padding: 16px; display: flex; flex-direction: column; gap: 24px">
+  <!-- State: basic -->
+  <div data-testid="state-basic">
+    <po-rich-text name="basic" p-placeholder="Digite um texto"></po-rich-text>
+  </div>
+
+  <!-- State: label -->
+  <div data-testid="state-label">
+    <po-rich-text name="label" p-label="Label do campo" p-placeholder="Campo com label"></po-rich-text>
+  </div>
+
+  <!-- State: label + helper -->
+  <div data-testid="state-label-helper">
+    <po-rich-text
+      name="label-helper"
+      p-label="Label do campo"
+      p-helper="Texto de ajuda do helper"
+      p-placeholder="Campo com label e helper"
+    ></po-rich-text>
+  </div>
+
+  <!-- State: label + help-text -->
+  <div data-testid="state-label-help">
+    <po-rich-text
+      name="label-help"
+      p-label="Label do campo"
+      p-help="Texto de apoio do campo"
+      p-placeholder="Campo com label e help"
+    ></po-rich-text>
+  </div>
+
+  <!-- State: disabled -->
+  <div data-testid="state-disabled">
+    <po-rich-text
+      name="disabled"
+      p-label="Campo desabilitado"
+      p-disabled
+      p-placeholder="Campo desabilitado"
+    ></po-rich-text>
+  </div>
+
+  <!-- State: readonly -->
+  <div data-testid="state-readonly">
+    <po-rich-text
+      name="readonly"
+      p-label="Campo somente leitura"
+      p-readonly
+      p-placeholder="Campo readonly"
+    ></po-rich-text>
+  </div>
+
+  <!-- State: required -->
+  <div data-testid="state-required">
+    <po-rich-text
+      name="required"
+      p-label="Campo obrigatorio"
+      p-required
+      [p-show-required]="true"
+      p-placeholder="Campo obrigatorio"
+    ></po-rich-text>
+  </div>
+</div>
diff --git a/e2e/visual/fields/po-rich-text/po-rich-text-states.component.ts b/e2e/visual/fields/po-rich-text/po-rich-text-states.component.ts
new file mode 100644
index 0000000000..9d88a6fbf2
--- /dev/null
+++ b/e2e/visual/fields/po-rich-text/po-rich-text-states.component.ts
@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-visual-test-po-rich-text-states',
+  templateUrl: './po-rich-text-states.component.html',
+  standalone: false
+})
+export class VisualTestPoRichTextStatesComponent {}
diff --git a/e2e/visual/fields/po-rich-text/po-rich-text-states.visual.spec.ts b/e2e/visual/fields/po-rich-text/po-rich-text-states.visual.spec.ts
new file mode 100644
index 0000000000..4d6c9f1947
--- /dev/null
+++ b/e2e/visual/fields/po-rich-text/po-rich-text-states.visual.spec.ts
@@ -0,0 +1,43 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('po-rich-text - visual regression por estado', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/visual/fields/po-rich-text-states');
+    await page.waitForSelector('[data-testid="state-basic"]');
+  });
+
+  test('basic', async ({ page }) => {
+    const el = page.locator('[data-testid="state-basic"]');
+    await expect(el).toHaveScreenshot('po-rich-text-state-basic.png');
+  });
+
+  test('label', async ({ page }) => {
+    const el = page.locator('[data-testid="state-label"]');
+    await expect(el).toHaveScreenshot('po-rich-text-state-label.png');
+  });
+
+  test('label + helper', async ({ page }) => {
+    const el = page.locator('[data-testid="state-label-helper"]');
+    await expect(el).toHaveScreenshot('po-rich-text-state-label-helper.png');
+  });
+
+  test('label + help-text', async ({ page }) => {
+    const el = page.locator('[data-testid="state-label-help"]');
+    await expect(el).toHaveScreenshot('po-rich-text-state-label-help.png');
+  });
+
+  test('disabled', async ({ page }) => {
+    const el = page.locator('[data-testid="state-disabled"]');
+    await expect(el).toHaveScreenshot('po-rich-text-state-disabled.png', { maxDiffPixelRatio: 0.05 });
+  });
+
+  test('readonly', async ({ page }) => {
+    const el = page.locator('[data-testid="state-readonly"]');
+    await expect(el).toHaveScreenshot('po-rich-text-state-readonly.png');
+  });
+
+  test('required', async ({ page }) => {
+    const el = page.locator('[data-testid="state-required"]');
+    await expect(el).toHaveScreenshot('po-rich-text-state-required.png');
+  });
+});
diff --git a/e2e/visual/fields/po-select/po-select-states.component.html b/e2e/visual/fields/po-select/po-select-states.component.html
new file mode 100644
index 0000000000..82e7dfaee8
--- /dev/null
+++ b/e2e/visual/fields/po-select/po-select-states.component.html
@@ -0,0 +1,84 @@
+<div style="padding: 16px; display: flex; flex-direction: column; gap: 24px">
+  <!-- State: basic -->
+  <div data-testid="state-basic">
+    <po-select name="basic" p-placeholder="Selecione uma opcao" [p-options]="options"></po-select>
+  </div>
+
+  <!-- State: label -->
+  <div data-testid="state-label">
+    <po-select name="label" p-label="Label do campo" p-placeholder="Campo com label" [p-options]="options"></po-select>
+  </div>
+
+  <!-- State: label + helper -->
+  <div data-testid="state-label-helper">
+    <po-select
+      name="label-helper"
+      p-label="Label do campo"
+      p-helper="Texto de ajuda do helper"
+      p-placeholder="Campo com label e helper"
+      [p-options]="options"
+    ></po-select>
+  </div>
+
+  <!-- State: label + help-text -->
+  <div data-testid="state-label-help">
+    <po-select
+      name="label-help"
+      p-label="Label do campo"
+      p-help="Texto de apoio do campo"
+      p-placeholder="Campo com label e help"
+      [p-options]="options"
+    ></po-select>
+  </div>
+
+  <!-- State: disabled -->
+  <div data-testid="state-disabled">
+    <po-select
+      name="disabled"
+      p-label="Campo desabilitado"
+      p-disabled
+      p-placeholder="Campo desabilitado"
+      [p-options]="options"
+    ></po-select>
+  </div>
+
+  <!-- State: readonly -->
+  <div data-testid="state-readonly">
+    <po-select
+      name="readonly"
+      p-label="Campo somente leitura"
+      [p-readonly]="true"
+      p-placeholder="Campo readonly"
+      [p-options]="options"
+    ></po-select>
+  </div>
+
+  <!-- State: required -->
+  <div data-testid="state-required">
+    <po-select
+      name="required"
+      p-label="Campo obrigatorio"
+      p-required
+      [p-show-required]="true"
+      p-placeholder="Campo obrigatorio"
+      [p-options]="options"
+    ></po-select>
+  </div>
+
+  <!-- State: loading -->
+  <div data-testid="state-loading">
+    <po-select name="loading" p-loading p-placeholder="Carregando..." [p-options]="options"></po-select>
+  </div>
+
+  <!-- State: loading + label + helper -->
+  <div data-testid="state-loading-label-helper">
+    <po-select
+      name="loading-label-helper"
+      p-label="Campo com loading, label e helper"
+      p-loading
+      p-helper="Texto de ajuda"
+      p-placeholder="Carregando..."
+      [p-options]="options"
+    ></po-select>
+  </div>
+</div>
diff --git a/e2e/visual/fields/po-select/po-select-states.component.ts b/e2e/visual/fields/po-select/po-select-states.component.ts
new file mode 100644
index 0000000000..c5246fdda7
--- /dev/null
+++ b/e2e/visual/fields/po-select/po-select-states.component.ts
@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-visual-test-po-select-states',
+  templateUrl: './po-select-states.component.html',
+  standalone: false
+})
+export class VisualTestPoSelectStatesComponent {
+  options = [
+    { label: 'Opcao 1', value: '1' },
+    { label: 'Opcao 2', value: '2' },
+    { label: 'Opcao 3', value: '3' }
+  ];
+}
diff --git a/e2e/visual/fields/po-select/po-select-states.visual.spec.ts b/e2e/visual/fields/po-select/po-select-states.visual.spec.ts
new file mode 100644
index 0000000000..2c4565d48b
--- /dev/null
+++ b/e2e/visual/fields/po-select/po-select-states.visual.spec.ts
@@ -0,0 +1,53 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('po-select - visual regression por estado', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/visual/fields/po-select-states');
+    await page.waitForSelector('[data-testid="state-basic"]');
+  });
+
+  test('basic', async ({ page }) => {
+    const el = page.locator('[data-testid="state-basic"]');
+    await expect(el).toHaveScreenshot('po-select-state-basic.png');
+  });
+
+  test('label', async ({ page }) => {
+    const el = page.locator('[data-testid="state-label"]');
+    await expect(el).toHaveScreenshot('po-select-state-label.png');
+  });
+
+  test('label + helper', async ({ page }) => {
+    const el = page.locator('[data-testid="state-label-helper"]');
+    await expect(el).toHaveScreenshot('po-select-state-label-helper.png');
+  });
+
+  test('label + help-text', async ({ page }) => {
+    const el = page.locator('[data-testid="state-label-help"]');
+    await expect(el).toHaveScreenshot('po-select-state-label-help.png');
+  });
+
+  test('disabled', async ({ page }) => {
+    const el = page.locator('[data-testid="state-disabled"]');
+    await expect(el).toHaveScreenshot('po-select-state-disabled.png');
+  });
+
+  test('readonly', async ({ page }) => {
+    const el = page.locator('[data-testid="state-readonly"]');
+    await expect(el).toHaveScreenshot('po-select-state-readonly.png');
+  });
+
+  test('required', async ({ page }) => {
+    const el = page.locator('[data-testid="state-required"]');
+    await expect(el).toHaveScreenshot('po-select-state-required.png');
+  });
+
+  test('loading', async ({ page }) => {
+    const el = page.locator('[data-testid="state-loading"]');
+    await expect(el).toHaveScreenshot('po-select-state-loading.png');
+  });
+
+  test('loading + label + helper', async ({ page }) => {
+    const el = page.locator('[data-testid="state-loading-label-helper"]');
+    await expect(el).toHaveScreenshot('po-select-state-loading-label-helper.png');
+  });
+});
diff --git a/e2e/visual/fields/po-switch/po-switch-states.component.html b/e2e/visual/fields/po-switch/po-switch-states.component.html
new file mode 100644
index 0000000000..5ac18ea0f9
--- /dev/null
+++ b/e2e/visual/fields/po-switch/po-switch-states.component.html
@@ -0,0 +1,36 @@
+<div style="padding: 16px; display: flex; flex-direction: column; gap: 24px">
+  <!-- State: basic -->
+  <div data-testid="state-basic">
+    <po-switch name="basic" p-label="Switch basico"></po-switch>
+  </div>
+
+  <!-- State: label-on / label-off -->
+  <div data-testid="state-labels">
+    <po-switch name="labels" p-label="Switch com labels" p-label-on="Ativo" p-label-off="Inativo"></po-switch>
+  </div>
+
+  <!-- State: label + helper -->
+  <div data-testid="state-label-helper">
+    <po-switch name="label-helper" p-label="Switch com helper" p-helper="Texto de ajuda do helper"></po-switch>
+  </div>
+
+  <!-- State: disabled -->
+  <div data-testid="state-disabled">
+    <po-switch name="disabled" p-label="Switch desabilitado" p-disabled></po-switch>
+  </div>
+
+  <!-- State: disabled + checked -->
+  <div data-testid="state-disabled-checked">
+    <po-switch
+      name="disabled-checked"
+      p-label="Switch desabilitado ativo"
+      p-disabled
+      [(ngModel)]="checkedValue"
+    ></po-switch>
+  </div>
+
+  <!-- State: loading -->
+  <div data-testid="state-loading">
+    <po-switch name="loading" p-label="Switch com loading" p-loading></po-switch>
+  </div>
+</div>
diff --git a/e2e/visual/fields/po-switch/po-switch-states.component.ts b/e2e/visual/fields/po-switch/po-switch-states.component.ts
new file mode 100644
index 0000000000..213c3e245f
--- /dev/null
+++ b/e2e/visual/fields/po-switch/po-switch-states.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-visual-test-po-switch-states',
+  templateUrl: './po-switch-states.component.html',
+  standalone: false
+})
+export class VisualTestPoSwitchStatesComponent {
+  checkedValue = true;
+}
diff --git a/e2e/visual/fields/po-switch/po-switch-states.visual.spec.ts b/e2e/visual/fields/po-switch/po-switch-states.visual.spec.ts
new file mode 100644
index 0000000000..633a0b6b81
--- /dev/null
+++ b/e2e/visual/fields/po-switch/po-switch-states.visual.spec.ts
@@ -0,0 +1,38 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('po-switch - visual regression por estado', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/visual/fields/po-switch-states');
+    await page.waitForSelector('[data-testid="state-basic"]');
+  });
+
+  test('basic', async ({ page }) => {
+    const el = page.locator('[data-testid="state-basic"]');
+    await expect(el).toHaveScreenshot('po-switch-state-basic.png');
+  });
+
+  test('label-on / label-off', async ({ page }) => {
+    const el = page.locator('[data-testid="state-labels"]');
+    await expect(el).toHaveScreenshot('po-switch-state-labels.png');
+  });
+
+  test('label + helper', async ({ page }) => {
+    const el = page.locator('[data-testid="state-label-helper"]');
+    await expect(el).toHaveScreenshot('po-switch-state-label-helper.png');
+  });
+
+  test('disabled', async ({ page }) => {
+    const el = page.locator('[data-testid="state-disabled"]');
+    await expect(el).toHaveScreenshot('po-switch-state-disabled.png');
+  });
+
+  test('disabled + checked', async ({ page }) => {
+    const el = page.locator('[data-testid="state-disabled-checked"]');
+    await expect(el).toHaveScreenshot('po-switch-state-disabled-checked.png');
+  });
+
+  test('loading', async ({ page }) => {
+    const el = page.locator('[data-testid="state-loading"]');
+    await expect(el).toHaveScreenshot('po-switch-state-loading.png');
+  });
+});
diff --git a/e2e/visual/fields/po-textarea/po-textarea-states.component.html b/e2e/visual/fields/po-textarea/po-textarea-states.component.html
new file mode 100644
index 0000000000..3bd1295334
--- /dev/null
+++ b/e2e/visual/fields/po-textarea/po-textarea-states.component.html
@@ -0,0 +1,81 @@
+<div style="padding: 16px; display: flex; flex-direction: column; gap: 24px">
+  <!-- State: basic -->
+  <div data-testid="state-basic">
+    <po-textarea name="basic" p-placeholder="Digite um texto" p-rows="3"></po-textarea>
+  </div>
+
+  <!-- State: label -->
+  <div data-testid="state-label">
+    <po-textarea name="label" p-label="Label do campo" p-placeholder="Campo com label" p-rows="3"></po-textarea>
+  </div>
+
+  <!-- State: label + helper -->
+  <div data-testid="state-label-helper">
+    <po-textarea
+      name="label-helper"
+      p-label="Label do campo"
+      p-helper="Texto de ajuda do helper"
+      p-placeholder="Campo com label e helper"
+      p-rows="3"
+    ></po-textarea>
+  </div>
+
+  <!-- State: label + help-text -->
+  <div data-testid="state-label-help">
+    <po-textarea
+      name="label-help"
+      p-label="Label do campo"
+      p-help="Texto de apoio do campo"
+      p-placeholder="Campo com label e help"
+      p-rows="3"
+    ></po-textarea>
+  </div>
+
+  <!-- State: disabled -->
+  <div data-testid="state-disabled">
+    <po-textarea
+      name="disabled"
+      p-label="Campo desabilitado"
+      p-disabled
+      p-placeholder="Campo desabilitado"
+      p-rows="3"
+    ></po-textarea>
+  </div>
+
+  <!-- State: readonly -->
+  <div data-testid="state-readonly">
+    <po-textarea
+      name="readonly"
+      p-label="Campo somente leitura"
+      p-readonly
+      p-placeholder="Campo readonly"
+      [(ngModel)]="readonlyValue"
+      p-rows="3"
+    ></po-textarea>
+  </div>
+
+  <!-- State: required -->
+  <div data-testid="state-required">
+    <po-textarea
+      name="required"
+      p-label="Campo obrigatorio"
+      p-required
+      [p-show-required]="true"
+      p-placeholder="Campo obrigatorio"
+      p-rows="3"
+    ></po-textarea>
+  </div>
+
+  <!-- State: required + errorMessage -->
+  <div data-testid="state-required-error">
+    <po-textarea
+      name="required-error"
+      p-label="Campo obrigatorio com erro"
+      p-required
+      [p-show-required]="true"
+      p-field-error-message="Este campo e obrigatorio"
+      p-placeholder="Campo obrigatorio com mensagem de erro"
+      p-rows="3"
+    ></po-textarea>
+  </div>
+</div>
diff --git a/e2e/visual/fields/po-textarea/po-textarea-states.component.ts b/e2e/visual/fields/po-textarea/po-textarea-states.component.ts
new file mode 100644
index 0000000000..1accef13f7
--- /dev/null
+++ b/e2e/visual/fields/po-textarea/po-textarea-states.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-visual-test-po-textarea-states',
+  templateUrl: './po-textarea-states.component.html',
+  standalone: false
+})
+export class VisualTestPoTextareaStatesComponent {
+  readonlyValue = 'Texto somente leitura';
+}
diff --git a/e2e/visual/fields/po-textarea/po-textarea-states.visual.spec.ts b/e2e/visual/fields/po-textarea/po-textarea-states.visual.spec.ts
new file mode 100644
index 0000000000..48f8766111
--- /dev/null
+++ b/e2e/visual/fields/po-textarea/po-textarea-states.visual.spec.ts
@@ -0,0 +1,50 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('po-textarea - visual regression por estado', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/visual/fields/po-textarea-states');
+    await page.waitForSelector('[data-testid="state-basic"]');
+  });
+
+  test('basic', async ({ page }) => {
+    const el = page.locator('[data-testid="state-basic"]');
+    await expect(el).toHaveScreenshot('po-textarea-state-basic.png');
+  });
+
+  test('label', async ({ page }) => {
+    const el = page.locator('[data-testid="state-label"]');
+    await expect(el).toHaveScreenshot('po-textarea-state-label.png');
+  });
+
+  test('label + helper', async ({ page }) => {
+    const el = page.locator('[data-testid="state-label-helper"]');
+    await expect(el).toHaveScreenshot('po-textarea-state-label-helper.png');
+  });
+
+  test('label + help-text', async ({ page }) => {
+    const el = page.locator('[data-testid="state-label-help"]');
+    await expect(el).toHaveScreenshot('po-textarea-state-label-help.png');
+  });
+
+  test('disabled', async ({ page }) => {
+    const el = page.locator('[data-testid="state-disabled"]');
+    await expect(el).toHaveScreenshot('po-textarea-state-disabled.png');
+  });
+
+  test('readonly', async ({ page }) => {
+    const el = page.locator('[data-testid="state-readonly"]');
+    await expect(el).toHaveScreenshot('po-textarea-state-readonly.png');
+  });
+
+  test('required', async ({ page }) => {
+    const el = page.locator('[data-testid="state-required"]');
+    await expect(el).toHaveScreenshot('po-textarea-state-required.png');
+  });
+
+  test('required + errorMessage', async ({ page }) => {
+    const el = page.locator('[data-testid="state-required-error"]');
+    await el.locator('textarea').focus();
+    await el.locator('textarea').blur();
+    await expect(el).toHaveScreenshot('po-textarea-state-required-error.png');
+  });
+});
diff --git a/e2e/visual/fields/po-upload/po-upload-states.component.html b/e2e/visual/fields/po-upload/po-upload-states.component.html
new file mode 100644
index 0000000000..c9eb87b82a
--- /dev/null
+++ b/e2e/visual/fields/po-upload/po-upload-states.component.html
@@ -0,0 +1,41 @@
+<div style="padding: 16px; display: flex; flex-direction: column; gap: 24px">
+  <!-- State: basic -->
+  <div data-testid="state-basic">
+    <po-upload name="basic" p-url="/api/upload"></po-upload>
+  </div>
+
+  <!-- State: label -->
+  <div data-testid="state-label">
+    <po-upload name="label" p-label="Label do campo" p-url="/api/upload"></po-upload>
+  </div>
+
+  <!-- State: label + helper -->
+  <div data-testid="state-label-helper">
+    <po-upload
+      name="label-helper"
+      p-label="Label do campo"
+      p-helper="Texto de ajuda do helper"
+      p-url="/api/upload"
+    ></po-upload>
+  </div>
+
+  <!-- State: label + help-text -->
+  <div data-testid="state-label-help">
+    <po-upload
+      name="label-help"
+      p-label="Label do campo"
+      p-help="Texto de apoio do campo"
+      p-url="/api/upload"
+    ></po-upload>
+  </div>
+
+  <!-- State: disabled -->
+  <div data-testid="state-disabled">
+    <po-upload name="disabled" p-label="Campo desabilitado" p-disabled p-url="/api/upload"></po-upload>
+  </div>
+
+  <!-- State: required -->
+  <div data-testid="state-required">
+    <po-upload name="required" p-label="Campo obrigatorio" p-required p-url="/api/upload"></po-upload>
+  </div>
+</div>
diff --git a/e2e/visual/fields/po-upload/po-upload-states.component.ts b/e2e/visual/fields/po-upload/po-upload-states.component.ts
new file mode 100644
index 0000000000..3f7b624510
--- /dev/null
+++ b/e2e/visual/fields/po-upload/po-upload-states.component.ts
@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-visual-test-po-upload-states',
+  templateUrl: './po-upload-states.component.html',
+  standalone: false
+})
+export class VisualTestPoUploadStatesComponent {}
diff --git a/e2e/visual/fields/po-upload/po-upload-states.visual.spec.ts b/e2e/visual/fields/po-upload/po-upload-states.visual.spec.ts
new file mode 100644
index 0000000000..7e59fe0b61
--- /dev/null
+++ b/e2e/visual/fields/po-upload/po-upload-states.visual.spec.ts
@@ -0,0 +1,38 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('po-upload - visual regression por estado', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/visual/fields/po-upload-states');
+    await page.waitForSelector('[data-testid="state-basic"]');
+  });
+
+  test('basic', async ({ page }) => {
+    const el = page.locator('[data-testid="state-basic"]');
+    await expect(el).toHaveScreenshot('po-upload-state-basic.png');
+  });
+
+  test('label', async ({ page }) => {
+    const el = page.locator('[data-testid="state-label"]');
+    await expect(el).toHaveScreenshot('po-upload-state-label.png');
+  });
+
+  test('label + helper', async ({ page }) => {
+    const el = page.locator('[data-testid="state-label-helper"]');
+    await expect(el).toHaveScreenshot('po-upload-state-label-helper.png');
+  });
+
+  test('label + help-text', async ({ page }) => {
+    const el = page.locator('[data-testid="state-label-help"]');
+    await expect(el).toHaveScreenshot('po-upload-state-label-help.png');
+  });
+
+  test('disabled', async ({ page }) => {
+    const el = page.locator('[data-testid="state-disabled"]');
+    await expect(el).toHaveScreenshot('po-upload-state-disabled.png');
+  });
+
+  test('required', async ({ page }) => {
+    const el = page.locator('[data-testid="state-required"]');
+    await expect(el).toHaveScreenshot('po-upload-state-required.png');
+  });
+});
diff --git a/e2e/visual/fields/po-url/po-url-states.component.html b/e2e/visual/fields/po-url/po-url-states.component.html
new file mode 100644
index 0000000000..aff9e10a0d
--- /dev/null
+++ b/e2e/visual/fields/po-url/po-url-states.component.html
@@ -0,0 +1,87 @@
+<div style="padding: 16px; display: flex; flex-direction: column; gap: 24px">
+  <!-- State: basic -->
+  <div data-testid="state-basic">
+    <po-url name="basic" p-placeholder="Digite uma URL"></po-url>
+  </div>
+
+  <!-- State: label -->
+  <div data-testid="state-label">
+    <po-url name="label" p-label="Label do campo" p-placeholder="Campo com label"></po-url>
+  </div>
+
+  <!-- State: label + helper -->
+  <div data-testid="state-label-helper">
+    <po-url
+      name="label-helper"
+      p-label="Label do campo"
+      p-helper="Texto de ajuda do helper"
+      p-placeholder="Campo com label e helper"
+    ></po-url>
+  </div>
+
+  <!-- State: label + help-text -->
+  <div data-testid="state-label-help">
+    <po-url
+      name="label-help"
+      p-label="Label do campo"
+      p-help="Texto de apoio do campo"
+      p-placeholder="Campo com label e help"
+    ></po-url>
+  </div>
+
+  <!-- State: disabled -->
+  <div data-testid="state-disabled">
+    <po-url name="disabled" p-label="Campo desabilitado" p-disabled p-placeholder="Campo desabilitado"></po-url>
+  </div>
+
+  <!-- State: readonly -->
+  <div data-testid="state-readonly">
+    <po-url
+      name="readonly"
+      p-label="Campo somente leitura"
+      p-readonly
+      p-placeholder="Campo readonly"
+      [(ngModel)]="readonlyValue"
+    ></po-url>
+  </div>
+
+  <!-- State: required -->
+  <div data-testid="state-required">
+    <po-url
+      name="required"
+      p-label="Campo obrigatorio"
+      p-required
+      [p-show-required]="true"
+      p-placeholder="Campo obrigatorio"
+    ></po-url>
+  </div>
+
+  <!-- State: required + errorMessage -->
+  <div data-testid="state-required-error">
+    <po-url
+      name="required-error"
+      p-label="Campo obrigatorio com erro"
+      p-required
+      [p-show-required]="true"
+      p-error-pattern="Este campo e obrigatorio"
+      [p-required-field-error-message]="true"
+      p-placeholder="Campo obrigatorio com mensagem de erro"
+    ></po-url>
+  </div>
+
+  <!-- State: loading -->
+  <div data-testid="state-loading">
+    <po-url name="loading" p-loading p-placeholder="Carregando..."></po-url>
+  </div>
+
+  <!-- State: loading + label + helper -->
+  <div data-testid="state-loading-label-helper">
+    <po-url
+      name="loading-label-helper"
+      p-label="Campo com loading, label e helper"
+      p-loading
+      p-helper="Texto de ajuda"
+      p-placeholder="Carregando..."
+    ></po-url>
+  </div>
+</div>
diff --git a/e2e/visual/fields/po-url/po-url-states.component.ts b/e2e/visual/fields/po-url/po-url-states.component.ts
new file mode 100644
index 0000000000..2917f45a69
--- /dev/null
+++ b/e2e/visual/fields/po-url/po-url-states.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-visual-test-po-url-states',
+  templateUrl: './po-url-states.component.html',
+  standalone: false
+})
+export class VisualTestPoUrlStatesComponent {
+  readonlyValue = 'https://po-ui.io';
+}
diff --git a/e2e/visual/fields/po-url/po-url-states.visual.spec.ts b/e2e/visual/fields/po-url/po-url-states.visual.spec.ts
new file mode 100644
index 0000000000..01ffa97fe8
--- /dev/null
+++ b/e2e/visual/fields/po-url/po-url-states.visual.spec.ts
@@ -0,0 +1,60 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('po-url - visual regression por estado', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/visual/fields/po-url-states');
+    await page.waitForSelector('[data-testid="state-basic"]');
+  });
+
+  test('basic', async ({ page }) => {
+    const el = page.locator('[data-testid="state-basic"]');
+    await expect(el).toHaveScreenshot('po-url-state-basic.png');
+  });
+
+  test('label', async ({ page }) => {
+    const el = page.locator('[data-testid="state-label"]');
+    await expect(el).toHaveScreenshot('po-url-state-label.png');
+  });
+
+  test('label + helper', async ({ page }) => {
+    const el = page.locator('[data-testid="state-label-helper"]');
+    await expect(el).toHaveScreenshot('po-url-state-label-helper.png');
+  });
+
+  test('label + help-text', async ({ page }) => {
+    const el = page.locator('[data-testid="state-label-help"]');
+    await expect(el).toHaveScreenshot('po-url-state-label-help.png');
+  });
+
+  test('disabled', async ({ page }) => {
+    const el = page.locator('[data-testid="state-disabled"]');
+    await expect(el).toHaveScreenshot('po-url-state-disabled.png');
+  });
+
+  test('readonly', async ({ page }) => {
+    const el = page.locator('[data-testid="state-readonly"]');
+    await expect(el).toHaveScreenshot('po-url-state-readonly.png');
+  });
+
+  test('required', async ({ page }) => {
+    const el = page.locator('[data-testid="state-required"]');
+    await expect(el).toHaveScreenshot('po-url-state-required.png');
+  });
+
+  test('required + errorMessage', async ({ page }) => {
+    const el = page.locator('[data-testid="state-required-error"]');
+    await el.locator('input').focus();
+    await el.locator('input').blur();
+    await expect(el).toHaveScreenshot('po-url-state-required-error.png');
+  });
+
+  test('loading', async ({ page }) => {
+    const el = page.locator('[data-testid="state-loading"]');
+    await expect(el).toHaveScreenshot('po-url-state-loading.png');
+  });
+
+  test('loading + label + helper', async ({ page }) => {
+    const el = page.locator('[data-testid="state-loading-label-helper"]');
+    await expect(el).toHaveScreenshot('po-url-state-loading-label-helper.png');
+  });
+});
diff --git a/e2e/visual/po-accordion/po-accordion.visual.spec.ts b/e2e/visual/po-accordion/po-accordion.visual.spec.ts
new file mode 100644
index 0000000000..1bb15d7987
--- /dev/null
+++ b/e2e/visual/po-accordion/po-accordion.visual.spec.ts
@@ -0,0 +1,9 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('po-accordion - visual regression', () => {
+  test('basic', async ({ page }) => {
+    await page.goto('/visual/po-accordion-basic');
+    await page.waitForSelector('po-accordion');
+    await expect(page.locator('sample-po-accordion-basic')).toHaveScreenshot('po-accordion-basic.png');
+  });
+});
diff --git a/e2e/visual/po-button-group/po-button-group.visual.spec.ts b/e2e/visual/po-button-group/po-button-group.visual.spec.ts
new file mode 100644
index 0000000000..56d85caa11
--- /dev/null
+++ b/e2e/visual/po-button-group/po-button-group.visual.spec.ts
@@ -0,0 +1,9 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('po-button-group - visual regression', () => {
+  test('basic', async ({ page }) => {
+    await page.goto('/visual/po-button-group-basic');
+    await page.waitForSelector('po-button-group');
+    await expect(page.locator('po-button-group')).toHaveScreenshot('po-button-group-basic.png');
+  });
+});
diff --git a/e2e/visual/po-button/po-button.visual.spec.ts b/e2e/visual/po-button/po-button.visual.spec.ts
new file mode 100644
index 0000000000..d1ad3298d6
--- /dev/null
+++ b/e2e/visual/po-button/po-button.visual.spec.ts
@@ -0,0 +1,9 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('po-button - visual regression', () => {
+  test('basic', async ({ page }) => {
+    await page.goto('/visual/po-button-basic');
+    await page.waitForSelector('po-button');
+    await expect(page.locator('sample-po-button-basic')).toHaveScreenshot('po-button-basic.png');
+  });
+});
diff --git a/e2e/visual/po-checkbox/po-checkbox.visual.spec.ts b/e2e/visual/po-checkbox/po-checkbox.visual.spec.ts
new file mode 100644
index 0000000000..1e9dd87af3
--- /dev/null
+++ b/e2e/visual/po-checkbox/po-checkbox.visual.spec.ts
@@ -0,0 +1,9 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('po-checkbox - visual regression', () => {
+  test('basic', async ({ page }) => {
+    await page.goto('/visual/po-checkbox-basic');
+    await page.waitForSelector('po-checkbox');
+    await expect(page.locator('sample-po-checkbox-basic')).toHaveScreenshot('po-checkbox-basic.png');
+  });
+});
diff --git a/e2e/visual/po-divider/po-divider.visual.spec.ts b/e2e/visual/po-divider/po-divider.visual.spec.ts
new file mode 100644
index 0000000000..ae3523575b
--- /dev/null
+++ b/e2e/visual/po-divider/po-divider.visual.spec.ts
@@ -0,0 +1,9 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('po-divider - visual regression', () => {
+  test('basic', async ({ page }) => {
+    await page.goto('/visual/po-divider-basic');
+    await page.waitForSelector('po-divider');
+    await expect(page.locator('sample-po-divider-basic')).toHaveScreenshot('po-divider-basic.png');
+  });
+});
diff --git a/e2e/visual/po-input/po-input-basic.visual.spec.ts b/e2e/visual/po-input/po-input-basic.visual.spec.ts
new file mode 100644
index 0000000000..c5238ab907
--- /dev/null
+++ b/e2e/visual/po-input/po-input-basic.visual.spec.ts
@@ -0,0 +1,9 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('po-input - visual regression', () => {
+  test('basic', async ({ page }) => {
+    await page.goto('/visual/po-input-basic');
+    await page.waitForSelector('po-input');
+    await expect(page.locator('sample-po-input-basic')).toHaveScreenshot('po-input-basic.png');
+  });
+});
diff --git a/e2e/visual/po-input/po-input-states.component.html b/e2e/visual/po-input/po-input-states.component.html
new file mode 100644
index 0000000000..0c63b74348
--- /dev/null
+++ b/e2e/visual/po-input/po-input-states.component.html
@@ -0,0 +1,108 @@
+<div style="padding: 16px; display: flex; flex-direction: column; gap: 24px">
+  <!-- State: basic -->
+  <div data-testid="state-basic">
+    <po-input name="basic" p-placeholder="Digite algo"></po-input>
+  </div>
+
+  <!-- State: label -->
+  <div data-testid="state-label">
+    <po-input name="label" p-label="Label do campo" p-placeholder="Campo com label"></po-input>
+  </div>
+
+  <!-- State: label + helper -->
+  <div data-testid="state-label-helper">
+    <po-input
+      name="label-helper"
+      p-label="Label do campo"
+      p-helper="Texto de ajuda do helper"
+      p-placeholder="Campo com label e helper"
+    ></po-input>
+  </div>
+
+  <!-- State: label + help-text -->
+  <div data-testid="state-label-help">
+    <po-input
+      name="label-help"
+      p-label="Label do campo"
+      p-help="Texto de apoio do campo"
+      p-placeholder="Campo com label e help"
+    ></po-input>
+  </div>
+
+  <!-- State: label + helper + help-text -->
+  <div data-testid="state-label-helper-help">
+    <po-input
+      name="label-helper-help"
+      p-label="Label do campo"
+      p-helper="Texto de ajuda do helper"
+      p-help="Texto de apoio do campo"
+      p-placeholder="Campo com label, helper e help"
+    ></po-input>
+  </div>
+
+  <!-- State: helper (sem label) -->
+  <div data-testid="state-helper">
+    <po-input name="helper" p-helper="Texto de ajuda do helper" p-placeholder="Campo apenas com helper"></po-input>
+  </div>
+
+  <!-- State: disabled -->
+  <div data-testid="state-disabled">
+    <po-input name="disabled" p-label="Campo desabilitado" p-disabled p-placeholder="Campo desabilitado"></po-input>
+  </div>
+
+  <!-- State: readonly -->
+  <div data-testid="state-readonly">
+    <po-input
+      name="readonly"
+      p-label="Campo somente leitura"
+      p-readonly
+      p-placeholder="Campo readonly"
+      [(ngModel)]="readonlyValue"
+    ></po-input>
+  </div>
+
+  <!-- State: required -->
+  <div data-testid="state-required">
+    <po-input
+      name="required"
+      p-label="Campo obrigatorio"
+      p-required
+      [p-show-required]="true"
+      p-placeholder="Campo obrigatorio"
+    ></po-input>
+  </div>
+
+  <!-- State: required + errorMessage -->
+  <div data-testid="state-required-error">
+    <po-input
+      name="required-error"
+      p-label="Campo obrigatorio com erro"
+      p-required
+      [p-show-required]="true"
+      p-error-pattern="Este campo e obrigatorio"
+      [p-required-field-error-message]="true"
+      p-placeholder="Campo obrigatorio com mensagem de erro"
+    ></po-input>
+  </div>
+
+  <!-- State: loading (sem label) -->
+  <div data-testid="state-loading">
+    <po-input name="loading" p-loading p-placeholder="Carregando..."></po-input>
+  </div>
+
+  <!-- State: loading + helper (sem label) -->
+  <div data-testid="state-loading-helper">
+    <po-input name="loading-helper" p-loading p-helper="Texto de ajuda" p-placeholder="Carregando..."></po-input>
+  </div>
+
+  <!-- State: loading + label + helper -->
+  <div data-testid="state-loading-label-helper">
+    <po-input
+      name="loading-label-helper"
+      p-label="Campo com loading, label e helper"
+      p-loading
+      p-helper="Texto de ajuda"
+      p-placeholder="Carregando..."
+    ></po-input>
+  </div>
+</div>
diff --git a/e2e/visual/po-input/po-input-states.component.ts b/e2e/visual/po-input/po-input-states.component.ts
new file mode 100644
index 0000000000..01f28e888b
--- /dev/null
+++ b/e2e/visual/po-input/po-input-states.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-visual-test-po-input-states',
+  templateUrl: './po-input-states.component.html',
+  standalone: false
+})
+export class VisualTestPoInputStatesComponent {
+  readonlyValue = 'Valor somente leitura';
+}
diff --git a/e2e/visual/po-input/po-input-states.visual.spec.ts b/e2e/visual/po-input/po-input-states.visual.spec.ts
new file mode 100644
index 0000000000..5379c75ebc
--- /dev/null
+++ b/e2e/visual/po-input/po-input-states.visual.spec.ts
@@ -0,0 +1,76 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('po-input - visual regression por estado', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/visual/po-input-states');
+    await page.waitForSelector('[data-testid="state-basic"]');
+  });
+
+  test('basic (sem propriedades)', async ({ page }) => {
+    const el = page.locator('[data-testid="state-basic"]');
+    await expect(el).toHaveScreenshot('po-input-state-basic.png');
+  });
+
+  test('label', async ({ page }) => {
+    const el = page.locator('[data-testid="state-label"]');
+    await expect(el).toHaveScreenshot('po-input-state-label.png');
+  });
+
+  test('label + helper', async ({ page }) => {
+    const el = page.locator('[data-testid="state-label-helper"]');
+    await expect(el).toHaveScreenshot('po-input-state-label-helper.png');
+  });
+
+  test('label + help-text', async ({ page }) => {
+    const el = page.locator('[data-testid="state-label-help"]');
+    await expect(el).toHaveScreenshot('po-input-state-label-help.png');
+  });
+
+  test('label + helper + help-text', async ({ page }) => {
+    const el = page.locator('[data-testid="state-label-helper-help"]');
+    await expect(el).toHaveScreenshot('po-input-state-label-helper-help.png');
+  });
+
+  test('helper (sem label)', async ({ page }) => {
+    const el = page.locator('[data-testid="state-helper"]');
+    await expect(el).toHaveScreenshot('po-input-state-helper.png');
+  });
+
+  test('disabled', async ({ page }) => {
+    const el = page.locator('[data-testid="state-disabled"]');
+    await expect(el).toHaveScreenshot('po-input-state-disabled.png');
+  });
+
+  test('readonly', async ({ page }) => {
+    const el = page.locator('[data-testid="state-readonly"]');
+    await expect(el).toHaveScreenshot('po-input-state-readonly.png');
+  });
+
+  test('required', async ({ page }) => {
+    const el = page.locator('[data-testid="state-required"]');
+    await expect(el).toHaveScreenshot('po-input-state-required.png');
+  });
+
+  test('required + errorMessage', async ({ page }) => {
+    const el = page.locator('[data-testid="state-required-error"]');
+    // Foca e desfoca o campo para acionar a validacao e exibir o erro
+    await el.locator('input').focus();
+    await el.locator('input').blur();
+    await expect(el).toHaveScreenshot('po-input-state-required-error.png');
+  });
+
+  test('loading', async ({ page }) => {
+    const el = page.locator('[data-testid="state-loading"]');
+    await expect(el).toHaveScreenshot('po-input-state-loading.png');
+  });
+
+  test('loading + helper', async ({ page }) => {
+    const el = page.locator('[data-testid="state-loading-helper"]');
+    await expect(el).toHaveScreenshot('po-input-state-loading-helper.png');
+  });
+
+  test('loading + label + helper', async ({ page }) => {
+    const el = page.locator('[data-testid="state-loading-label-helper"]');
+    await expect(el).toHaveScreenshot('po-input-state-loading-label-helper.png');
+  });
+});
diff --git a/e2e/visual/po-progress/po-progress.visual.spec.ts b/e2e/visual/po-progress/po-progress.visual.spec.ts
new file mode 100644
index 0000000000..848b51a7cf
--- /dev/null
+++ b/e2e/visual/po-progress/po-progress.visual.spec.ts
@@ -0,0 +1,9 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('po-progress - visual regression', () => {
+  test('basic', async ({ page }) => {
+    await page.goto('/visual/po-progress-basic');
+    await page.waitForSelector('po-progress');
+    await expect(page.locator('sample-po-progress-basic')).toHaveScreenshot('po-progress-basic.png');
+  });
+});
diff --git a/e2e/visual/po-select/po-select.visual.spec.ts b/e2e/visual/po-select/po-select.visual.spec.ts
new file mode 100644
index 0000000000..a366275cf1
--- /dev/null
+++ b/e2e/visual/po-select/po-select.visual.spec.ts
@@ -0,0 +1,9 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('po-select - visual regression', () => {
+  test('basic', async ({ page }) => {
+    await page.goto('/visual/po-select-basic');
+    await page.waitForSelector('po-select');
+    await expect(page.locator('sample-po-select-basic')).toHaveScreenshot('po-select-basic.png');
+  });
+});
diff --git a/e2e/visual/po-switch/po-switch.visual.spec.ts b/e2e/visual/po-switch/po-switch.visual.spec.ts
new file mode 100644
index 0000000000..d9b05cdb79
--- /dev/null
+++ b/e2e/visual/po-switch/po-switch.visual.spec.ts
@@ -0,0 +1,9 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('po-switch - visual regression', () => {
+  test('basic', async ({ page }) => {
+    await page.goto('/visual/po-switch-basic');
+    await page.waitForSelector('po-switch');
+    await expect(page.locator('sample-po-switch-basic')).toHaveScreenshot('po-switch-basic.png');
+  });
+});
diff --git a/e2e/visual/po-table/po-table.visual.spec.ts b/e2e/visual/po-table/po-table.visual.spec.ts
new file mode 100644
index 0000000000..5b7c4fb2c8
--- /dev/null
+++ b/e2e/visual/po-table/po-table.visual.spec.ts
@@ -0,0 +1,9 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('po-table - visual regression', () => {
+  test('basic', async ({ page }) => {
+    await page.goto('/visual/po-table-basic');
+    await page.waitForSelector('po-table');
+    await expect(page.locator('sample-po-table-basic')).toHaveScreenshot('po-table-basic.png');
+  });
+});
diff --git a/e2e/visual/po-tag/po-tag.visual.spec.ts b/e2e/visual/po-tag/po-tag.visual.spec.ts
new file mode 100644
index 0000000000..bcfd768ba1
--- /dev/null
+++ b/e2e/visual/po-tag/po-tag.visual.spec.ts
@@ -0,0 +1,9 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('po-tag - visual regression', () => {
+  test('basic', async ({ page }) => {
+    await page.goto('/visual/po-tag-basic');
+    await page.waitForSelector('po-tag');
+    await expect(page.locator('sample-po-tag-basic')).toHaveScreenshot('po-tag-basic.png');
+  });
+});
diff --git a/e2e/visual/tsconfig.visual.json b/e2e/visual/tsconfig.visual.json
new file mode 100644
index 0000000000..e5b94c6971
--- /dev/null
+++ b/e2e/visual/tsconfig.visual.json
@@ -0,0 +1,14 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/visual-app",
+    "types": [],
+    "paths": {
+      "@po-ui/ng-components": ["./projects/ui/src/public-api"],
+      "@po-ui/ng-components/*": ["./projects/ui/src/*"]
+    }
+  },
+  "files": ["app/main.ts", "app/polyfills.ts"],
+  "include": ["**/*.d.ts"],
+  "exclude": ["**/*.spec.ts", "__snapshots__/**", "test-results/**", "playwright-report/**"]
+}
diff --git a/package.json b/package.json
index d2d3e2e0d0..797e923eae 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,9 @@
     "lint:templates": "ng lint templates --format=stylish",
     "lint:code-editor": "ng lint code-editor --format=stylish",
     "e2e": "ng e2e",
+    "test:visual": "npx playwright test",
+    "test:visual:update": "npx playwright test --update-snapshots",
+    "test:visual:report": "npx playwright show-report e2e/visual/playwright-report",
     "test": "ng test --watch=false --code-coverage --browsers=ChromeHeadless --source-map",
     "test:schematics": "npm run test:storage:schematics && npm run test:ui:schematics && npm run test:sync:schematics && npm run test:templates:schematics && npm run test:code-editor:schematics",
     "test:storage": "ng test storage --watch=false --code-coverage --browsers=ChromeHeadless --source-map",
@@ -107,6 +110,7 @@
     "@animaliads/animalia-icon": "1.0.5",
     "@commitlint/cli": "^18.4.3",
     "@commitlint/config-angular": "^18.4.3",
+    "@playwright/test": "^1.58.2",
     "@po-ui/ng-schematics": "^18.0.0",
     "@types/jasmine": "~5.1.4",
     "@types/jasminewd2": "~2.0.13",
diff --git a/playwright.config.ts b/playwright.config.ts
new file mode 100644
index 0000000000..eaf346dc58
--- /dev/null
+++ b/playwright.config.ts
@@ -0,0 +1,36 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './e2e/visual',
+  outputDir: './e2e/visual/test-results',
+  snapshotDir: './e2e/visual/__snapshots__',
+  timeout: 60000,
+  fullyParallel: true,
+  forbidOnly: !!process.env['CI'],
+  retries: process.env['CI'] ? 1 : 0,
+  workers: process.env['CI'] ? 2 : undefined,
+  reporter: [['html', { outputFolder: './e2e/visual/playwright-report' }]],
+  use: {
+    baseURL: 'http://localhost:4200',
+    trace: 'on-first-retry'
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] }
+    }
+  ],
+  webServer: {
+    command: 'npx ng serve visual-app --port 4200 --host 0.0.0.0',
+    url: 'http://localhost:4200',
+    reuseExistingServer: !process.env['CI'],
+    timeout: 120000
+  },
+  expect: {
+    toHaveScreenshot: {
+      maxDiffPixelRatio: 0.01,
+      animations: 'disabled',
+      timeout: 15000
+    }
+  }
+});