---
title: "Field"
description: "Expose a field instance to a renderless slot to bind its model and events to any control."
canonical_url: "https://notformdocs.vercel.app/docs/components/field"
---

> Index of every page on this site: [llms.txt](https://notformdocs.vercel.app/llms.txt)

`Field` renders no element. It passes a field instance to its default slot so you can connect the value and validation events to native inputs or custom components.

## Usage

```vue
<template>
  <Field
    v-slot="{ field }"
    :field="form.field('profile.email')"
  >
    <label :for="field.path">Email</label>

    <input
      :id="field.path"
      v-model="field.model"
      v-bind="field.events"
      autocomplete="email"
      type="email"
    >

    <FieldError :errors="field" />
  </Field>
</template>
```

`form.field(path)` returns the **same cached field** for the same path. Its `model` reads and writes `form.values`. Its `events` mark interaction and trigger validation according to the field's configuration.

## Props

<field-group>
<field :required="true" name="field" type="FieldInstance<TValue>">

The field created by `form.field(path)`, or an item from `arrayField.items`.

</field>
</field-group>

## Slot props

The default slot receives `field`.

<table>
<thead>
  <tr>
    <th>
      Member
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        model
      </code>
    </td>
    
    <td>
      <code>
        TValue
      </code>
    </td>
    
    <td>
      Two-way value. Assigning writes into <code>
        form.values
      </code>
      
      . Does not validate.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        events
      </code>
    </td>
    
    <td>
      <code>
        { onBlur, onChange, onInput }
      </code>
    </td>
    
    <td>
      Handlers that mark interaction and trigger validation. Spread with <code>
        v-bind
      </code>
      
      .
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        path
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      Current dot-notation path. Follows an array item when its position changes. Use it for <code>
        id
      </code>
      
       and <code>
        for
      </code>
      
      .
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        id
      </code>
    </td>
    
    <td>
      <code>
        symbol
      </code>
    </td>
    
    <td>
      Stable identity. Safe as a Vue key. Not valid as an HTML <code>
        id
      </code>
      
      .
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        errors
      </code>
    </td>
    
    <td>
      <code>
        ValidationIssue[]
      </code>
    </td>
    
    <td>
      Issues reported at exactly this path.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        isDirty
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      The value differs from the baseline value at this path.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        isTouched
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      The field blurred, or a submit was attempted.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        isValid
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        errors
      </code>
      
       is empty.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        isValidating
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      The whole form, this field, or a field nested inside it is being validated.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        validate()
      </code>
    </td>
    
    <td>
      <code>
        () => Promise<ValidationResult<TValue>>
      </code>
    </td>
    
    <td>
      Validate this field now, skipping any pending debounce. Resolves with <code>
        { value }
      </code>
      
       or <code>
        { issues }
      </code>
      
      .
    </td>
  </tr>
</tbody>
</table>

Extra attributes passed to `Field` arrive as additional slot props. Because `Field` renders no element, attach HTML attributes to the control inside the slot.

## Configure validation

Pass options as the second argument to `form.field(path, config)`. They are read when the field is first created. See [Validation](https://notformdocs.vercel.app/docs/guides/validation#configure-a-field).

```ts
const username = form.field('username', { debounce: 300, validateOn: { input: true } })
```

## Using a field without Field

The component is a convenience. A field instance works directly:

```vue
<script setup lang="ts">
const email = form.field('email')
</script>

<template>
  <div>
    <label :for="email.path">Email</label>

    <input
      :id="email.path"
      v-model="email.model"
      v-bind="email.events"
      autocomplete="email"
      type="email"
    >

    <FieldError :errors="email" />
  </div>
</template>
```

## Related

- [Binding inputs](https://notformdocs.vercel.app/docs/guides/binding-inputs)
- [Custom components](https://notformdocs.vercel.app/docs/integrations/custom-components)
- [Form state](https://notformdocs.vercel.app/docs/guides/form-state#field-state)

## Sitemap

See the full [sitemap](https://notformdocs.vercel.app/sitemap.md) for all pages.