Targeted validation
A form needs an explicit control to validate one field before submission.
Conform · Function
getButtonProps
getButtonProps generates props for Conform intent buttons. These props let a submitted button request operations such as validating, resetting, updating, inserting, or removing form data.
How it works
getButtonProps creates the props for a Conform intent button. Called through an intent such as validate, reset, update, insert, or remove, it serializes the requested operation into the button so Conform can process it when the form is submitted.
Syntax
form.<intent>.getButtonProps(options)Parameters
| Name | Type | Description |
|---|---|---|
options | object | Options for the selected intent, such as name, index, value, or validated; the exact fields depend on the intent API. |
Returns
A props object for an intent button, including the serialized reserved name and intent value.
Key points
- The helper belongs to Conform's submission-intent system, which supports operations across form controls.
- The generated props use a reserved button name and serialize the intent in its value.
- Use the validate intent when the button should request validation.
- A validation button can target a field by passing that field's metadata name.
- Reset and update provide additional intent-button operations for changing form state.
- A reset intent can address nested and list fields when given the appropriate metadata name.
Common mistakes
- The relevant inputs must use names from field metadata; otherwise Conform cannot reliably associate the intent with the intended field.
Example: Validate one field
import { useForm } from '@conform-to/react';
export default function Example() {
const [form, fields] = useForm();
return (
<form id={form.id}>
<input name={fields.email.name} />
<button {...form.validate.getButtonProps({ name: fields.email.name })}>
Validate email
</button>
</form>
);
}This renders a button whose serialized intent targets the email field, so clicking it asks Conform to validate that field.
When to use it
Reset controls
A user should restore one field or the entire form to its initial state.
Nested and list updates
A form manages editable nested data or collections.
Collection operations
A collection editor needs declarative add or remove buttons.
Interview questions
QWhat problem does getButtonProps solve?
It returns button props that encode a Conform submission intent. The button is then interpreted when the form submits, allowing an operation such as validation or resetting to target a field.
Follow-up: How would you target a nested or list field? Pass the corresponding field metadata name, such as fields.tasks.name, to the intent's getButtonProps call.
QHow do you configure a button to validate one field?
For validation, call form.validate.getButtonProps with an object containing the field metadata name. The resulting button marks that field for validation and exposes its resulting error through the normal form state.
Follow-up: How can the same pattern reset a field? Use form.reset.getButtonProps({ name: fields.tasks.name }) rather than the validate intent.
QWhich options can intent buttons use?
The options depend on the intent. Reset can receive name, update can receive name and value, and update can also receive validated: false to clear errors globally.
Follow-up: What distinction matters when updating a field? The name identifies the target, while value supplies the replacement field data; omitting name applies the operation more broadly.
Related
useFormvalidateresetupdateinsertremove