# useField

> This document is the Markdown version of [formisch.dev/react-native/api/useField/](https://formisch.dev/react-native/api/useField/). For the complete documentation index, see [llms.txt](https://formisch.dev/llms.txt).

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

```ts
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`](/methods/api/focus.md) 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

```tsx
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

```tsx
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`](/react-native/api/useForm.md), [`useFieldArray`](/react-native/api/useFieldArray.md)

### Components

[`Field`](/react-native/api/Field.md), [`FieldArray`](/react-native/api/FieldArray.md)

### Methods

[`focus`](/methods/api/focus.md), [`getErrors`](/methods/api/getErrors.md), [`getInput`](/methods/api/getInput.md), [`setErrors`](/methods/api/setErrors.md), [`setInput`](/methods/api/setInput.md), [`validate`](/methods/api/validate.md)