Form
/ Guides
Form
/ Guides

Default Field Options

In this guide, we'll learn how to initialize a field with default options.
Each field, takes a couple of options that can be used to configure the field.
They're applied by passing an options object as a second argument.

Note: Make sure to check the Fields guide to understand the different states and properties of a field.

Passing Default Options

import { z } from 'zod'
import { useForm } from '@weser/form'

const schema = z.object({
  name: z.string().min(1),
})

function Form() {
  const { useFormField } = useForm(schema)

  const name = useFormField('name', {
    value: 'Robin',
    disabled: false,
    touched: true,
  })
}

Prefilling a Form

A common use case is to prefill a form with initial data. For example, when editing a data set.
To achieve that, we can create a small wrapper function that passes the initial data as the value option for each field.

import { z } from 'zod'
import { useForm } from '@weser/form'

const Z_RegisterInput = z.object({
  firstname: z.string().min(1),
  lastname: z.string().min(1),
})

type T_RegisterInput = z.infer<typeof Z_RegisterInput>

type Props = {
  defaultData: Partial<T_RegisterInput>
  onSubmit: (data: T_RegisterInput) => void
}

function ProfileForm({ defaultData, onSubmit }: Props) {
  const { useFormField, handleSubmit } = useForm(schema)

  type UseFormFieldParams = Parameters<typeof useFormField>
  function useField(
    name: UseFormFieldParams[0],
    options: UseFormFieldParams[1]
  ) {
    return useFormField(name, {
      ...options,
      value: defaultData[name] ?? '',
    })
  }

  const firstname = useField('firstname')
  const lastname = useField('lastname')

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...firstname.inputProps} />
      <input {...lastname.inputProps} />
    </form>
  )
}
On this page