---
title: "FieldGroup"
description: "Group related fields together for comprehensive API documentation."
canonical_url: "https://ui.nuxt.com/docs/typography/field-group"
last_updated: "2026-05-07"
---
# FieldGroup

> Group related fields together for comprehensive API documentation.

## Usage

Group fields together in a list.

```vue
<template>
  <__flatten>
  <p>
  <strong>
  analytics</strong>
   (
  <code>
  boolean</code>
  )
  : Default to false - Enables analytics for your project (coming soon).</p>
  <p>
  <strong>
  blob</strong>
   (
  <code>
  boolean</code>
  )
  : Default to false - Enables blob storage to store static assets, such as images, videos and more.</p>
  <p>
  <strong>
  cache</strong>
   (
  <code>
  boolean</code>
  )
  : Default to false - Enables cache storage to cache your server route responses or functions using Nitro's cachedEventHandler and cachedFunction</p>
  <p>
  <strong>
  database</strong>
   (
  <code>
  boolean</code>
  )
  : Default to false - Enables SQL database to store your application's data.</p></__flatten>
  <template v-slot:code=>
  <pre className=language-mdc shiki shiki-themes material-theme-lighter material-theme material-theme-palenight code=::field-group
  ::field{name="analytics" type="boolean"}
    Default to `false` - Enables analytics for your project (coming soon).
  ::
  
  ::field{name="blob" type="boolean"}
    Default to `false` - Enables blob storage to store static assets, such as images, videos and more.
  ::
  
  ::field{name="cache" type="boolean"}
    Default to `false` - Enables cache storage to cache your server route responses or functions using Nitro's `cachedEventHandler` and `cachedFunction`
  ::
  
  ::field{name="database" type="boolean"}
    Default to `false` - Enables SQL database to store your application's data.
  ::
  ::
   language=mdc meta= style=>
  <code __ignoreMap=>
  <span class=line>
  <span class=sMK4o>
  ::</span>
  <span class=swJcz>
  field-group
  </span></span>
  <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>
  analytics</span>
  <span class=sMK4o>
  "</span>
  <span class=spNyl>
   type</span>
  <span class=sMK4o>
  =</span>
  <span class=sMK4o>
  "</span>
  <span class=sfazB>
  boolean</span>
  <span class=sMK4o>
  "</span>
  <span class=sMK4o>
  }
  </span></span>
  <span class=line>
  <span class=sTEyZ>
    Default to </span>
  <span class=sMK4o>
  `</span>
  <span class=sfazB>
  false</span>
  <span class=sMK4o>
  `</span>
  <span class=sTEyZ>
   - Enables analytics for your project (coming soon).
  </span></span>
  <span class=line>
  <span class=sMK4o>
  ::
  </span></span>
  <span class=line>
  <span /></span>
  <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>
  blob</span>
  <span class=sMK4o>
  "</span>
  <span class=spNyl>
   type</span>
  <span class=sMK4o>
  =</span>
  <span class=sMK4o>
  "</span>
  <span class=sfazB>
  boolean</span>
  <span class=sMK4o>
  "</span>
  <span class=sMK4o>
  }
  </span></span>
  <span class=line>
  <span class=sTEyZ>
    Default to </span>
  <span class=sMK4o>
  `</span>
  <span class=sfazB>
  false</span>
  <span class=sMK4o>
  `</span>
  <span class=sTEyZ>
   - Enables blob storage to store static assets, such as images, videos and more.
  </span></span>
  <span class=line>
  <span class=sMK4o>
  ::
  </span></span>
  <span class=line>
  <span /></span>
  <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>
  cache</span>
  <span class=sMK4o>
  "</span>
  <span class=spNyl>
   type</span>
  <span class=sMK4o>
  =</span>
  <span class=sMK4o>
  "</span>
  <span class=sfazB>
  boolean</span>
  <span class=sMK4o>
  "</span>
  <span class=sMK4o>
  }
  </span></span>
  <span class=line>
  <span class=sTEyZ>
    Default to </span>
  <span class=sMK4o>
  `</span>
  <span class=sfazB>
  false</span>
  <span class=sMK4o>
  `</span>
  <span class=sTEyZ>
   - Enables cache storage to cache your server route responses or functions using Nitro's </span>
  <span class=sMK4o>
  `</span>
  <span class=sfazB>
  cachedEventHandler</span>
  <span class=sMK4o>
  `</span>
  <span class=sTEyZ>
   and </span>
  <span class=sMK4o>
  `</span>
  <span class=sfazB>
  cachedFunction</span>
  <span class=sMK4o>
  `
  </span></span>
  <span class=line>
  <span class=sMK4o>
  ::
  </span></span>
  <span class=line>
  <span /></span>
  <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>
  database</span>
  <span class=sMK4o>
  "</span>
  <span class=spNyl>
   type</span>
  <span class=sMK4o>
  =</span>
  <span class=sMK4o>
  "</span>
  <span class=sfazB>
  boolean</span>
  <span class=sMK4o>
  "</span>
  <span class=sMK4o>
  }
  </span></span>
  <span class=line>
  <span class=sTEyZ>
    Default to </span>
  <span class=sMK4o>
  `</span>
  <span class=sfazB>
  false</span>
  <span class=sMK4o>
  `</span>
  <span class=sTEyZ>
   - Enables SQL database to store your application's data.
  </span></span>
  <span class=line>
  <span class=sMK4o>
  ::
  </span></span>
  <span class=line>
  <span class=sMK4o>
  ::
  </span></span></code></pre></template>
</template>
```

## API

### Props

```ts
/**
 * Props for the ProseFieldGroup component
 */
interface ProseFieldGroupProps {
  /**
   * The element or component this component should render as.
   */
  as?: any;
  size?: "md" | "xs" | "sm" | "lg" | "xl" | undefined;
  /**
   * The orientation the buttons are laid out.
   * @default "\"horizontal\""
   */
  orientation?: "horizontal" | "vertical" | undefined;
  ui?: { base?: any; } | undefined;
}
```

### Slots

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

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  ui: {
    prose: {
      fieldGroup: {
        base: 'my-5 divide-y divide-default *:not-last:pb-5'
      }
    }
  }
})
```

## Changelog

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


## Sitemap

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