---
title: Field
description: A component that provides labelling and validation for form controls.

links:
  doc: https://base-ui.com/react/components/field#api-reference
---

<ComponentPreview name="p-field-1" />

## Installation

<CodeTabs>

<TabsList>
  <TabsTab value="cli">CLI</TabsTab>
  <TabsTab value="manual">Manual</TabsTab>
</TabsList>
<TabsPanel value="cli">

```bash
npx shadcn@latest add @coss/field
```

</TabsPanel>

<TabsPanel value="manual">

<Steps>

<Step>Install the following dependencies:</Step>

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

<Step>Import the following variables into your CSS file</Step>

```css
@theme inline {
  --color-destructive-foreground: var(--destructive-foreground);
}

:root {
  --destructive-foreground: var(--color-red-700);
}

.dark {
  --destructive-foreground: var(--color-red-400);
}
```

<Step>Copy and paste the following code into your project.</Step>

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

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsPanel>

</CodeTabs>

## 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>
```

## API Reference

### Field

Root component. Styled wrapper for `Field.Root` from Base UI with flex column layout.

### FieldLabel

Label for the field. Styled wrapper for `Field.Label` from Base UI.

### FieldItem

Container for field items. Styled wrapper for `Field.Item` from Base UI.

### FieldDescription

Description text for the field. Styled wrapper for `Field.Description` from Base UI with muted foreground color.

### FieldError

Error message for the field. Styled wrapper for `Field.Error` from Base UI with destructive foreground color.

### FieldControl

Alias for `Field.Control` from Base UI. Use this to register a custom or third-party control with the field context so it participates in labelling, validation, and error state.

Note that `Textarea` does not require `FieldControl` — it wraps `Field.Control` internally and integrates with `Field` the same way `Input` and other built-in controls do.

### FieldValidity

Alias for `Field.Validity` from Base UI.

## Examples

### Required Field

<ComponentPreview name="p-field-2" />

### Disabled Field

<ComponentPreview name="p-field-3" />

### With Error

Enter an invalid email address and press enter to see the error.

<ComponentPreview name="p-field-4" />

### With Validity

<ComponentPreview name="p-field-5"
  className="[& .preview>*]:w-full [&_.preview>*]:max-w-80"
/>

### Input Group

<ComponentPreview name="p-field-6" />

### Autocomplete Field

<ComponentPreview name="p-field-7" />

### Combobox Field

<ComponentPreview name="p-field-8" />

### Combobox Multiple Field

<ComponentPreview name="p-field-9" />

### Textarea Field

<ComponentPreview name="p-field-10" />

### Select Field

<ComponentPreview name="p-field-11" />

### Checkbox Field

<ComponentPreview name="p-field-12" />

### Checkbox Group Field

<ComponentPreview name="p-field-13" />

### Radio Group Field

<ComponentPreview name="p-field-14" />

### Switch Field

<ComponentPreview name="p-field-15" />

### Slider Field

<ComponentPreview name="p-field-16" />

### Number Field

<ComponentPreview name="p-field-17" />

### Complete Form Example

<ComponentPreview name="p-field-18" />