Native-first form submission
A form must remain submittable while JavaScript is unavailable or still loading.
Conform · Const
progressive enhancement
Conform's progressive enhancement keeps HTML forms functional without depending on JavaScript, then layers on client-side behavior when available. It can preserve submission state and validation feedback across server responses and reloads.
How it works
Conform treats progressive enhancement as a native-form-first approach: the browser can submit the HTML form before JavaScript is available, while Conform progressively adds client behavior. The server's last submission can initialize the form again, and FormStateInput preserves additional state across reloads.
Key points
- Progressive enhancement can improve accessibility by keeping forms useful during temporary network problems.
- Conform can preserve form data and state while dynamically changing a field list.
- Form values come from the browser DOM through the standard FormData API.
- Conform synchronizes form state with event delegation rather than requiring custom markup.
Example: Persist form state for progressive enhancement
import { FormStateInput } from '@conform-to/react';
export function ContactForm({ form, fields }) {
return (
<form id={form.id} method="post">
<FormStateInput formId={form.id} />
<label htmlFor={fields.email.id}>Email</label>
<input {...fields.email} type="email" />
<button type="submit">Send</button>
</form>
);
}Render the hidden state input alongside the form so Conform can restore validation state after a document reload.
When to use it
Preserve list-editing state
A dynamic field list changes through a server round trip.
Resilient accessible forms
Users may encounter temporary network failures or need robust keyboard and assistive-technology support.
Interview questions
QWhat does progressive enhancement mean in Conform?
Progressive enhancement means the form remains usable through native HTML submission, while Conform adds validation and state synchronization when JavaScript runs. The hook can use the server's last submission as the initial form state.
Follow-up: How would you preserve state across a reload caused by a non-submit intent? Render FormStateInput so Conform can restore the form state and errors.
QHow do you build a progressively enhanced Conform form?
Use useForm to create form and field metadata, then apply that metadata to a normal HTML form and its controls. The browser still owns the fundamental submission path, and Conform enhances it with client behavior.
Follow-up: How can validation begin without client-side validation? Use native constraint attributes and server validation; Conform also supports live validation without client validation.
QWhen should FormStateInput be used?
FormStateInput renders a hidden input containing form state needed to reconstruct the form after a document reload. This is useful when an action such as adding a list item causes navigation or reload and otherwise loses errors from other fields.
Follow-up: What state source initializes a form after the server responds? Pass the server's last submission through useForm's lastResult option.
Related
useFormFormStateInputlastResultdefaultNoValidateFormData Web API