Skip to main content

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

PropTypeRequiredDefaultDescription
orientation"horizontal" | "vertical" | "responsive" | nullvertical-

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

PropTypeRequiredDefaultDescription
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

PropTypeRequiredDefaultDescription
asChildboolean--

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

PropTypeRequiredDefaultDescription
variantenumlegend-

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 */ />