SKILL.md
$27
2. Wire inputs with getInputProps
<TextInput {...form.getInputProps('email')} label="Email" />
<NumberInput {...form.getInputProps('age')} label="Age" />For checkboxes pass { type: 'checkbox' }:
<Checkbox {...form.getInputProps('agreed', { type: 'checkbox' })} label="I agree" />3. Handle submission
<form onSubmit={form.onSubmit((values) => console.log(values))}>
...
<Button type="submit">Submit</Button>
</form>onSubmit only calls the handler when validation passes. To handle failures:
form.onSubmit(
(values) => save(values),
(errors) => console.log('Validation failed', errors)
)Validation
Rules object (most common)
validate: {
name: isNotEmpty('Required'),
email: isEmail('Invalid email'),
password: hasLength({ min: 8 }, 'Min 8 chars'),
confirmPassword: matchesField('password', 'Passwords do not match'),
}Function (for cross-field logic)
validate: (values) => ({
endDate: values.endDate < values.startDate ? 'End must be after start' : null,
})When to validate
validateInputOnChange: true, // validate all fields on every change
validateInputOnChange: ['email'], // validate specific fields only
validateInputOnBlur: true, // validate on blur insteadModes
Mode
State storage
Re-renders
Input props
'controlled' (default)
React state
On every change
value + onChange
'uncontrolled'
Refs
None
defaultValue + onChange
In uncontrolled mode, use form.key('fieldPath') as the React key prop when you need to force a re-render of an input.
References
- references/api.md — Full API:
useFormoptions, complete return value,useField,createFormContext,createFormActions, all built-in validators, key types
- references/patterns.md — Code examples: nested objects, array fields, async validation, form context across components,
transformValues,useFieldstandalone