Symptom

The FTUE PIN entry field rendered as a large blank outlined rectangle with no indication that 4 digits are expected. Users had no visual cue distinguishing the field from a free-text input, and incorrect PIN submissions showed no border feedback.

Root cause

PinEntryBubbleContent used a plain OutlinedTextField for input capture without any visual affordance for the expected 4-digit constraint. The isError parameter was never wired, so on wrong-PIN callbacks the border remained neutral while only the text below turned red — visually disconnected.

Fix

Wrapped the OutlinedTextField in a Box with contentAlignment = Alignment.Center. Inside the same Box, overlaid a Row of 4 CircleShape dots: colorScheme.outlineVariant when unfilled, colorScheme.primary when filled based on pin.length. The text and cursor colors are set to Color.Transparent so raw digits don’t bleed through the circles. Added isError = showError != null to the OutlinedTextField so the border automatically adopts colorScheme.error on failed PIN attempts.

Prevention

• PIN/OTP fields that accept a fixed-length input should always overlay a digit-count indicator rather than relying on a plain OutlinedTextField. The blank field is the standard Material3 anti-pattern for short, counted inputs.
• Add a Roborazzi scenario for each PIN state (empty, partial, full, error) so visual regressions surface in CI without a manual QA pass.
• isError wiring should be a checklist item any time an OutlinedTextField is paired with an external error message string.