# Field

Form field wrapper with label and input positioning

## Field

Form field wrapper with label and input positioning

**Source:** [`packages/appkit-ui/src/react/ui/field.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/field.tsx)

### Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `orientation` | `"horizontal" \| "vertical" \| "responsive" \| null` |  | `vertical` | - |

### Usage

```tsx
import { Field } from '@databricks/appkit-ui';

```

## FieldContent

Container for field label, description, and error messages

**Source:** [`packages/appkit-ui/src/react/ui/field.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/field.tsx)

### Props

This component extends standard HTML element attributes.

### Usage

```tsx
import { FieldContent } from '@databricks/appkit-ui';

```

## FieldDescription

Helper text providing additional context for a field

**Source:** [`packages/appkit-ui/src/react/ui/field.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/field.tsx)

### Props

This component extends standard HTML element attributes.

### Usage

```tsx
import { FieldDescription } from '@databricks/appkit-ui';

```

## FieldError

Error message display for invalid field values

**Source:** [`packages/appkit-ui/src/react/ui/field.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/field.tsx)

### Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `errors` | `({ message?: string; })[] \| undefined` |  | - | - |

### Usage

```tsx
import { FieldError } from '@databricks/appkit-ui';

```

## FieldGroup

Container for organizing multiple fields

**Source:** [`packages/appkit-ui/src/react/ui/field.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/field.tsx)

### Props

This component extends standard HTML element attributes.

### Usage

```tsx
import { FieldGroup } from '@databricks/appkit-ui';

```

## FieldLabel

Label for a form field

**Source:** [`packages/appkit-ui/src/react/ui/field.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/field.tsx)

### Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `asChild` | `boolean` |  | - | - |

### Usage

```tsx
import { FieldLabel } from '@databricks/appkit-ui';

```

## FieldLegend

Title or caption for a fieldset

**Source:** [`packages/appkit-ui/src/react/ui/field.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/field.tsx)

### Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `variant` | `enum` |  | `legend` | - |

### Usage

```tsx
import { FieldLegend } from '@databricks/appkit-ui';

```

## FieldSeparator

Visual separator between fields with optional label

**Source:** [`packages/appkit-ui/src/react/ui/field.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/field.tsx)

### Props

This component extends standard HTML element attributes.

### Usage

```tsx
import { FieldSeparator } from '@databricks/appkit-ui';

```

## FieldSet

Container for grouping related form fields

**Source:** [`packages/appkit-ui/src/react/ui/field.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/field.tsx)

### Props

This component extends standard HTML element attributes.

### Usage

```tsx
import { FieldSet } from '@databricks/appkit-ui';

```

## FieldTitle

Title text for a field

**Source:** [`packages/appkit-ui/src/react/ui/field.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/field.tsx)

### Props

This component extends standard HTML element attributes.

### Usage

```tsx
import { FieldTitle } from '@databricks/appkit-ui';

```