useField

Creates a reactive field store of a specific field within a form store.

const field = useField<TSchema, TFieldPath>(form, config);

Generics

• TSchema extends FormSchema
• TFieldPath extends RequiredPath

Parameters

• form FormStore<TSchema>
• config UseFieldConfig<TSchema, TFieldPath>

Explanation

With useField you create a reactive field store for a specific field path within your form. The field store provides reactive access to the field's input value, validation errors, touched state, and more. It also includes a props object that you can spread onto React Native's TextInput component to automatically handle user interactions like focus, blur, and text change events.

The props object contains exactly a ref callback and onFocus, onBlur and onChangeText handlers. The ref callback registers the underlying native component instance, which enables methods like focus to control it. Since props does not set the input value, text inputs are controlled and you always pass value={field.input}. For non-text components such as Switch, set the value with the field store's onChange method instead.

Returns

• field FieldStore<TSchema, TFieldPath>
  • props FieldElementProps

Examples

The following examples show how useField can be used.

Text field

import { useField, useForm } from '@formisch/react-native';
import { Text, TextInput, View } from 'react-native';
import * as v from 'valibot';

const LoginSchema = v.object({
  email: v.pipe(v.string(), v.email()),
});

export default function LoginScreen() {
  const loginForm = useForm({ schema: LoginSchema });
  const field = useField(loginForm, { path: ['email'] });

  return (
    <View>
      <TextInput {...field.props} value={field.input} />
      {field.errors && <Text>{field.errors[0]}</Text>}
    </View>
  );
}

Non-text components

import { useField, useForm } from '@formisch/react-native';
import { Switch } from 'react-native';
import * as v from 'valibot';

const SettingsSchema = v.object({
  notifications: v.optional(v.boolean(), false),
});

export default function SettingsScreen() {
  const settingsForm = useForm({ schema: SettingsSchema });
  const field = useField(settingsForm, { path: ['notifications'] });

  return <Switch value={field.input} onValueChange={field.onChange} />;
}

Related

The following APIs can be combined with useField.

Hooks

• useForm,
• useFieldArray

Components

• Field,
• FieldArray

Methods

• focus,
• getErrors,
• getInput,
• setErrors,
• setInput,
• validate