Single field

<sea-field> displays one value with a label, source citation and correction control.

At a glance
Type	Building block
Element	sea-field
React	SeaField from @sea-dev/widget-lit/react/field
Without React	@sea-dev/widget-lit/field
Connection	An ancestor Context provider
Configure	Attributes and properties

Usage

React

import * as React from "react";
import { SeaContextProvider } from "@sea-dev/widget-lit/react/context";
import { SeaField } from "@sea-dev/widget-lit/react/field";

export function TotalAssets(p: {
  bearerToken: string;
  submissionId: string;
  itemId: string;
}) {
  return (
    <SeaContextProvider
      bearerToken={p.bearerToken}
      submissionId={p.submissionId}
    >
      <SeaField binding={{ itemId: p.itemId }} label="Total assets" />
    </SeaContextProvider>
  );
}

Web components

import { SeaContext } from "@sea-dev/widget-lit/context";
import { SeaField } from "@sea-dev/widget-lit/field";

export function displayChoice(
  container: HTMLElement,
  connection: { bearerToken: string; submissionId: string },
  itemId: string,
) {
  const context = new SeaContext();
  Object.assign(context, connection);
  const field = new SeaField();
  field.binding = { itemId };
  field.label = "Auditor opinion";
  context.append(field);
  container.append(context);
}

Attributes and properties

Property	Attribute	Type	Default	Description
binding	—	SubmissionFieldBinding	—	Binds the field to a submission item by item ID or form-field ID and optional group ID.
label	label	string or undefined	—	Sets the visible field label.
density	density	FieldDensity	"detailed"	Sets a detailed layout or a minimal single-line layout.
stepLabel	step-label	string or undefined	—	Selects one step by its unique pipeline label within the enclosing process.
stepRole	step-role	PipelineStepRoleWire or undefined	—	Constrains the selected step to this execution role.
stepId	step-id	string or undefined	—	Selects a pipeline step definition within the enclosing process.
runStepId	run-step-id	string or undefined	—	Selects one executable step instance within the enclosing process.
outputFormId	output-form-id	string or undefined	—	Narrows the selected step's outputs to this form.
outputSubmissionId	output-submission-id	string or undefined	—	Selects an exact output submission from the enclosing process.

Events

Event	Type	Description
binding-error	CustomEvent	{ code, submissionId? } when binding cannot identify a field in the selected submission.
citation-selected	CustomEvent	{ citationId, documentExtractionId?, annotationKey? } when the source is selected.
correction-submitted	CustomEvent	{ submissionId, itemId, correction, cleared? } after a correction has been saved.

Binding

Inside a process, a step binding selects the output submission before binding selects its field. For example, step-label="data" and { formFieldId: "…" } address the same field definition across that step's outputs.

binding is required. { itemId } selects a loaded submission item. { formFieldId, submissionGroupId? } selects a field definition and optional repeated entry. Use one addressing scheme.

The field reads its value, declared type, choices and citation from the selected Sea submission. label changes its displayed label. density changes the layout. Configure the connection and language on the provider.

A plain element uses the same binding.

Fields and submission values explains the backend types and choices. Money without currency metadata is displayed as a numeric amount.

Editing

Choose the pencil to edit inline. Save or Enter commits a single-line value. Enter adds a line in multiline fields. Escape or Cancel discards the draft. Moving focus does not save. A correction reason is optional.

Call openCorrection() on the element or a React ref to open the inline editor. Saved corrections invalidate the shared provider and emit correction-submitted. The notification reports a completed API save.

Styling parts

Part	Description
root	The field container.
content	The field row or inline editor.
value	The displayed value or value control.
actions	The correction and source controls.
status	Binding and field status messages.

What it needs from the API

The field requires its ancestor context's loaded submission. Corrections use that context's client and call POST /v2/submissions/{id}/items/{itemId}/corrections. The existing API checks access and converts the value to the field's stored type.

Common problems

Symptom	Action
Binding fails	Read binding-error.detail.code; check item, form-field and group IDs
No field data	Select a submission on the provider and wait for it to load
Correction control hidden	Check the provider, selected review scope and backend enum choices