Manual list reordering
Let users move a task, row, or other array item to a chosen position.
Conform · Module
intent.reorder
Conform's reorder intent moves an item within a field list. Generate button props with the list name and the item's current and target indexes, then attach them to a form button.
How it works
The reorder intent changes the order of items in a field list through a form control. Configure the button with the array field's name and the item's current and target indexes; Conform serializes the intent and applies it when the form submission is resolved.
Syntax
form.reorder.getButtonProps({ name, from, to })Parameters
| Name | Type | Description |
|---|---|---|
name | string | Name of the array field to reorder. |
from | number | Current index of the item. |
to | number | Target index for the item. |
Returns
Button props used to submit a reorder intent.
Key points
- Reordering is represented as a submission intent associated with a form control.
- The reorder operation is one of Conform's built-in list-manipulation intents.
- Generate the control attributes with the form's reorder helper rather than manually constructing them.
- Pass the list field's generated name so Conform knows which array to change.
Common mistakes
- Use reorder for field lists; it is not presented as a general-purpose object-update operation.
Example: Move an array item to the top
import { useForm } from '@conform-to/react';
export function TasksForm() {
const [form, fields] = useForm({
defaultValue: { tasks: ['Plan release', 'Ship update'] },
});
return (
<form {...form.props}>
<ul>
{fields.tasks.getFieldList().map((task, index, list) => (
<li key={task.key}>
<input name={task.name} defaultValue={task.value} />
<button {...form.reorder.getButtonProps({
name: fields.tasks.name,
from: index,
to: 0,
})} type="submit">
Move to top
</button>
</li>
))}
</ul>
</form>
);
}Each row gets a reorder button. Submitting that button sends the array field name plus source and destination indexes, allowing Conform to move the selected item to the requested position.
When to use it
Move to top
Provide a one-click action that places any item at the beginning of a list.
Drag-and-drop ordering
Connect a drag-and-drop result to Conform's list-ordering intent.
Interview questions
QHow do you reorder an item in a Conform field list?
Use form.reorder.getButtonProps on a button and provide name, from, and to. The name is the array field name, while from and to identify the current and destination positions.
Follow-up: How would you support drag-and-drop? Use the drag source and drop target indexes to call the same reorder helper, such as through an intent request rather than a clicked button.
QWhat does getButtonProps provide for a reorder control?
The button belongs to the relevant form and receives props generated from form.reorder.getButtonProps. A native form submission then carries the reserved reorder intent and its position data.
Follow-up: Why use the generated props instead of inventing a custom field name? The helper produces the intent encoding expected by Conform's form-intent handling.
QHow would you implement a “move to top” action?
The array field is obtained from the form metadata, and its name is passed as name. The example uses each row's index as from and zero as to, so every row can move to the beginning.
Follow-up: What must change to move an item downward? Supply the desired destination index as to, while preserving the item's current index in from.
Related
insertremovegetFieldListuseFormIntent button