Field API

Import

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

Field.Root

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.Control

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.Label

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

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.ErrorMessage

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