Skip to content
Pinky UI

mobile

Focus Lift Field

A focused field lifts its local surface and reveals helper context without letting the mobile keyboard erase the field relationship.

  • mobile
  • forms
  • focus
  • field
Related pattern

Focus changes local geometry and supporting copy, not just a border colour.

Live preview

Quick usage

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

<FocusLiftField label="Workspace name" description="Shown to collaborators." />

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

Focus Lift Field gives an active mobile input a little more room and reveals its helper context. The field's relationship stays stable when the keyboard changes the visual viewport.

Use when

  • A field needs a short instruction only while it is being edited.
  • Focus should create a local hierarchy change without opening a new screen.

Interaction

Focus the field to lift its surface and reveal helper copy. Blur returns the compact state while retaining the value.

Accessibility

Use a real label, preserve the helper text in the accessible description and keep the input focusable at every state.

Reduced motion

Apply the focused padding and helper copy immediately without lift travel.

Tune

  • Keep helper copy to one or two short lines.
  • Pair it with a visual-viewport-aware composer when the form is long.
Open this skill on its own page