---
title: Field
description: A component that provides labeling and validation for form controls.
links:
  doc: https://base-ui.com/react/components/field
  anatomy: https://base-ui.com/react/components/field#anatomy
  api: https://base-ui.com/react/components/field#api-reference
---

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

export function FieldDemo() {
  return (
    <Field className="max-w-xs">
      <FieldLabel>Name</FieldLabel>
      <Input placeholder="Enter your name" type="text" />
      <FieldDescription>Visible on your profile</FieldDescription>
    </Field>
  );
}
```

## Installation

<ComponentSource name="field" title="components/ui/field.tsx" />

## Usage

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

```tsx
<Field>
  <FieldLabel>Name</FieldLabel>
  <Input type="text" placeholder="Enter your name" />
  <FieldDescription>Visible on your profile</FieldDescription>
  <FieldError>Please enter a valid name</FieldError>
  <FieldValidity>
    {(validity) => (
      {validity.error && <p>{validity.error}</p>}
    )}
  </FieldValidity>
</Field>
```

## Examples

### Required field with indicator

Pass the `showRequiredIndicator` prop to the `FieldLabel` component to indicate that a field is required.

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

export function FieldDemo() {
  return (
    <Field className="max-w-xs">
      <FieldLabel showRequiredIndicator>Name</FieldLabel>
      <Input placeholder="Enter your name" type="text" required />
      <FieldError>Please fill out this field.</FieldError>
    </Field>
  );
}
```

### Optional field with indicator

Pass the `showOptionalIndicator` prop to the `FieldLabel` component to indicate that a field is optional.

```tsx
import { Field, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";

export function FieldDemo() {
  return (
    <Field className="max-w-xs">
      <FieldLabel showOptionalIndicator>Name</FieldLabel>
      <Input placeholder="Enter your name" type="text" />
    </Field>
  );
}
```

### Disabled

Pass the `disabled` prop to the `Field` component to disable the entire field.

```tsx
import { Field, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";

export function FieldDemo() {
  return (
    <Field disabled className="max-w-xs">
      <FieldLabel>Name</FieldLabel>
      <Input placeholder="Enter your name" type="text" />
    </Field>
  );
}
```

### With error message

Enter an **invalid email** and press `Enter` to see the error.

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

export function FieldDemo() {
  return (
    <Field className="max-w-xs">
      <FieldLabel>Email</FieldLabel>
      <Input placeholder="Enter your email" type="email" />
      <FieldError>Please enter a valid email address.</FieldError>
    </Field>
  );
}
```

## API Reference

### Field Props

<ApiReferenceAccordion
  type={{
    showRequiredIndicator: {
      description: "Whether to show the required indicator on the field label.",
      type: "boolean",
      default: `false`,
    },
    showOptionalIndicator: {
      description: "Whether to show the optional indicator on the field label.",
      type: "boolean",
      default: `false`,
    },
  }}
/>