MotionForm

Usage

All fifteen effects

The demo renders every original form variant, with a filter for focused exploration. All values are editable, file selection uses files from your device, and validation uses the entered value. The submit example calculates a real local SHA-256 digest through Web Crypto: it neither uploads nor claims a server submission.

Best Practices

• Keep values, validation messages and business status in the caller. validate and submit request work; the component never creates a successful result or clears an error after a delay.
• For another rejection with the same error and status, change validationKey to replay the shake without remounting the input or losing its focus.
• Supply options for radio, dropdown and chips. Chips are a selected list plus the existing keyboard-operated single Select for adding a choice; already selected options cannot be added twice.
• Treat filesSelected as a selection event, not an upload-complete event. Each item retains its real File; upload it through your own application service and drive status from that result.
• Pass a meaningful label and localized labels. The label slot customizes the visible label and remains connected through aria-labelledby; OTP inputs additionally use the label prop in their individual digit names.
• readonly applies to textual fields and OTP. Use disabled for selection, files, range, actions, or a wholly blocked form.
• The default action uses nativeType="button" and emits submit. Choose nativeType="submit" only when the containing native form owns submission; do not perform the same operation from both the click request and the form's submit event.

API Reference

Props

Model and variants

import type { FileUploaderFile } from '@talex-touch/tuffex/file-uploader'
import type { MotionFormProps, MotionFormVariant } from '@talex-touch/tuffex/motion-form'

type MotionFormValue = string | number | boolean | (string | number)[] | FileUploaderFile[]
// FileUploaderFile: { id, name, size, type, file: File }
// MOTION_FORM_VARIANTS exports the full readonly variant tuple.

The module exports MotionFormProps, MotionFormEmits, MotionFormSlots, MotionFormLabels, MotionFormStatus, MotionFormVariant, MotionFormOption, MotionFormValue and TxMotionFormInstance. Slot scopes are declared through Vue defineSlots as well as documented below.

An OTP string contains at most four digits. Empty middle boxes can remain while editing locally; a genuinely external string replaces all four boxes. OTP accepts paste/autofill, Left/Right, Home/End, Backspace and Delete. otpComplete fires only when all four boxes contain digits, and may fire again for an edited complete code.

Labels

All defaults are exported as MOTION_FORM_DEFAULT_LABELS. labels accepts partial overrides.

Events

Slots

Exposed

CSS variables

Theme color comes from existing --tx-color-*, --tx-text-color-*, --tx-bg-color and --tx-border-color-* tokens. Motion duration/easing variables are generated internally by the shared spring resolver, not a second public animation API.

Overview

• Existing Input, Select, Checkbox, Radio/RadioGroup, Textarea, FileUploader and Slider own their original editing, option, drag/drop and keyboard semantics. This component adds the effect choreography and typed controlled events rather than introducing another control stack.
• Labels are adjacent to controls, never wrapping Select. Stable Vue useId values connect labels, helpers and OTP boxes. The password button is a named, pressed-state native button; chip/file removal is keyboard-operable.
• Status/error content remains in a role="status" aria-live="polite" region. Error state is not a timed flash and focus is not reset to replay motion.
• The shared useMotionActivity separates present (mounted, intersecting and document-visible) from motion active. Motion additionally respects the motion switch and reduced-motion preference. Slider receives active=present to suspend its observers, global listeners and ongoing motion when absent/KeepAlive-deactivated without disabling the control or changing its value; its decorative motion remains gated by the shared motion active. Reduced motion therefore does not shut down the native control's layout measurements or input handling. Text uses TxTextMorph, curves come from the existing liquid spring resolver, and textarea WAAPI is cancelled at suspension/unmount. No business timers are used.

Technologies

Source mapping

Fixed upstream: Amicro commit 43c29ce9cdd16459e3eab4992381b8d35b38776a, MIT, Copyright (c) 2026 SYED SUBHAN UDDIN. The Vue port changes framework/runtime, composes real existing controls, adds controlled outcomes, localized labels and lifecycle/accessibility handling.

src/App.tsx was inspected in the fixed snapshot: it has no form branch or form import. Forms behavior comes from the implementation above, not a guessed inline App variant. Upstream's timed error clearing and fake submit success (31-46) are deliberately replaced by caller-owned error and status; the visual dropzone is connected to real FileUploader selection.

Local source: packages/tuffex/packages/components/src/motion-form/src/TxMotionForm.vue and src/types.ts; demo: apps/nexus/app/components/content/demos/MotionFormDemo.vue. Build/typecheck, real-browser traversal and lifecycle acceptance are run by the integration owner; this page does not claim unexecuted verification.