---
title: "Field"
description: "Document API parameters, props, and configuration options clearly."
canonical_url: "https://ui.nuxt.com/docs/typography/field"
last_updated: "2026-05-07"
---
# Field

> Document API parameters, props, and configuration options clearly.

## Usage

A field, prop or parameter to display in your content.

```vue
<template>
  <p>
  <strong>
  name</strong>
   (
  <code>
  string</code>
  )
   
  <em>
  required</em>
  : The description can be set as prop or in the default slot with full markdown support.</p>
  <template v-slot:code=>
  <pre className=language-mdc shiki shiki-themes material-theme-lighter material-theme material-theme-palenight code=::field{name="name" type="string" required}
  The `description` can be set as prop or in the default slot with full **markdown** support.
  ::
   language=mdc meta= style=>
  <code __ignoreMap=>
  <span class=line>
  <span class=sMK4o>
  ::</span>
  <span class=swJcz>
  field</span>
  <span class=sMK4o>
  {</span>
  <span class=spNyl>
  name</span>
  <span class=sMK4o>
  =</span>
  <span class=sMK4o>
  "</span>
  <span class=sfazB>
  name</span>
  <span class=sMK4o>
  "</span>
  <span class=spNyl>
   type</span>
  <span class=sMK4o>
  =</span>
  <span class=sMK4o>
  "</span>
  <span class=sfazB>
  string</span>
  <span class=sMK4o>
  "</span>
  <span class=spNyl>
   required</span>
  <span class=sMK4o>
  }
  </span></span>
  <span class=line>
  <span class=sTEyZ>
  The </span>
  <span class=sMK4o>
  `</span>
  <span class=sfazB>
  description</span>
  <span class=sMK4o>
  `</span>
  <span class=sTEyZ>
   can be set as prop or in the default slot with full </span>
  <span class=sHepR>
  **</span>
  <span class=so75L>
  markdown</span>
  <span class=sHepR>
  **</span>
  <span class=sTEyZ>
   support.
  </span></span>
  <span class=line>
  <span class=sMK4o>
  ::
  </span></span></code></pre></template>
</template>
```

## API

### Props

```ts
/**
 * Props for the ProseField component
 */
interface ProseFieldProps {
  /**
   * The element or component this component should render as.
   */
  as?: any;
  /**
   * The name of the field.
   */
  name?: string | undefined;
  /**
   * Expected type of the field's value
   */
  type?: string | undefined;
  /**
   * Description of the field
   */
  description?: string | undefined;
  /**
   * Indicate whether the field is required
   */
  required?: boolean | undefined;
  ui?: { root?: ClassNameValue; container?: ClassNameValue; name?: ClassNameValue; wrapper?: ClassNameValue; required?: ClassNameValue; type?: ClassNameValue; description?: ClassNameValue; } | undefined;
}
```

### Slots

```ts
/**
 * Slots for the Field component
 */
interface FieldSlots {
  default(): any;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  ui: {
    prose: {
      field: {
        slots: {
          root: 'my-5',
          container: 'flex items-center gap-3 font-mono text-sm',
          name: 'font-semibold text-primary',
          wrapper: 'flex-1 flex items-center gap-1.5 text-xs',
          required: 'rounded-sm bg-error/10 text-error px-1.5 py-0.5',
          type: 'rounded-sm bg-elevated text-toned px-1.5 py-0.5',
          description: 'mt-3 text-muted text-sm [&_code]:text-xs/4'
        }
      }
    }
  }
})
```

## Changelog

See commit history for [component](https://github.com/nuxt/ui/commits/v4/src/runtime/components/prose/Field.vue) and [theme](https://github.com/nuxt/ui/commits/v4/src/theme/prose/field.ts).


## Sitemap

See the full [sitemap](/sitemap.md) for all pages.