Field API

Component status:: deprecated

Import

import { Field } from "@stratakit/bricks";
// OR
import * as Field from "@stratakit/bricks/Field";

Field.Root Deprecated

Base element: <div>

A container for form controls. It manages ID associations, and provides a consistent layout and spacing.

Example:

<Field.Root>
  <Field.Label>Label</Field.Label>
  <Field.Control render={<TextBox.Input />} />
</Field.Root>

Supports a layout prop, which can be set to inline to align the label and control horizontally.

Should contain a Field.Label component paired with a form control.

Supported form controls include:

TextBox.Input
TextBox.Textarea
Checkbox
Radio
Switch

layout

Type: "inline" | undefined (optional)

Allows overriding the default block layout for text controls.

Additional props

render

Field.Label Deprecated

Base element: <label>

A label for the field’s control element. This is automatically associated with the control’s id.

Additional props

render

Field.Description Deprecated

Base element: <div>

A description for the field’s control element. This is automatically associated with the control.

Should not include content without an adequate text alternative (e.g. interactive elements).

Additional props

render

Field.Control Deprecated

Base element: <div>

The control component for the field.

Use the render prop to render the control component.

<Field.Control render={<TextBox.Input />} />

If the rendered component uses a compositional API, then use a function within render to apply the controlProps to the correct sub-component:

<Field.Control
  render={(controlProps) => (
    <TextBox.Root>
      <TextBox.Icon href={svgPlaceholder} />
      <TextBox.Input {...controlProps} />
    </TextBox.Root>
  )}
/>

If you need a custom id set for the control, set it on this component instead of the control component within render.

<Field.Control id="custom" render={<TextBox.Input />} />

render

Type: Element | ((props: Omit<HTMLAttributes<any> & { ref?: Ref<any> | undefined; }, "children">) => ReactNode) (required)

id

Type: string | undefined (optional)

The unique ID of the item. This will be used to register the item in the store and for the element’s id attribute. If not provided, a unique ID will be automatically generated.

Field.ErrorMessage Deprecated

Base element: <div>

An associated error message for a field. When used within <Field.Root>, the associated form control will be rendered with aria-invalid="true".

Example:

<Field.Root>
  <Field.Label>Label</Field.Label>
  <Field.Control render={<TextBox.Input />} />
  <Field.ErrorMessage>Something is wrong!</Field.ErrorMessage>
</Field.Root>

Additional props

render