Apply a schema-derived increment to a number input
Numeric form controls
Conform · Pipe
field.step
field.step is field metadata for an input's HTML step constraint. It can be wired directly to step or included through getInputProps.
How it works
The field metadata exposes a step constraint for numeric inputs. Pass that metadata through getInputProps, or assign field.step directly to the input's step attribute, so the browser receives the intended increment constraint.
Syntax
step={fields.task.step}Returns
A field metadata step constraint used as the HTML input step attribute.
Key points
- The metadata value is passed to the input's step attribute.
- Direct metadata wiring is supported when a helper is unnecessary.
- getInputProps is a convenience rather than a required part of field.step usage.
- The helper primarily reduces repetitive input-prop setup and can improve readability.
Common mistakes
- getInputProps is optional; field metadata can be assigned directly when you need more explicit control.
Example: Applying a numeric field step
import { getInputProps } from '@conform-to/react';
export function QuantityField({ field }: { field: { name: string; min?: number; max?: number; step?: number } }) {
return <input type="number" {...getInputProps(field, { type: 'number' })} />;
}The helper can apply field metadata, including the step constraint, to an input.
When to use it
Forward field metadata without using a helper
Custom input components
Reduce repeated input attribute wiring with getInputProps
Reusable form fields
Interview questions
QHow is field.step used in a form input?
field.step is field metadata intended for the HTML step attribute. The documentation shows it being used as step={fields.task.step}, allowing the input to reflect the schema-derived constraint.
Follow-up: How can you avoid the helper? Assign the metadata directly, for example step={fields.task.step}, while setting the other input attributes yourself.
QIs getInputProps required to use field.step?
Use getInputProps when you want Conform to reduce repeated input wiring. The helper is optional, so the same step value can be passed directly to the input element.
Follow-up: What trade-off does the direct approach make? It gives explicit control but requires manually wiring each relevant attribute.
QHow should a component render a step constraint?
For a numeric field, render an input whose type supports step values, such as number, and provide the field's step metadata to its step attribute. This lets native HTML validation enforce the increment rule.
Follow-up: What should be checked if the browser does not enforce the expected increment? Verify that the input type is appropriate and that the metadata actually contains a step value.
Related
getInputPropsuseFormfield metadatastep