@tai42/studio-sdk 21.0.0 → 22.0.1

package/src/components/chip-group.tsx

@@ -0,0 +1,157 @@
+/**
+ * `ChipGroup` — a tap-to-select grid of pill chips (`.tai-chip`), in two modes.
+ *
+ * `single` is a `role="radiogroup"` of `role="radio"` chips carrying `aria-checked`:
+ * exactly one value is selected, the arrow keys move the selection, and only the
+ * selected chip (or the first, when none is) sits in the tab order. `multi` is a
+ * group of toggle buttons carrying `aria-pressed`: any number are selected, the
+ * arrow keys move focus, and Space/Enter (the native button activation) toggles the
+ * focused chip.
+ *
+ * Roving tabindex and arrow-key movement are owned here — there is no multi-select
+ * primitive to borrow — so both modes share one keyboard model: ←/↑ to the previous
+ * chip, →/↓ to the next (wrapping), Home/End to the ends, skipping disabled chips.
+ * The handler rides each chip (a button, an interactive element) rather than the
+ * container, so no static element carries an interaction. Like `RadioGroup`, the
+ * group takes its accessible name from an enclosing group `Field`, not a label of
+ * its own.
+ */
+import type { KeyboardEvent, ReactNode } from 'react';
+import { useRef, useState } from 'react';
+
+import { useFieldControl } from './field';
+
+/** One selectable chip: its answer `value` and the visible `label`. */
+export interface ChipOption {
+  readonly value: string;
+  readonly label: string;
+  readonly disabled?: boolean;
+}
+
+export type ChipGroupProps =
+  | {
+      /** Exactly one value selected — a `radiogroup` of radios. */
+      readonly mode: 'single';
+      readonly options: readonly ChipOption[];
+      readonly value: string;
+      readonly onValueChange: (value: string) => void;
+      readonly disabled?: boolean;
+    }
+  | {
+      /** Any number selected — a group of `aria-pressed` toggle buttons. */
+      readonly mode: 'multi';
+      readonly options: readonly ChipOption[];
+      readonly value: readonly string[];
+      readonly onValueChange: (value: readonly string[]) => void;
+      readonly disabled?: boolean;
+    };
+
+export function ChipGroup(props: ChipGroupProps): ReactNode {
+  const { options, disabled = false } = props;
+  const field = useFieldControl();
+  const chipRefs = useRef<(HTMLButtonElement | null)[]>([]);
+
+  const isSelected = (option: ChipOption): boolean =>
+    props.mode === 'single' ? props.value === option.value : props.value.includes(option.value);
+
+  // The chip in the tab order: the (first) selected one, else the first enabled
+  // one — so Tab lands on the active choice and the arrows rove from there.
+  const [rovingIndex, setRovingIndex] = useState<number>(() => {
+    const selected = options.findIndex(isSelected);
+    if (selected >= 0) return selected;
+    const firstEnabled = options.findIndex((option) => option.disabled !== true);
+    return firstEnabled >= 0 ? firstEnabled : 0;
+  });
+
+  const enabledIndices = options
+    .map((option, index) => (option.disabled === true ? -1 : index))
+    .filter((index) => index >= 0);
+
+  const focusChip = (index: number): void => {
+    setRovingIndex(index);
+    chipRefs.current[index]?.focus();
+  };
+
+  const select = (option: ChipOption): void => {
+    if (props.mode === 'single') {
+      props.onValueChange(option.value);
+      return;
+    }
+    const chosen = new Set(props.value);
+    if (chosen.has(option.value)) chosen.delete(option.value);
+    else chosen.add(option.value);
+    // Keep the OPTIONS' declared order, so the emitted array reads the way the form
+    // lists the choices rather than the order the chips were pressed.
+    props.onValueChange(options.map((candidate) => candidate.value).filter((v) => chosen.has(v)));
+  };
+
+  const onChipKeyDown = (event: KeyboardEvent<HTMLButtonElement>): void => {
+    if (disabled || enabledIndices.length === 0) return;
+    const position = enabledIndices.indexOf(rovingIndex);
+    let nextPosition: number;
+    switch (event.key) {
+      case 'ArrowRight':
+      case 'ArrowDown':
+        nextPosition = (position + 1) % enabledIndices.length;
+        break;
+      case 'ArrowLeft':
+      case 'ArrowUp':
+        nextPosition = (position - 1 + enabledIndices.length) % enabledIndices.length;
+        break;
+      case 'Home':
+        nextPosition = 0;
+        break;
+      case 'End':
+        nextPosition = enabledIndices.length - 1;
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+    const nextIndex = enabledIndices[nextPosition];
+    if (nextIndex === undefined) return;
+    const nextOption = options[nextIndex];
+    if (nextOption === undefined) return;
+    focusChip(nextIndex);
+    // A radiogroup selects as it moves; a multi-select group only moves focus and
+    // leaves Space/Enter to toggle.
+    if (props.mode === 'single') props.onValueChange(nextOption.value);
+  };
+
+  return (
+    <div
+      role={props.mode === 'single' ? 'radiogroup' : 'group'}
+      className="tai-row"
+      aria-describedby={field['aria-describedby']}
+    >
+      {options.map((option, index) => {
+        const selected = isSelected(option);
+        return (
+          <button
+            key={option.value}
+            ref={(element) => {
+              chipRefs.current[index] = element;
+            }}
+            type="button"
+            className="tai-chip"
+            role={props.mode === 'single' ? 'radio' : undefined}
+            aria-checked={props.mode === 'single' ? selected : undefined}
+            aria-pressed={props.mode === 'multi' ? selected : undefined}
+            // `role="group"` does not support `aria-invalid` (ARIA 1.2), so the
+            // chips carry the enclosing errored Field's invalid state.
+            aria-invalid={field['aria-invalid']}
+            tabIndex={index === rovingIndex ? 0 : -1}
+            disabled={disabled || option.disabled === true}
+            onClick={() => {
+              focusChip(index);
+              select(option);
+            }}
+            onKeyDown={onChipKeyDown}
+          >
+            {option.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/components.css

@@ -1061,11 +1061,16 @@
       color var(--tai-motion-fast) ease;
   }
 
-  .tai-chip:not(.tai-chip-static):not([aria-pressed='true']):hover:not(:disabled) {
+  .tai-chip:not(.tai-chip-static):not([aria-pressed='true']):not([aria-checked='true']):hover:not(
+      :disabled
+    ) {
     background: var(--tai-color-surface);
   }
 
-  .tai-chip[aria-pressed='true'] {
+  /* A selected chip, pressed (a multi-select toggle) OR checked (a single-select
+     radio chip): both wear the accent tint. */
+  .tai-chip[aria-pressed='true'],
+  .tai-chip[aria-checked='true'] {
     background: var(--tai-color-accent-tint);
     border-color: var(--tai-color-accent);
     color: var(--tai-color-accent-on-tint);
@@ -1073,7 +1078,8 @@
 
   /* A selected chip KEEPS its tint on hover and strengthens its border instead —
      the one part that moves in both themes (see the segment rule above). */
-  .tai-chip[aria-pressed='true']:hover:not(:disabled) {
+  .tai-chip[aria-pressed='true']:hover:not(:disabled),
+  .tai-chip[aria-checked='true']:hover:not(:disabled) {
     border-color: var(--tai-color-accent-hover);
   }
 

package/src/index.ts

@@ -171,6 +171,8 @@ export type { BadgeProps } from './components/badge';
 export { Badge } from './components/badge';
 export type { CheckboxProps } from './components/checkbox';
 export { Checkbox } from './components/checkbox';
+export type { ChipGroupProps, ChipOption } from './components/chip-group';
+export { ChipGroup } from './components/chip-group';
 export type { ConfirmDialogProps } from './components/confirm-dialog';
 export { ConfirmDialog } from './components/confirm-dialog';
 export type { DialogProps } from './components/dialog';
@@ -413,11 +415,14 @@ export {
 // -- Schema-driven forms -----------------------------------------------------
 export type {
   CompletionProvider,
+  DateRangePair,
   Discriminator,
   ExpressionFieldComponent,
   ExpressionFieldProps,
   ExpressionInputKey,
   ExpressionInputShape,
+  FormControl,
+  FormInputMode,
   JsonSchema,
   JsonSchemaType,
   RecordEntryContext,
@@ -428,6 +433,7 @@ export type {
   SecretRefFieldProps,
 } from './schema-form';
 export {
+  dateRangePairs,
   defaultValueForSchema,
   // The expression-door injection point: a host that wants `x-tai42-expression`
   // fields to author through the visual editor imports `JqField` from

package/src/schema-form/SchemaForm.tsx

@@ -95,6 +95,14 @@ export interface SchemaFormProps {
    * renders the plain string input.
    */
   readonly expressionField?: ExpressionFieldComponent;
+  /**
+   * Optional. Per-field picker placeholders, keyed by the root object's property
+   * name. A top-level `enum` field that draws as a select shows its entry's
+   * `choiceLabel` as the select placeholder (in place of the default `Select…`);
+   * other controls and nested fields are unaffected. A field with no entry draws
+   * its own default.
+   */
+  readonly fieldWording?: Readonly<Record<string, { choiceLabel?: string }>>;
 }
 
 /**
@@ -110,6 +118,7 @@ export function SchemaForm({
   completionProvider,
   maxUploadBytes = DEFAULT_MAX_UPLOAD_BYTES,
   expressionField,
+  fieldWording,
 }: SchemaFormProps): ReactNode {
   // The prop overrides the ambient door for this form only; omitted, the
   // enclosing one flows through unchanged (providing `undefined` would BLIND the
@@ -130,6 +139,7 @@ export function SchemaForm({
               required
               errors={errors}
               idPrefix={idPrefix}
+              fieldWording={fieldWording}
             />
           </div>
         </ExpressionFieldContext.Provider>

package/src/schema-form/classify.ts

@@ -19,7 +19,7 @@ import {
   variantTag,
 } from './resolve';
 import { expressionAnnotation, mediaUpload } from './string-annotations';
-import type { JsonSchema } from './types';
+import type { FormControl, FormInputMode, JsonSchema } from './types';
 
 function firstString(...values: readonly unknown[]): string | undefined {
   for (const value of values) {
@@ -64,6 +64,27 @@ function classifyConst(
   };
 }
 
+// The supported `control` values, as a record so the type and the runtime set
+// stay coupled: a value added to FormControl is a compile error here until it is
+// listed.
+const FORM_CONTROLS: Record<FormControl, true> = {
+  chips: true,
+  textarea: true,
+};
+
+/**
+ * The `control` keyword off a property, narrowed to a supported value, or
+ * `undefined` for an absent or unrecognized one. Read defensively (the schema is
+ * permissive): a value outside the set reads as absent, so the field renders its
+ * default control — the server ask door is the authority that refuses it.
+ */
+function controlOf(resolved: JsonSchema): FormControl | undefined {
+  const raw: unknown = resolved.control;
+  return typeof raw === 'string' && Object.hasOwn(FORM_CONTROLS, raw)
+    ? (raw as FormControl)
+    : undefined;
+}
+
 // enum → a fixed choice list.
 function classifyEnum(
   resolved: JsonSchema,
@@ -73,7 +94,13 @@ function classifyEnum(
   const enumValues = resolved.enum ?? [];
   const options: EnumOption[] = enumValues.map((value) => ({ value, label: scalarLabel(value) }));
   const nullable = enumValues.some((value) => value === null);
-  return { model: { kind: 'enum', options }, nullable, schema: resolved, title, description };
+  return {
+    model: { kind: 'enum', options, control: controlOf(resolved) },
+    nullable,
+    schema: resolved,
+    title,
+    description,
+  };
 }
 
 // anyOf/oneOf union normalization.
@@ -214,6 +241,31 @@ function dateConstraints(resolved: JsonSchema): DateConstraints | undefined {
   return { min, max, unavailable, rangeStart, minDays, maxDays };
 }
 
+// The supported `inputMode` values, as a record so the type and the runtime set
+// stay coupled: a value added to FormInputMode is a compile error here until it
+// is listed.
+const INPUT_MODES: Record<FormInputMode, true> = {
+  text: true,
+  numeric: true,
+  decimal: true,
+  tel: true,
+  email: true,
+  url: true,
+};
+
+/**
+ * The `inputMode` keyword off a string property, narrowed to a supported value, or
+ * `undefined` for an absent or unrecognized one. Read defensively (the schema is
+ * permissive): a value outside the set reads as absent, so the field renders as a
+ * plain text box — the server ask door is the authority that refuses it.
+ */
+function inputModeOf(resolved: JsonSchema): FormInputMode | undefined {
+  const raw: unknown = resolved.inputMode;
+  return typeof raw === 'string' && Object.hasOwn(INPUT_MODES, raw)
+    ? (raw as FormInputMode)
+    : undefined;
+}
+
 function classifyString(
   resolved: JsonSchema,
   title: string | undefined,
@@ -224,6 +276,10 @@ function classifyString(
     model: {
       kind: 'string',
       format: resolved.format,
+      inputMode: inputModeOf(resolved),
+      multiline: controlOf(resolved) === 'textarea',
+      maxLength: typeof resolved.maxLength === 'number' ? resolved.maxLength : undefined,
+      minLength: typeof resolved.minLength === 'number' ? resolved.minLength : undefined,
       media: mediaUpload(resolved),
       expression: expressionAnnotation(resolved),
       date: dateConstraints(resolved),
@@ -264,7 +320,7 @@ function classifyArray(
   if (isStringItems && enumValues !== undefined && enumValues.length > 0) {
     const options = enumValues.map((value) => ({ value, label: scalarLabel(value) }));
     return {
-      model: { kind: 'multiselect', options },
+      model: { kind: 'multiselect', options, control: controlOf(resolved) },
       nullable,
       schema: resolved,
       title,

package/src/schema-form/date-range-field.tsx

@@ -0,0 +1,167 @@
+/**
+ * A date RANGE drawn as ONE control. The platform declares a range as two
+ * `string`/`format: date` properties where the END names its START in `rangeStart`;
+ * the answer stays the two date strings, nothing is recombined. Where a pair is
+ * drawable as one control (below), `ObjectFields` renders this {@link DateRangeField}
+ * — a group with the two ends' labels over two native date inputs — at the START's
+ * slot and skips the END; otherwise the two properties draw as two ordinary date
+ * fields (a documented, valid layout).
+ *
+ * {@link dateRangePairs} is the ONE definition of "drawable as one control", reused
+ * by every surface so each surface's merge decision agrees.
+ */
+import type { ReactNode } from 'react';
+
+import { Field } from '../components/field';
+import { TextInput } from '../components/inputs';
+import type { JsonSchema } from './types';
+
+/** A START/END pair drawable as one range control, resolved off a page's properties. */
+export interface DateRangePair {
+  readonly startName: string;
+  readonly startSchema: JsonSchema;
+  readonly endName: string;
+  readonly endSchema: JsonSchema;
+}
+
+/** A property's `visibleWhen` as a stable key for deep-equality (absent ⇒ `''`). */
+function visibilityKey(schema: JsonSchema): string {
+  return schema.visibleWhen === undefined ? '' : JSON.stringify(schema.visibleWhen);
+}
+
+function isDateString(schema: JsonSchema): boolean {
+  return schema.format === 'date';
+}
+
+/**
+ * The date-range pairs among `properties` that are drawable as ONE control. A pair
+ * qualifies when: the END names an existing sibling START in `rangeStart`; BOTH are
+ * `format: date`; both carry the SAME `visibleWhen` (deep-equal, or both absent); AND
+ * no OTHER field's `visibleWhen` names either end — otherwise merging the pair would
+ * leave that field's predicate pointing at a control that no longer draws on its own,
+ * so the pair stays two date fields (the documented degrade). `properties` is ONE
+ * page's ordered list; a field is used in at most one pair.
+ */
+export function dateRangePairs(
+  properties: readonly (readonly [string, JsonSchema])[],
+): readonly DateRangePair[] {
+  const byName = new Map<string, JsonSchema>(properties.map(([name, schema]) => [name, schema]));
+  const pairs: DateRangePair[] = [];
+  const paired = new Set<string>();
+
+  for (const [endName, endSchema] of properties) {
+    if (paired.has(endName)) continue;
+    const startName = endSchema.rangeStart;
+    if (typeof startName !== 'string' || startName === endName || paired.has(startName)) continue;
+    const startSchema = byName.get(startName);
+    if (startSchema === undefined) continue;
+    if (!isDateString(startSchema) || !isDateString(endSchema)) continue;
+    if (visibilityKey(startSchema) !== visibilityKey(endSchema)) continue;
+    const dependedOn = properties.some(
+      ([name, schema]) =>
+        name !== startName &&
+        name !== endName &&
+        typeof schema.visibleWhen?.field === 'string' &&
+        (schema.visibleWhen.field === startName || schema.visibleWhen.field === endName),
+    );
+    if (dependedOn) continue;
+    pairs.push({ startName, startSchema, endName, endSchema });
+    paired.add(startName);
+    paired.add(endName);
+  }
+  return pairs;
+}
+
+/** The field's own `title`, else its property name. */
+function titleOf(schema: JsonSchema, name: string): string {
+  return typeof schema.title === 'string' && schema.title.length > 0 ? schema.title : name;
+}
+
+/** One end of the range: a labelled native date input emitting the date string. */
+function RangeEnd({
+  heading,
+  schema,
+  value,
+  required,
+  error,
+  onChange,
+}: {
+  heading: string;
+  schema: JsonSchema;
+  value: unknown;
+  required: boolean;
+  error: string | undefined;
+  onChange: (value: unknown) => void;
+}): ReactNode {
+  const current = typeof value === 'string' ? value : '';
+  return (
+    <Field label={heading} error={error}>
+      <TextInput
+        type="date"
+        // The native control enforces its inclusive bounds; the validator enforces
+        // the rest (unavailable days, the range span) that the control cannot draw.
+        min={typeof schema.minDate === 'string' ? schema.minDate : undefined}
+        max={typeof schema.maxDate === 'string' ? schema.maxDate : undefined}
+        required={required}
+        value={current}
+        onChange={(event) => {
+          const next = event.target.value;
+          // An empty optional end drops its key; a required one keeps the empty
+          // string so the validator can flag it.
+          onChange(next === '' && !required ? undefined : next);
+        }}
+      />
+    </Field>
+  );
+}
+
+export function DateRangeField({
+  pair,
+  startValue,
+  endValue,
+  startRequired,
+  endRequired,
+  markRequired,
+  startError,
+  endError,
+  onChangeStart,
+  onChangeEnd,
+}: {
+  readonly pair: DateRangePair;
+  readonly startValue: unknown;
+  readonly endValue: unknown;
+  readonly startRequired: boolean;
+  readonly endRequired: boolean;
+  readonly markRequired: boolean;
+  readonly startError: string | undefined;
+  readonly endError: string | undefined;
+  readonly onChangeStart: (value: unknown) => void;
+  readonly onChangeEnd: (value: unknown) => void;
+}): ReactNode {
+  const startTitle = titleOf(pair.startSchema, pair.startName);
+  const endTitle = titleOf(pair.endSchema, pair.endName);
+  const mark = (title: string, required: boolean): string =>
+    markRequired && required ? `${title} *` : title;
+  return (
+    <Field label={`${startTitle} – ${endTitle}`} group>
+      <div className="tai-row">
+        <RangeEnd
+          heading={mark(startTitle, startRequired)}
+          schema={pair.startSchema}
+          value={startValue}
+          required={startRequired}
+          error={startError}
+          onChange={onChangeStart}
+        />
+        <RangeEnd
+          heading={mark(endTitle, endRequired)}
+          schema={pair.endSchema}
+          value={endValue}
+          required={endRequired}
+          error={endError}
+          onChange={onChangeEnd}
+        />
+      </div>
+    </Field>
+  );
+}

package/src/schema-form/enum-field.tsx

@@ -6,6 +6,7 @@
  */
 import type { ReactNode } from 'react';
 
+import { ChipGroup } from '../components/chip-group';
 import { Field } from '../components/field';
 import { RadioGroup } from '../components/radio-group';
 import { Select } from '../components/select';
@@ -22,6 +23,7 @@ export function EnumField({
   model,
   value,
   onChange,
+  choiceLabel,
 }: {
   heading: string;
   description: string | undefined;
@@ -29,6 +31,8 @@ export function EnumField({
   model: Extract<FieldModel, { kind: 'enum' }>;
   value: unknown;
   onChange: (value: unknown) => void;
+  /** The select's placeholder when the field draws as a select; absent shows `Select…`. */
+  choiceLabel?: string;
 }): ReactNode {
   const options = model.options.map((option, index) => ({
     key: String(index),
@@ -44,6 +48,21 @@ export function EnumField({
     if (match !== undefined) onChange(match.value);
   };
 
+  // `control: chips` draws the choice as a chip grid in place of the radio/select,
+  // at any option count.
+  if (model.control === 'chips') {
+    return (
+      <Field label={heading} description={description} error={error} group>
+        <ChipGroup
+          mode="single"
+          options={options.map((option) => ({ value: option.key, label: option.label }))}
+          value={selectedKey}
+          onValueChange={emit}
+        />
+      </Field>
+    );
+  }
+
   if (options.length <= RADIO_MAX_OPTIONS) {
     return (
       <Field label={heading} description={description} error={error} group>
@@ -61,6 +80,7 @@ export function EnumField({
         options={options.map((option) => ({ value: option.key, label: option.label }))}
         value={selectedKey}
         onValueChange={emit}
+        placeholder={choiceLabel}
       />
     </Field>
   );

package/src/schema-form/field-model.ts

@@ -5,7 +5,7 @@
  * validator import the vocabulary without pulling in classification code.
  */
 import type { EnumOption } from './resolve';
-import type { JsonSchema } from './types';
+import type { FormControl, FormInputMode, JsonSchema } from './types';
 
 /**
  * How a string field accepts binary content as a JSON-serializable string.
@@ -115,10 +115,28 @@ export interface UnionVariant {
 /** The renderer-facing classification of a schema node. */
 export type FieldModel =
   | { readonly kind: 'const'; readonly value: unknown }
-  | { readonly kind: 'enum'; readonly options: readonly EnumOption[] }
+  | {
+      readonly kind: 'enum';
+      readonly options: readonly EnumOption[];
+      /** The `control` keyword off the property: `'chips'` draws the choice as a
+       *  chip grid in place of the radio/select; `undefined` keeps the default. */
+      readonly control: FormControl | undefined;
+    }
   | {
       readonly kind: 'string';
       readonly format: string | undefined;
+      /** The input kind (keyboard / native control) this string draws, from the
+       *  schema's `inputMode` keyword; `undefined` for a plain text box. It
+       *  draws, it does not validate, and it outranks `format` for the control. */
+      readonly inputMode: FormInputMode | undefined;
+      /** True when the `control` keyword is `'textarea'`: draw a multi-line text
+       *  control instead of a single-line box. It draws, it does not validate. */
+      readonly multiline: boolean;
+      /** The `maxLength`/`minLength` JSON-Schema bounds, drawn on the control (a
+       *  native cap plus a live counter when `maxLength` is set) and enforced by
+       *  the validator. `undefined` leaves that bound unconstrained. */
+      readonly maxLength: number | undefined;
+      readonly minLength: number | undefined;
       /** Present when media annotations opt the field into the upload control. */
       readonly media: MediaUpload | undefined;
       /** Present when a well-formed `x-tai42-expression` annotation opts the
@@ -138,6 +156,10 @@ export type FieldModel =
       // `array` field — a multi-select needs a known option set to draw.
       readonly kind: 'multiselect';
       readonly options: readonly EnumOption[];
+      /** The `control` keyword off the property: `'chips'` draws the multi-select
+       *  as a toggle-chip grid in place of the checkbox group; `undefined` keeps
+       *  the default. */
+      readonly control: FormControl | undefined;
     }
   | {
       readonly kind: 'object';

package/src/schema-form/field-node.tsx

@@ -41,6 +41,14 @@ interface FieldNodeProps {
   readonly markRequired?: boolean;
   readonly errors: SchemaFormErrors | undefined;
   readonly idPrefix: string;
+  /**
+   * Per-field picker placeholders keyed by property name, handed to an OBJECT node so
+   * its direct `enum`-select children draw their placeholder. Carried by the root form
+   * only; nested objects receive none.
+   */
+  readonly fieldWording?: Readonly<Record<string, { choiceLabel?: string }>>;
+  /** This field's own picker placeholder, when it draws as an `enum` select. */
+  readonly choiceLabel?: string;
 }
 
 function labelText(explicit: string | undefined, label: string | undefined): string {
@@ -73,6 +81,8 @@ function FieldNodeImpl(props: FieldNodeProps): ReactNode {
     required,
     errors,
     idPrefix,
+    fieldWording: props.fieldWording,
+    choiceLabel: props.choiceLabel,
   });
 }
 
@@ -90,6 +100,8 @@ interface RenderFieldArgs {
   readonly required: boolean;
   readonly errors: SchemaFormErrors | undefined;
   readonly idPrefix: string;
+  readonly fieldWording?: Readonly<Record<string, { choiceLabel?: string }>>;
+  readonly choiceLabel?: string;
 }
 
 /** Render the field component matching the classified model kind. */
@@ -126,6 +138,7 @@ function renderField(args: RenderFieldArgs): ReactNode {
           model={model}
           value={value}
           onChange={onChange}
+          choiceLabel={args.choiceLabel}
         />
       );
     case 'string':
@@ -135,6 +148,10 @@ function renderField(args: RenderFieldArgs): ReactNode {
           description={description}
           error={error}
           format={model.format}
+          inputMode={model.inputMode}
+          multiline={model.multiline}
+          maxLength={model.maxLength}
+          minLength={model.minLength}
           media={model.media}
           expression={model.expression}
           date={model.date}
@@ -187,6 +204,7 @@ function renderCompositeField(
   model: Extract<FieldModel, { kind: 'array' | 'object' | 'record' | 'union' }>,
 ): ReactNode {
   const { heading, description, error, root, value, onChange, path, errors, idPrefix } = args;
+  const { fieldWording } = args;
   switch (model.kind) {
     case 'array':
       return (
@@ -216,6 +234,7 @@ function renderCompositeField(
             errors={errors}
             idPrefix={idPrefix}
             skip={undefined}
+            fieldWording={fieldWording}
           />
         </FieldGroup>
       );