Interaction-aware controls
Disable or enable UI based on whether the user has interacted with a relevant field.
Conform · Pipe
form.dirty
form.dirty is a boolean returned by useForm that indicates whether any considered form field has been focused at least once. Configure shouldDirtyConsider to exclude fields such as CSRF tokens.
How it works
The returned form metadata includes a boolean dirty value. It becomes true after any considered field has received focus at least once; use shouldDirtyConsider to exclude fields that should not affect this state.
Syntax
const [form] = useForm(options); form.dirtyParameters
| Name | Type | Description |
|---|---|---|
shouldDirtyConsider | (name: string) => boolean | Predicate used to determine whether Conform should consider a field for dirty-state tracking. |
Returns
form.dirty: boolean indicating whether any considered field has been focused at least once.
Key points
form.dirtyis a boolean that reflects whether at least one field in the form has received focus.shouldDirtyConsidercontrols whether an individual field is included in dirty-state tracking.- Use the option to omit fields outside Conform's management, including CSRF tokens.
Common mistakes
- Only fields included by
shouldDirtyConsidercontribute to dirty-state tracking; exclude fields that Conform does not manage, such as CSRF tokens.
Example: Exclude a non-managed field from dirty tracking
const [form] = useForm({
shouldDirtyConsider: (name) => name !== 'csrfToken',
});
return <form {...form.props}>{/* fields */}</form>;Configure which fields contribute to the form's dirty state, such as excluding a CSRF token.
When to use it
Exclude infrastructure fields
Prevent non-managed values such as CSRF tokens from influencing the interaction state.
Interview questions
QWhat does form.dirty represent?
form.dirty is a boolean in the object returned by useForm. It indicates whether any considered field in the form has been focused at least once.
Follow-up: How would you keep a CSRF token from affecting this state? Configure shouldDirtyConsider so that it returns false for the token field.
QHow can you control which fields affect dirty state?
Use the shouldDirtyConsider option to decide whether a field participates in dirty-state tracking. This is useful for excluding fields that are not managed by Conform.
Follow-up: Why might excluding such a field matter? A non-managed value could otherwise make the form appear dirty even though the user has not interacted with relevant form fields.
QIs form.dirty a comparison of current and initial values?
The state is interaction-based: it reports whether a considered field has been focused at least once. It is not documented here as a comparison between current values and initial values.
Follow-up: What API should be investigated for value-based change detection? The separate isDirty utility checks whether current form data differs from default values.
Related
useFormshouldDirtyConsiderisDirtyuseFormData