Form Hooks
Form state and validation hooks
Hooks for form state management and validation.
Package
@tetherto/mdk-react-devkit
Hooks
@tetherto/mdk-react-devkit
Used by form primitives
import { useFormField } from '@tetherto/mdk-react-devkit'Related API
When to use useFormField
Use useFormField inside a custom form-field child that needs the current
field's ID, validation state or ARIA attributes. Standard pre-built fields
already consume this context internally.
useFormField workflow
FormField provides the field context, FormItem provides the generated IDs,
and custom descendants read that combined context through useFormField.
useFormField prerequisites
The hook must be rendered beneath FormField and FormItem. It is not a
standalone form-state hook and does not replace react-hook-form's useForm.
useFormField example
import {
FormControl,
FormField,
FormItem,
FormLabel,
useFormField,
} from '@tetherto/mdk-react-devkit'
function FieldStatusDot() {
const { invalid, isDirty } = useFormField()
const state = invalid ? 'error' : isDirty ? 'dirty' : 'clean'
return <span aria-label={`Field is ${state}`} data-state={state} />
}
function NamedField({ control }) {
return (
<FormField
control={control}
name="name"
render={({ field }) => (
<FormItem>
<FormLabel>Name</FormLabel>
<FormControl>
<input {...field} />
</FormControl>
<FieldStatusDot />
</FormItem>
)}
/>
)
}@tetherto/mdk-react-devkit
Reset form state
import { useFormReset } from '@tetherto/mdk-react-devkit'Related API
When to use useFormReset
Use useFormReset when resetting a react-hook-form
form also needs before/after callbacks or a reusable dirty-state guard. Call the
form object's reset method directly when no lifecycle behaviour is needed.
useFormReset workflow
Create the form with useForm, pass that instance to useFormReset, then wire
the returned resetForm handler to a reset or cancel action. The hook reports
isDirty from the same form state so the action can be disabled until values
change.
useFormReset prerequisite
The hook requires a configured react-hook-form instance. It composes with
Form and fields such as
FormInput; it does not create or
submit the form.
useFormReset example
import { useForm } from 'react-hook-form'
import { Button, Form, FormInput, useFormReset } from '@tetherto/mdk-react-devkit'
type MinerFields = { name: string; ip: string }
function MinerEditForm({ onSubmit }: { onSubmit: (values: MinerFields) => void }) {
const form = useForm<MinerFields>({ defaultValues: { name: '', ip: '' } })
const { resetForm, isDirty } = useFormReset({
form,
onAfterReset: () => console.log('Form reset'),
})
return (
<Form form={form} onSubmit={form.handleSubmit(onSubmit)}>
<FormInput control={form.control} name="name" label="Name" />
<FormInput control={form.control} name="ip" label="IP address" />
<Button type="submit">Save</Button>
<Button type="button" onClick={resetForm} disabled={!isDirty}>
Reset
</Button>
</Form>
)
}@tetherto/mdk-react-devkit
Import the public APIs on this page from @tetherto/mdk-react-devkit.
useFormField
Read-only context hook for form field children — returns the field's id, error state, and ARIA attributes.
() => UseFormFieldReturnuseFormReset
Hook to handle form reset with callbacks.
<TFieldValues extends FieldValues = FieldValues>({ form, onBeforeReset, onAfterReset, }: UseFormResetOptions<TFieldValues>) => UseFormResetReturn