Selection

Checkbox

Beginner

Select all squads

IdentityWalletAdmin

Parent state: none selected

Live widget · interact freely

Manual test goal

Toggle individual and bulk checkboxes; verify indeterminate parent state when only some children are selected.

Expected result

Selecting all children flips the parent to checked; partial selection sets parent to indeterminate.

Stable selectors

Parent checkbox[data-testid="chk-all"]
Child A[data-testid="chk-a"]
Child B[data-testid="chk-b"]
Child C[data-testid="chk-c"]
State readout[data-testid="chk-state"]

Reference Playwright spec

checkbox.spec.ts

import { test, expect } from '@playwright/test';

test('parent checkbox reflects child state', async ({ page }) => {
  await page.goto('https://lab.hakdogan.com/practice/checkbox');

  await page.getByTestId('chk-a').check();
  await expect(page.getByTestId('chk-state')).toContainText('indeterminate');

  await page.getByTestId('chk-b').check();
  await page.getByTestId('chk-c').check();
  await expect(page.getByTestId('chk-all')).toBeChecked();
});

Demo Simulator

Simulated Playwright run · no real browser is launched

Idlecheckbox.spec.ts

https://lab.hakdogan.com/practice/checkbox

# console output will stream here