---
title: Field
description: A form field wrapper that associates a label, description, and error message with an input.
links:
  doc: https://base-ui.com/react/components/field
  api: https://base-ui.com/react/components/field#api-reference
---

```tsx
'use client';

import { Field, FieldLabel } from '@/components/ui/field';
import { Input } from '@/components/ui/input';

export function FieldDefault() {
  return (
    <div>
      <Field>
        <FieldLabel>Email</FieldLabel>
        <Input type='email' placeholder='Enter your email' />
      </Field>
    </div>
  );
}
```

## Installation

```bash
npx shadcn@latest add @fab-ui/field
```

**Install the following dependencies:**

```bash
npm install @base-ui/react
```

**Copy and paste the following code into your project.**

```tsx
'use client';

import { Field as FieldPrimitive } from '@base-ui/react/field';

import { cn } from '@/lib/utils';

function Field({ className, ...props }: FieldPrimitive.Root.Props) {
  return (
    <FieldPrimitive.Root
      data-slot='field'
      className={cn('flex w-full flex-col items-start gap-1', className)}
      {...props}
    />
  );
}

function FieldLabel({ className, ...props }: FieldPrimitive.Label.Props) {
  return (
    <FieldPrimitive.Label
      data-slot='field-label'
      className={cn('text-sm font-medium', className)}
      {...props}
    />
  );
}

function FieldDescription({
  className,
  ...props
}: FieldPrimitive.Description.Props) {
  return (
    <FieldPrimitive.Description
      data-slot='field-description'
      className={cn('text-sm text-muted-foreground', className)}
      {...props}
    />
  );
}

function FieldError({ className, ...props }: FieldPrimitive.Error.Props) {
  return (
    <FieldPrimitive.Error
      data-slot='field-error'
      className={cn('text-destructive-foreground text-sm', className)}
      {...props}
    />
  );
}

const FieldControl = FieldPrimitive.Control;
const FieldValidity = FieldPrimitive.Validity;

export {
  Field,
  FieldLabel,
  FieldDescription,
  FieldError,
  FieldControl,
  FieldValidity,
};
```

**Update the import paths to match your project setup.**

## Usage

```tsx
import {
  Field,
  FieldDescription,
  FieldError,
  FieldLabel,
} from "@/components/ui/field"
```

```tsx
<Field>
  <FieldLabel>Email</FieldLabel>
  <Input type='email' placeholder='Enter your email' />
  <FieldDescription>We'll never share your email.</FieldDescription>
  <FieldError>Please enter a valid email address.</FieldError>
</Field>
```

## Examples

### With Description

```tsx
'use client';

import {
  Field,
  FieldDescription,
  FieldLabel,
} from '@/components/ui/field';
import { Input } from '@/components/ui/input';

export function FieldWithDescription() {
  return (
    <div>
      <Field>
        <FieldLabel>Username</FieldLabel>
        <Input placeholder='Enter your username' />
        <FieldDescription className='my-0!'>
          This will be your public display name.
        </FieldDescription>
      </Field>
    </div>
  );
}
```