# Field

Form field wrapper with label and input positioning

## Field[​](#field-1 "Direct link to 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[​](#props "Direct link to Props")

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

### Usage[​](#usage "Direct link to Usage")

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

<Field /* props */ />

```

## FieldContent[​](#fieldcontent "Direct link to 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[​](#props-1 "Direct link to Props")

This component extends standard HTML element attributes.

### Usage[​](#usage-1 "Direct link to Usage")

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

<FieldContent /* props */ />

```

## FieldDescription[​](#fielddescription "Direct link to 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[​](#props-2 "Direct link to Props")

This component extends standard HTML element attributes.

### Usage[​](#usage-2 "Direct link to Usage")

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

<FieldDescription /* props */ />

```

## FieldError[​](#fielderror "Direct link to 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[​](#props-3 "Direct link to Props")

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

### Usage[​](#usage-3 "Direct link to Usage")

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

<FieldError /* props */ />

```

## FieldGroup[​](#fieldgroup "Direct link to 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[​](#props-4 "Direct link to Props")

This component extends standard HTML element attributes.

### Usage[​](#usage-4 "Direct link to Usage")

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

<FieldGroup /* props */ />

```

## FieldLabel[​](#fieldlabel "Direct link to 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[​](#props-5 "Direct link to Props")

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

### Usage[​](#usage-5 "Direct link to Usage")

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

<FieldLabel /* props */ />

```

## FieldLegend[​](#fieldlegend "Direct link to 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[​](#props-6 "Direct link to Props")

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

### Usage[​](#usage-6 "Direct link to Usage")

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

<FieldLegend /* props */ />

```

## FieldSeparator[​](#fieldseparator "Direct link to 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[​](#props-7 "Direct link to Props")

This component extends standard HTML element attributes.

### Usage[​](#usage-7 "Direct link to Usage")

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

<FieldSeparator /* props */ />

```

## FieldSet[​](#fieldset "Direct link to 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[​](#props-8 "Direct link to Props")

This component extends standard HTML element attributes.

### Usage[​](#usage-8 "Direct link to Usage")

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

<FieldSet /* props */ />

```

## FieldTitle[​](#fieldtitle "Direct link to 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[​](#props-9 "Direct link to Props")

This component extends standard HTML element attributes.

### Usage[​](#usage-9 "Direct link to Usage")

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

<FieldTitle /* props */ />

```