Field

Headless form field that provides reactive properties and state.

<Field
  of={…}
  name={…}
  type={…}
  validate={…}
  validateOn={…}
  revalidateOn={…}
  transform={…}
  keepActive={…}
  keepState={…}
>
  children
</Field>

Properties

• of FormStore
• name string
• type Maybe<'string' | 'string[]' | 'number' | 'boolean' | 'submit' | 'File' | 'File[]' | 'Date'>
• validate Maybe<MaybeArray<ValidateField>>
• validateOn 'touched' | 'input' | 'change' | 'blur' | 'submit' = 'submit'
• revalidateOn 'touched' | 'input' | 'change' | 'blur' | 'submit' = 'input'
• transform Maybe<MaybeArray<TransformField>>
• keepActive boolean = false
• keepState boolean = true
• children (field: FieldStore, props: FieldElementProps) => JSX.Element

Explanation

The value of the type property must match the data type of the field. Depending on this specification, the value of a native HTML form field is captured differently, making your fields fully type-safe.

For validate and transform, we recommend using the validation and transformation functions that we provide, as they make the code more readable. If necessary, you can also write your own validation and transformation functions.

Fields automatically detect if they are still in use and update their status accordingly. If you don't want a field to become inactive when it is no longer in use, you can set keepActive to true.

By default, the state of an inactive field is maintained. If you want a field to be reset when it becomes inactive, you can set keepState to false.