Forms
56 bites tagged Forms — interview questions with model answers, and 60-second explainers.
Designing and documenting focus order in Figma
Focus order is the sequence keyboard and screen-reader users traverse interactive elements; it should follow meaning and reading order, documented in Figma via layer order, numbered annotations… Accessibility of keyboard navigation.
keyboardShouldPersistTaps in ScrollView
KeyboardShouldPersistTaps controls whether taps dismiss the keyboard or reach children; values never, always, and handled. keyboard and tap handling in scroll views.
Single useState object for multi-input forms
Hold all fields in one state object, use a generic handler keyed by field name, and update immutably by spreading previous state. scalable form state and immutable updates.
Controlled TextInput with value and onChangeText
Store input text in state, bind value to that state, and update state in onChangeText so React is the single source of truth. controlled component pattern.
Decoupling Form state from its Field components
Form holds values, errors, and status in context, Fields self-register and read/write via a hook, validation composes per field. shared form state without coupling. the Form enumerating every specific field it contains.
Composing Input and Button into a SearchForm
Wrap Input and Button in a form, expose value/placeholder props, emit onSearch on submit, keep it controlled. basic composition and component API design. duplicating Input and Button logic instead of reusing them.
Associating a label with a form input
Explicit association via for and id, implicit by wrapping the input, and why this gives screen readers an accessible name and larger click target. Foundational accessibility for forms. using a placeholder as the label.
Accessible composite TextField component
Associate label and input via matching for and id, generate a unique id, spread remaining props onto the native input. accessible composition and prop forwarding. a label not tied to the input, or swallowing native props.
Angular v22 stabilizes Signal Forms, Aria, Asynchronous Reactivity APIs
Angular v22 promotes Signal Forms, Angular Aria, and Asynchronous Reactivity APIs from developer preview to production-ready status, giving teams stable primitives for reactive forms, accessibility, and async signals without experimental guardrails.
How would you architect a multi-step Svelte wizard with Stores?
Tests state isolation and validation orchestration across wizard steps. A solid answer uses a centralized store with step slices, derived validity stores, and pre-navigation guards. Red flag: unrelated per-step stores or validation only on final submit.
Validate matching Vue passwords: computed property or watcher?
Use a computed boolean for caching and dependency tracking; reserve watchers for side effects only. Whether you derive state or watch imperatively. Using a watcher to sync a match flag, wasting cycles and causing bugs.
Key differences between Template-Driven and Reactive Forms in Angular
This tests Angular form architecture tradeoffs. Contrast explicit synchronous reactive models with implicit asynchronous template-driven ones; assign reactive to scalable dynamic forms and template-driven to simple inputs.
How do you ensure a complex form is fully accessible?
Pair labels to inputs, move focus to first error on submit, and link aria-invalid to aria-describedby. Mastery of semantic HTML, focus control, and ARIA for validation.
Design a multi-step wizard form pattern in React
Shared state, step validation, and resilient navigation. A great answer uses one form instance with per-step Zod schemas, a context stepper, and localStorage persistence. Red flag: isolated forms per step that lose data on navigation.
Optimize a large form with frequent state updates
Tests render propagation and memoization discipline. Strong answers note parent updates re-render children, extract inputs to localize state, useMemo for derived values, and stable callbacks. Red flag: useMemo everywhere without component boundaries.
How do you use a Server Action for form submission and useFormState?
Tests server-client form state orchestration. Outline: write a Server Action that validates and returns errors; pass it to useFormState for state; wire to form action and use useFormStatus for pending UI.
Advantages of dedicated React form libraries over manual state
Your grasp of the hidden costs of fully controlled form state in React. Mention re-render reduction via refs, declarative validation, less boilerplate, and custom input support.
How would you implement real-time client-side validation in React?
Tests state-driven UI thinking over imperative DOM updates. A strong answer uses a status enum like typing or error, derives validation from state instead of redundant booleans, and conditionally renders feedback.
Prefer multiple useState or useReducer for multi-field forms?
Separate useState for simple fields; one object for coupled validation or batch resets; useReducer for complex logic. Matching state structure to complexity. Picking one pattern for all forms without discussing coupling.
How do you handle a basic form submission in React?
Tests declarative form handling via controlled state. Nail it with onSubmit on the form, preventDefault to stop native reload, and state as the single source of truth. Red flag: reading values through refs or querySelector.
Explain controlled vs uncontrolled React form inputs and trade-offs
Tests state versus DOM ownership. Controlled inputs bind to React state via onChange; uncontrolled inputs read from DOM via refs. Trade-offs: reactivity, validation, complexity. Red flag: saying uncontrolled is easier while ignoring lost live validation.
How do you use useState to track user input?
Initialize with useState at top level, bind input value to state, and update via onChange using setter. Whether you know useState basics for controlled inputs. Calling useState conditionally or mutating state directly.
Accessible React Forms: Labels, Focus, and Errors
Accessible React forms need real labels, keyboard focus, and error announcements, not just ARIA. Screen reader users must perceive inputs and validation without visual cues. The common footgun is placeholder text or divs instead of label elements with htmlFor.
What is a FocusNode and why is it useful in forms?
This tests your understanding of Flutter's imperative focus tree. A strong answer defines FocusNode as a persistent focus target, explains programmatic form navigation, and stresses initState creation and dispose.
Get Forms bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.