Skip to content
Pinky UI

forms

Validation Field

A field communicates idle, correcting, valid, warning and invalid states as readable feedback.

  • forms
  • validation
  • feedback

Live preview

Not checked

Quick usage

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

<ValidationField label="Email" value={email} onValueChange={setEmail} validate={validateEmail} />

Presets

Default

Restrained production behaviour.

Default behaviour

Quiet

Reduced intensity for dense product screens.

disabled={true}

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

Props

PropTypeDefaultDescription
validate(value: string) => ValidationResult—Returns a semantic status and message for the current value.
classNamestring—Styles the outer interaction surface.

Accessibility

  • Invalid state uses aria-invalid and an adjacent status message; color is not the only signal.
  • The field remains editable while correcting and status changes are announced politely.

Performance

  • Validation is synchronous and host-owned; the component adds no debounce or network assumption.

Reduced motion

Motion resolves immediately while semantics, focus and state remain unchanged.

When to use

  • Local validation where the next action depends on a field being legible and complete

When not to use

  • Remote validation that needs an async request state without a host adapter

Skill

Purpose

A field communicates idle, correcting, valid, warning and invalid states as readable feedback, so the field itself carries the state instead of a separate banner.

Good for

  • Local validation where the next action depends on a field being legible and complete

Avoid for

  • Remote validation that needs an async request state without a host adapter

Usage

tsx
<ValidationField label="Email" value={email} onValueChange={setEmail} validate={validateEmail} />

Accessibility

  • Invalid state uses aria-invalid and an adjacent status message; colour is not the only signal.
  • The field remains editable while correcting and status changes are announced politely.

Performance

  • Validation is synchronous and host-owned; the component adds no debounce or network assumption.

Related: inline-edit-field, morph-select.

Open this skill on its own page