Mobile Forms
Purpose
Plan forms: manage form state with React Hook Form (or equivalent), handle inputs, submission, and error display — with validation delegated to mobile-validation.
When to Use
- When a screen collects user input of any complexity.
- Not for a single trivial input needing only local state.
Inputs
- The form's fields, submission target, and UX requirements.
- Validation rules (
mobile-validation).
Discovery Questions
- How many fields, and what interaction complexity?
- What is the submission target and its error shape?
- What are the accessibility and keyboard behaviors?
Responsibilities
For login/signup/reset forms, take the credential rules from ../../auth-form-validation rather than defining them here.
Manage form state with a form library (React Hook Form or equivalent), not global state.
Wire controlled/uncontrolled inputs, focus, and keyboard handling.
Handle submission, loading, and error display.
Delegate validation to mobile-validation (e.g. Zod resolver).
Coordinate accessibility (mobile-accessibility).
Document the unit as it is built — the screen file under docs/mobile/screens/ (../../application-documentation).
Required Workflow
- Define fields + submission target.
- Set up the form library + inputs.
- Attach validation (delegate to
mobile-validation).
- Handle submit/loading/error UX.
- Record the form plan.
Decision Rules
- Form state stays in the form library, not Redux/Zustand.
- Validate via a schema resolver (
mobile-validation), not scattered ad-hoc checks.
- Surface field- and form-level errors clearly and accessibly.
Rules
- Keep form state local to the form.
- Delegate validation to
mobile-validation.
- Handle keyboard/focus and accessibility.
Anti-Patterns
- Form state in a global store.
- Ad-hoc validation scattered in handlers.
- No submission/loading/error handling.
- Ignoring keyboard/focus/accessibility.
Validation Checklist
Definition of Done
A recorded form plan: library-managed form state, wired inputs and submission with error UX, schema validation via mobile-validation, and accessible keyboard/focus handling — no form state in global stores.
Related Skills
mobile-validation, mobile-state-management, mobile-accessibility, mobile-api-integration, mobile-server-state, ../../application-documentation.
Related Knowledge
../../../knowledge/ (input requirements).
Related References
../../../references/mobile/forms/ when populated.
Context Loading Guidance
- Requires: the form's fields, submission target, UX + validation rules.
- Does not require: unrelated screens, the full mobile skill set, unrelated references.
- May load:
mobile-validation, mobile-api-integration.
- Stop when: the form plan is recorded.
Token Efficiency Guidance
Plan from the field list; delegate validation and transport to their skills.
1---2name: mobile-forms3description: Use to plan form state and UX — React Hook Form (or equivalent) for form state, controlled inputs, submission, and error display — keeping form state out of global stores. Pairs with mobile-validation.4---56# Mobile Forms78## Purpose910Plan forms: manage form state with React Hook Form (or equivalent), handle inputs, submission, and error display — with validation delegated to `mobile-validation`.1112## When to Use1314- When a screen collects user input of any complexity.15- Not for a single trivial input needing only local state.1617## Inputs1819- The form's fields, submission target, and UX requirements.20- Validation rules (`mobile-validation`).2122## Discovery Questions2324- How many fields, and what interaction complexity?25- What is the submission target and its error shape?26- What are the accessibility and keyboard behaviors?2728## Responsibilities2930- For login/signup/reset forms, take the credential rules from `../../auth-form-validation` rather than defining them here.3132- Manage **form state** with a form library (React Hook Form or equivalent), not global state.33- Wire **controlled/uncontrolled inputs**, focus, and keyboard handling.34- Handle **submission**, loading, and **error display**.35- Delegate **validation** to `mobile-validation` (e.g. Zod resolver).36- Coordinate accessibility (`mobile-accessibility`).37- Document the unit as it is built — the screen file under `docs/mobile/screens/` (`../../application-documentation`).3839## Required Workflow40411. Define fields + submission target.422. Set up the form library + inputs.433. Attach validation (delegate to `mobile-validation`).444. Handle submit/loading/error UX.455. Record the form plan.4647## Decision Rules4849- Form state stays in the form library, not Redux/Zustand.50- Validate via a schema resolver (`mobile-validation`), not scattered ad-hoc checks.51- Surface field- and form-level errors clearly and accessibly.5253## Rules5455- Keep form state local to the form.56- Delegate validation to `mobile-validation`.57- Handle keyboard/focus and accessibility.5859## Anti-Patterns6061- Form state in a global store.62- Ad-hoc validation scattered in handlers.63- No submission/loading/error handling.64- Ignoring keyboard/focus/accessibility.6566## Validation Checklist6768- [ ] Form library set up; fields defined.69- [ ] Validation delegated to `mobile-validation`.70- [ ] Submit/loading/error UX handled.71- [ ] Keyboard/focus + accessibility handled.72- [ ] Form state kept out of global stores.7374## Definition of Done7576A recorded form plan: library-managed form state, wired inputs and submission with error UX, schema validation via `mobile-validation`, and accessible keyboard/focus handling — no form state in global stores.7778## Related Skills7980`mobile-validation`, `mobile-state-management`, `mobile-accessibility`, `mobile-api-integration`, `mobile-server-state`, `../../application-documentation`.8182## Related Knowledge8384`../../../knowledge/` (input requirements).8586## Related References8788`../../../references/mobile/forms/` when populated.8990## Context Loading Guidance9192- **Requires:** the form's fields, submission target, UX + validation rules.93- **Does not require:** unrelated screens, the full mobile skill set, unrelated references.94- **May load:** `mobile-validation`, `mobile-api-integration`.95- **Stop when:** the form plan is recorded.9697## Token Efficiency Guidance9899Plan from the field list; delegate validation and transport to their skills.
ahtishamshahzad