Skip to content
Pinky UI

mobile

Mobile Validation Morph

Inline validation changes the field surface, status marker and message together while keeping correction in place.

  • mobile
  • forms
  • validation
  • status
Related pattern

The status is readable through icon, message and surface structure; colour is never the only signal.

Live preview

Use an address we can reach.

Quick usage

usage
import { MobileValidationMorph } from "@pinky-ui/systems";

<MobileValidationMorph label="Email" defaultValue="" />

Install

Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/systems

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Accessibility

  • Every gesture has a labelled button or keyboard path, and primary controls meet a 44px touch target.
  • State remains readable without relying on colour or motion.

Performance

  • Interaction state is local and bounded; gesture updates do not require a page-wide render loop.
  • Timers and listeners are cleaned up on unmount.

Reduced motion

The same state change resolves immediately; travel, scale and spring motion are removed without removing the interaction.

When to use

  • Touch-first product surfaces where the next action should stay close to the hand.

When not to use

  • Desktop-only workflows or interactions whose gesture would hide the only available action.

Skill

Purpose

Mobile Validation Morph changes the field surface, status marker and message as a value becomes valid or invalid. Correction stays in the same place and the state is readable without relying on a red or green border.

Use when

  • Local validation can be computed from the current field value.
  • The next action depends on the user understanding what to correct.

Interaction

Type a value and watch the field move from idle to invalid or ready. The input remains editable in every state.

Accessibility

Use aria-invalid, aria-describedby and a polite status region. Pair symbols and copy with any surface colour change.

Reduced motion

Switch the status geometry immediately while keeping the same message and input focus.

Tune

  • Validate at a calm point in the editing cycle, not on every remote request.
  • Keep error copy actionable and short.
Open this skill on its own page