Skip to main content
⚠️ AppKit is in an early development phase and is subject to change without notice. DO NOT use in production environments.

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

### Props​

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

### Usage​

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

    <Field /* props */ />

## FieldContent​

Container for field label, description, and error messages

Source: `packages/appkit-ui/src/react/ui/field.tsx`

### Props​

This component extends standard HTML element attributes.

### Usage​

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

    <FieldContent /* props */ />

## FieldDescription​

Helper text providing additional context for a field

Source: `packages/appkit-ui/src/react/ui/field.tsx`

### Props​

This component extends standard HTML element attributes.

### Usage​

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

    <FieldDescription /* props */ />

## FieldError​

Error message display for invalid field values

Source: `packages/appkit-ui/src/react/ui/field.tsx`

### Props​

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

### Usage​

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

    <FieldError /* props */ />

## FieldGroup​

Container for organizing multiple fields

Source: `packages/appkit-ui/src/react/ui/field.tsx`

### Props​

This component extends standard HTML element attributes.

### Usage​

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

    <FieldGroup /* props */ />

## FieldLabel​

Label for a form field

Source: `packages/appkit-ui/src/react/ui/field.tsx`

### Props​

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

### Usage​

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

    <FieldLabel /* props */ />

## FieldLegend​

Title or caption for a fieldset

Source: `packages/appkit-ui/src/react/ui/field.tsx`

### Props​

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

### Usage​

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

    <FieldLegend /* props */ />

## FieldSeparator​

Visual separator between fields with optional label

Source: `packages/appkit-ui/src/react/ui/field.tsx`

### Props​

This component extends standard HTML element attributes.

### Usage​

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

    <FieldSeparator /* props */ />

## FieldSet​

Container for grouping related form fields

Source: `packages/appkit-ui/src/react/ui/field.tsx`

### Props​

This component extends standard HTML element attributes.

### Usage​

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

    <FieldSet /* props */ />

## FieldTitle​

Title text for a field

Source: `packages/appkit-ui/src/react/ui/field.tsx`

### Props​

This component extends standard HTML element attributes.

### Usage​

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

    <FieldTitle /* props */ />