@dxos/react-ui-form 0.8.4-main.d05539e30a → 0.8.4-main.d9fc60f731

package/src/components/Form/fields/ArrayField.tsx

@@ -6,14 +6,22 @@ import * as Option from 'effect/Option';
 import * as SchemaAST from 'effect/SchemaAST';
 import React, { useCallback } from 'react';
 
-import { findNode, getArrayElementType, getDiscriminatedType, isDiscriminatedUnion, isNestedType } from '@dxos/effect';
-import { IconButton, useTranslation } from '@dxos/react-ui';
+import { Ref } from '@dxos/echo';
+import {
+  createJsonPath,
+  findNode,
+  getArrayElementType,
+  getDiscriminatedType,
+  isDiscriminatedUnion,
+  isNestedType,
+} from '@dxos/effect';
+import { useTranslation } from '@dxos/react-ui';
 
 import { translationKey } from '#translations';
 
 import { getFormProperties } from '../../../util';
 import { useFormValues } from '../Form';
-import { FormField, type FormFieldProps } from '../FormField';
+import { FormField, IconBlock, type FormFieldProps } from '../FormField';
 import { FormFieldLabel, type FormFieldStateProps } from '../FormFieldComponent';
 
 export type ArrayFieldProps = {
@@ -55,7 +63,13 @@ export const ArrayField = ({
   const handleAdd = useCallback(() => {
     const defaultValue =
       isNestedType(type) && elementType ? getDefaultObjectValue(elementType) : getDefaultValue(elementType);
-    values && onValueChange(type, [...values, defaultValue]);
+    // `values` is `undefined` on first render for arrays whose parent path
+    // hasn't been materialised in the form values yet (e.g. `package.repos`
+    // when the form starts with no `package`). `useFormValues`'s default-
+    // value effect would eventually backfill it to `[]`, but until then the
+    // old `values && ...` guard silently swallowed the click. Treat a
+    // missing array as empty so Add always produces `[defaultValue]`.
+    onValueChange(type, [...(values ?? []), defaultValue]);
   }, [onValueChange, type, elementType, values]);
 
   const handleDelete = useCallback(
@@ -72,53 +86,62 @@ export const ArrayField = ({
     return null;
   }
 
+  const renderItemAsObject = elementType && isNestedType(elementType) && !Ref.isRefType(elementType);
+
   return (
     <>
       {(layout !== 'static' || (values && values.length > 0)) && (
-        <FormFieldLabel readonly={readonly} label={label} asChild />
+        <div className='flex items-center gap-2'>
+          <div className='flex-1 min-w-0'>
+            <FormFieldLabel readonly={readonly} label={label} path={createJsonPath(path ?? [])} asChild />
+          </div>
+          {!readonly && layout !== 'static' && (
+            <IconBlock inline icon='ph--plus--regular' label={t('add-item.button')} onClick={handleAdd} />
+          )}
+        </div>
       )}
 
-      <div className='flex flex-col gap-form-gap'>
+      <div className='flex flex-col'>
         {values?.map((_, index) => {
-          return (
-            <div key={index} className='grid grid-cols-[1fr_min-content] gap-form-gap last:mb-form-gap items-center'>
-              <FormField
-                autoFocus={index === values.length - 1}
-                type={elementType}
-                path={[...(path ?? []), index]}
-                readonly={readonly || layout === 'static'}
-                layout='inline'
-                {...props}
-              />
+          const isLast = index === values.length - 1;
+
+          // Object items: each row contains a recursively-rendered FormField
+          //   (multiple sub-rows for the object's fields) wrapped in a border,
+          //   with the delete button bottom-aligned next to it.
+          // Scalar items: a single-row inline FormField with a center-aligned
+          //   delete button. Refs and primitive arrays use this layout.
+          const fieldField = (
+            <FormField
+              {...props}
+              autoFocus={isLast}
+              type={elementType}
+              // Suppress the per-item header for object items only — the recursive
+              // form already renders labels for each sub-field. Scalar items
+              // (refs, primitives) keep the parent name so inline-layout
+              // children (e.g. RefField) have a real label to use as a
+              // fallback placeholder.
+              {...(renderItemAsObject && { name: null })}
+              path={[...(path ?? []), index]}
+              readonly={readonly || layout === 'static'}
+              layout={renderItemAsObject ? (layout === 'static' ? 'static' : undefined) : 'inline'}
+            />
+          );
 
+          return (
+            <div key={index} className='grid grid-cols-[1fr_min-content] items-center mb-1 last:mb-form-gap'>
+              {fieldField}
               {!readonly && layout !== 'static' && (
-                <div className='flex flex-col h-full justify-end'>
-                  {/* NOTE: Aligns with center of last field if multi-field object. */}
-                  <div className='flex items-center h-[2rem]'>
-                    <IconButton
-                      icon='ph--x--regular'
-                      iconOnly
-                      label={t('remove.button')}
-                      onClick={() => handleDelete(index)}
-                      classNames='self-center'
-                    />
-                  </div>
-                </div>
+                <IconBlock
+                  inline={!renderItemAsObject}
+                  icon='ph--x--regular'
+                  label={t('remove-item.button')}
+                  onClick={() => handleDelete(index)}
+                />
               )}
             </div>
           );
         })}
       </div>
-
-      {/* TODO(burdon): Get label from schema. */}
-      {!readonly && layout !== 'static' && (
-        <IconButton
-          classNames='flex w-full'
-          icon='ph--plus--regular'
-          label={t('add-item.button')}
-          onClick={handleAdd}
-        />
-      )}
     </>
   );
 };

package/src/components/Form/fields/DateField.tsx

@@ -0,0 +1,101 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { format as formatDate } from 'date-fns';
+import React, { useCallback } from 'react';
+
+import { Format } from '@dxos/echo';
+import { Input } from '@dxos/react-ui';
+
+import { type FormFieldComponentProps, FormFieldWrapper } from '../FormFieldComponent';
+
+/**
+ * Stored value shapes:
+ * - `Format.DateTime` -> ISO 8601 (`2018-11-13T20:20:39.000Z`).
+ * - `Format.Date`     -> `YYYY-MM-DD`.
+ * - `Format.Time`     -> `HH:mm:ss`.
+ *
+ * Segmented input value shapes (react-aria-components-backed):
+ * - `Input.DateTime` -> `YYYY-MM-DDTHH:mm` in local time.
+ * - `Input.Date`     -> `YYYY-MM-DD`.
+ * - `Input.Time`     -> `HH:mm`.
+ */
+
+/** ISO 8601 → `YYYY-MM-DDTHH:mm` in the user's local timezone. */
+const isoToLocalDateTime = (value: string | undefined): string => {
+  if (!value) {
+    return '';
+  }
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) {
+    return '';
+  }
+  return formatDate(date, "yyyy-MM-dd'T'HH:mm");
+};
+
+/** `YYYY-MM-DDTHH:mm` (local) → ISO 8601 with timezone. */
+const localDateTimeToIso = (value: string): string | undefined => {
+  if (!value) {
+    return undefined;
+  }
+  // Treat the input as local time. `new Date('YYYY-MM-DDTHH:mm')` parses as local.
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? undefined : date.toISOString();
+};
+
+export const DateField = ({
+  type,
+  format,
+  readonly,
+  placeholder: _placeholder,
+  onValueChange,
+  onBlur: _onBlur,
+  ...props
+}: FormFieldComponentProps<string>) => {
+  const handleSimpleChange = useCallback((next: string) => onValueChange(type, next), [type, onValueChange]);
+
+  const handleDateTimeChange = useCallback(
+    (next: string) => {
+      const iso = localDateTimeToIso(next);
+      onValueChange(type, iso as string);
+    },
+    [type, onValueChange],
+  );
+
+  return (
+    <FormFieldWrapper<string> readonly={readonly} format={format} {...props}>
+      {({ value }) => {
+        switch (format) {
+          case Format.TypeFormat.Date:
+            return (
+              <div className='grid grid-cols-[minmax(0,1fr)_min-content] items-stretch gap-1'>
+                <Input.Date
+                  classNames='min-w-0 overflow-hidden'
+                  disabled={!!readonly}
+                  value={value ?? ''}
+                  onValueChange={handleSimpleChange}
+                />
+                <Input.TriggerIcon classNames='h-full' />
+              </div>
+            );
+          case Format.TypeFormat.Time:
+            return <Input.Time disabled={!!readonly} value={value ?? ''} onValueChange={handleSimpleChange} />;
+          case Format.TypeFormat.DateTime:
+          default:
+            return (
+              <div className='grid grid-cols-[minmax(0,1fr)_min-content] items-stretch gap-1'>
+                <Input.DateTime
+                  classNames='min-w-0 overflow-hidden'
+                  disabled={!!readonly}
+                  value={isoToLocalDateTime(value)}
+                  onValueChange={handleDateTimeChange}
+                />
+                <Input.TriggerIcon classNames='h-full' />
+              </div>
+            );
+        }
+      }}
+    </FormFieldWrapper>
+  );
+};

package/src/components/Form/fields/GeoPointField.tsx

@@ -15,6 +15,7 @@ import { type FormFieldComponentProps, FormFieldLabel } from '../FormFieldCompon
 export const GeoPointField = ({
   type,
   label,
+  jsonPath,
   readonly,
   layout,
   getStatus,
@@ -59,7 +60,9 @@ export const GeoPointField = ({
 
   return (
     <Input.Root validationValence={status}>
-      {layout !== 'inline' && <FormFieldLabel error={error} readonly={readonly} label={label} asChild />}
+      {layout !== 'inline' && (
+        <FormFieldLabel error={error} readonly={readonly} label={label} path={jsonPath} asChild />
+      )}
       {layout === 'static' ? (
         <LatLng {...value} />
       ) : (

package/src/components/Form/fields/InlineRefField.tsx

@@ -0,0 +1,146 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useAtomValue } from '@effect-atom/atom-react';
+import React, { useCallback, useMemo } from 'react';
+
+import { type Database, Obj, Ref, Type } from '@dxos/echo';
+import { AtomRef } from '@dxos/echo-atom';
+import { useType as defaultUseType } from '@dxos/echo-react';
+import {
+  type JsonPath,
+  ReferenceAnnotationId,
+  type ReferenceAnnotationValue,
+  splitJsonPath,
+} from '@dxos/echo/internal';
+import { findAnnotation } from '@dxos/effect';
+import { Button, Icon, Input, useTranslation } from '@dxos/react-ui';
+
+import { translationKey } from '#translations';
+
+import { Form, omitId } from '../Form';
+import { Nesting } from '../FormField';
+import { FormFieldLabel } from '../FormFieldComponent';
+import { type RefFieldProps } from './RefField';
+
+/**
+ * Renders a referenced object's own fields inline (a nested form bound to the
+ * target) rather than the {@link RefField} picker. Activated by
+ * `FormInlineAnnotation.set(true)` on the `Ref` property.
+ *
+ * The nested form edits the target object directly: each changed path is
+ * written back via `Obj.setValue` within an `Obj.update`, mirroring
+ * `ObjectProperties` (without the synthetic meta-tags row).
+ */
+export const InlineRefField = (props: RefFieldProps) => {
+  const {
+    type,
+    readonly,
+    label,
+    jsonPath,
+    layout,
+    db,
+    getValue,
+    onValueChange,
+    onCreate,
+    useType = defaultUseType,
+  } = props;
+  const { t } = useTranslation(translationKey);
+
+  const reference = getValue() as Ref.Ref<any> | undefined;
+  const typename = useMemo(
+    () => (type ? findAnnotation<ReferenceAnnotationValue>(type, ReferenceAnnotationId)?.typename : undefined),
+    [type],
+  );
+
+  // Empty ref: offer to create the referenced object so the inline form has a target.
+  const createType = useType(db, typename);
+  const handleCreate = useCallback(async () => {
+    if (!createType || !onCreate) {
+      return;
+    }
+    const newObject = await onCreate(createType, {});
+    if (newObject) {
+      onValueChange(type, Ref.make(newObject));
+    }
+  }, [createType, onCreate, type, onValueChange]);
+
+  if (readonly && !reference) {
+    return null;
+  }
+
+  return (
+    <Input.Root>
+      {layout !== 'inline' && <FormFieldLabel readonly={readonly} label={label} path={jsonPath} />}
+      {reference ? (
+        <InlineForm reference={reference} db={db} readonly={readonly} useType={useType} />
+      ) : (
+        !readonly &&
+        onCreate && (
+          <Button classNames='w-full gap-form-gap' disabled={!createType || !db} onClick={() => void handleCreate()}>
+            <Icon icon='ph--plus--regular' size={4} />
+            <span>{label || t('ref-field.placeholder')}</span>
+          </Button>
+        )
+      )}
+    </Input.Root>
+  );
+};
+
+type InlineFormProps = {
+  reference: Ref.Ref<any>;
+  db?: Database.Database;
+  readonly?: boolean;
+  // Accepts both the generic `defaultUseType` and `RefFieldProps['useType']`.
+  useType?: (db?: Database.Database, typename?: string) => Type.AnyEntity | undefined;
+};
+
+const InlineForm = ({ reference, db, readonly, useType = defaultUseType }: InlineFormProps) => {
+  const target = useAtomValue(useMemo(() => AtomRef.make(reference), [reference]));
+  const typename = target ? (Obj.getTypename(target) ?? undefined) : undefined;
+  const typeFromRegistry = useType(db, typename);
+  const targetType = (target && Obj.getType(target)) || typeFromRegistry;
+  // Drop the ECHO `id` property (mirrors `ObjectProperties` via `withMetaTags`);
+  // otherwise the nested form renders an "Id" field. Hidden fields
+  // (`FormInputAnnotation.set(false)`) are already filtered by the field set.
+  const formSchema = useMemo(() => (targetType ? omitId(Type.getSchema(targetType)) : undefined), [targetType]);
+  const defaultValues = useMemo(() => (target ? { ...target } : {}), [target]);
+
+  // `formSchema` is resolved at runtime (the referenced object's schema), so the
+  // form's value type is not statically known here — `any` at this form-value
+  // boundary mirrors `ObjectProperties`. Each changed path is written back to the
+  // live target via `Obj.setValue`.
+  const handleChange = useCallback(
+    (values: any, { isValid, changed }: { isValid: boolean; changed: Record<JsonPath, boolean> }) => {
+      if (!isValid || !target) {
+        return;
+      }
+      const changedPaths = (Object.keys(changed) as JsonPath[]).filter((path) => changed[path]);
+      if (changedPaths.length === 0) {
+        return;
+      }
+      Obj.update(target, () => {
+        for (const path of changedPaths) {
+          const parts = splitJsonPath(path);
+          Obj.setValue(target, parts, Obj.getValue(values, parts));
+        }
+      });
+    },
+    [target],
+  );
+
+  if (!target || !formSchema) {
+    return null;
+  }
+
+  return (
+    <Nesting>
+      <Form.Root schema={formSchema} defaultValues={defaultValues as any} db={db} onValuesChanged={handleChange}>
+        <Form.Content>
+          <Form.FieldSet readonly={readonly} />
+        </Form.Content>
+      </Form.Root>
+    </Nesting>
+  );
+};

package/src/components/Form/fields/MarkdownField.tsx

@@ -31,6 +31,7 @@ export const MarkdownField = ({
   type,
   readonly,
   label,
+  jsonPath,
   placeholder,
   layout,
   db,
@@ -80,7 +81,7 @@ export const MarkdownField = ({
 
   return (
     <Input.Root validationValence={status}>
-      {layout !== 'inline' && <FormFieldLabel error={error} readonly={readonly} label={label} />}
+      {layout !== 'inline' && <FormFieldLabel error={error} readonly={readonly} label={label} path={jsonPath} />}
       {layout === 'static' ? renderStatic() : renderEditor()}
       {layout === 'full' && <Input.Validation>{error}</Input.Validation>}
     </Input.Root>
@@ -104,8 +105,7 @@ type RefMarkdownEditorProps = {
 const RefMarkdownEditor = ({ reference, placeholder }: RefMarkdownEditorProps) => {
   const text = useAtomValue(useMemo(() => AtomRef.make(reference), [reference]));
   const dataExtensions = useMemo(
-    () =>
-      text ? [createDataExtensions({ id: reference.dxn.toString(), text: createDocAccessor(text, ['content']) })] : [],
+    () => (text ? [createDataExtensions({ id: reference.uri, text: createDocAccessor(text, ['content']) })] : []),
     [text, reference],
   );
   const extensions = useBasicMarkdownExtensions({ placeholder, extensions: dataExtensions });

package/src/components/Form/fields/RefField.tsx

@@ -6,10 +6,10 @@ import React, { useCallback, useMemo, useState } from 'react';
 
 import '@dxos/lit-ui/dx-tag-picker.pcss';
 import { type Database, Entity, Filter, Obj, Ref, Type } from '@dxos/echo';
-import { useQuery, useSchema as defaultUseSchema } from '@dxos/echo-react';
-import { ReferenceAnnotationId, type ReferenceAnnotationValue } from '@dxos/echo/internal';
+import { useQuery, useType as defaultUseType } from '@dxos/echo-react';
+import { ANY_OBJECT_TYPENAME, ReferenceAnnotationId, type ReferenceAnnotationValue } from '@dxos/echo/internal';
 import { findAnnotation } from '@dxos/effect';
-import { DXN } from '@dxos/keys';
+import { URI } from '@dxos/keys';
 import { DxAnchor } from '@dxos/lit-ui/react';
 import { Button, Icon, Input, useTranslation } from '@dxos/react-ui';
 import { ParentLabelAnnotationId } from '@dxos/schema';
@@ -27,7 +27,7 @@ const isRefSnapshot = (val: any): val is { '/': string } => {
 
 const defaultGetOptions: NonNullable<RefFieldProps['getOptions']> = (results, { parentLabel } = {}) =>
   results.map((result) => {
-    const id = Entity.getDXN(result).toString();
+    const id = Entity.getURI(result);
     const parent = parentLabel ? Obj.getParent(result as Obj.Unknown) : undefined;
     const label = parent ? Entity.getLabel(parent) : Entity.getLabel(result);
     return { id, label: label ?? id };
@@ -38,7 +38,7 @@ const defaultUseResults: NonNullable<RefFieldProps['useResults']> = (db, typenam
     db,
     typename
       ? // For Ref.Ref(Obj.Unknown) we want to show all objects.
-        typename === Type.getTypename(Obj.Unknown)
+        typename === ANY_OBJECT_TYPENAME
         ? Filter.everything()
         : Filter.typename(typename)
       : Filter.nothing(),
@@ -51,7 +51,7 @@ export type RefFieldProps = FormFieldComponentProps &
   > & {
     db?: Database.Database;
     // TODO(burdon): Replace hooks with callbacks.
-    useSchema?: (db?: Database.Database, typename?: string) => Type.AnyEntity;
+    useType?: (db?: Database.Database, typename?: string) => Type.AnyEntity;
     useResults?: (db?: Database.Database, typename?: string) => Entity.Any[];
     getOptions?: (objects: Entity.Any[], options?: { parentLabel?: boolean }) => RefOption[];
     /**
@@ -68,6 +68,7 @@ export const RefField = (props: RefFieldProps) => {
     type,
     readonly,
     label,
+    jsonPath,
     placeholder,
     layout,
     getStatus,
@@ -77,7 +78,7 @@ export const RefField = (props: RefFieldProps) => {
     createInitialValuePath,
     createFieldMap,
     db,
-    useSchema = defaultUseSchema,
+    useType = defaultUseType,
     useResults = defaultUseResults,
     getOptions = defaultGetOptions,
     onCreate,
@@ -99,21 +100,24 @@ export const RefField = (props: RefFieldProps) => {
 
   const handleGetValue = useCallback(() => {
     const formValue = getValue();
-    // Match form-value Refs against options by the bare object id (last DXN
-    // segment), not by full DXN string. Ref.make uses
-    // `DXN.fromLocalObjectId(id)` (`dxn:echo:@:<id>`), but
-    // `Entity.getDXN(obj)` on a registered object produces the space-scoped
-    // form (`dxn:echo:<spaceId>:<id>`). String-comparing the two never
-    // matches, so the just-created Ref's option lookup fails and the slot
-    // displays as empty even though the underlying form value IS set.
-    const dxnToObjectId = (dxn: string): string => dxn.split(':').pop() ?? dxn;
+    // Match form-value Refs against options by the bare entity id, not by full
+    // URI string. A just-created object's Ref (`Ref.make`) carries the LOCAL
+    // EID `echo:/<id>`, while options derived from `Entity.getURI` carry the
+    // qualified EID `echo://<spaceId>/<id>`; encoded snapshots use the DXN
+    // form `dxn:echo:<space|@>:<id>`. The entity id (a ULID) contains neither
+    // `:` nor `/`, so it is always the final delimiter-separated segment —
+    // splitting on both reconciles all three forms. Comparing full strings (or
+    // splitting on `:` alone, which leaves `/`-delimited EIDs intact) makes the
+    // just-created Ref's lookup fail and the slot render empty even though the
+    // underlying form value IS set.
+    const dxnToEntityId = (dxn: string): string => dxn.split(/[:/]/).filter(Boolean).pop() ?? dxn;
 
     const unknownToRefOption = (value: unknown) => {
       const isRef = Ref.isRef(value);
       if (isRef || isRefSnapshot(value)) {
-        const dxnString = isRef ? value.dxn.toString() : value['/'];
-        const objectId = dxnToObjectId(dxnString);
-        const matchingOption = options.find((option) => dxnToObjectId(option.id) === objectId);
+        const dxnString = isRef ? value.uri : value['/'];
+        const objectId = dxnToEntityId(dxnString);
+        const matchingOption = options.find((option) => dxnToEntityId(option.id) === objectId);
         if (matchingOption) {
           return matchingOption;
         }
@@ -127,7 +131,7 @@ export const RefField = (props: RefFieldProps) => {
 
   const item = handleGetValue();
   const selectedIds = useMemo(() => (item ? [item.id] : []), [item]);
-  const createSchema = useSchema(db, typename);
+  const createSchema = useType(db, typename);
 
   // Lift the popover open state so we can dismiss it after a successful create.
   const [open, setOpen] = useState(false);
@@ -152,7 +156,7 @@ export const RefField = (props: RefFieldProps) => {
   const handleUpdate = useCallback(
     (id: string | undefined) => {
       const item = options.find((option) => option.id === id);
-      const ref = item ? Ref.fromDXN(DXN.parse(item.id)) : undefined;
+      const ref = item ? Ref.fromURI(URI.make(item.id)) : undefined;
       onValueChange(type, ref);
     },
     [options, type, onValueChange],
@@ -175,7 +179,7 @@ export const RefField = (props: RefFieldProps) => {
 
   return (
     <Input.Root validationValence={status}>
-      {layout !== 'inline' && <FormFieldLabel error={error} readonly={readonly} label={label} />}
+      {layout !== 'inline' && <FormFieldLabel error={error} readonly={readonly} label={label} path={jsonPath} />}
       <div>
         {readonly ? (
           !item ? (
@@ -197,7 +201,9 @@ export const RefField = (props: RefFieldProps) => {
               ) : (
                 <Button classNames='w-full text-start gap-form-gap'>
                   <div className='grow overflow-hidden'>
-                    <span className='truncate text-description'>{placeholder ?? t('ref-field.placeholder')}</span>
+                    <span className='truncate text-description'>
+                      {placeholder || label || t('ref-field.placeholder')}
+                    </span>
                   </div>
                   <Icon size={3} icon='ph--caret-down--bold' />
                 </Button>
@@ -211,7 +217,7 @@ export const RefField = (props: RefFieldProps) => {
                 // Strip hidden (`FormInputAnnotation.set(false)`) fields so the
                 // form's validator doesn't reject required-but-hidden fields
                 // such as backing-object refs supplied by a `FactoryAnnotation`.
-                createSchema={createSchema && omitHiddenFormFields(omitId(createSchema))}
+                createSchema={createSchema && omitHiddenFormFields(omitId(Type.getSchema(createSchema)))}
                 createOptionLabel={createOptionLabel}
                 createOptionIcon={createOptionIcon}
                 createInitialValuePath={createInitialValuePath}

package/src/components/Form/fields/SelectField.tsx

@@ -4,18 +4,20 @@
 
 import React, { useCallback } from 'react';
 
-import { Input, Select, type SelectRootProps } from '@dxos/react-ui';
+import { Icon, Input, Select, type SelectRootProps } from '@dxos/react-ui';
+import { getStyles } from '@dxos/ui-theme';
 
 import { type FormFieldComponentProps, FormFieldLabel } from '../FormFieldComponent';
 
 export type SelectFieldOptions = FormFieldComponentProps & {
-  options?: Array<{ value: string | number; label?: string }>;
+  options?: Array<{ value: string | number; label?: string; secondaryLabel?: string; icon?: string; iconHue?: string }>;
 };
 
 export const SelectField = ({
   type,
   readonly,
   label,
+  jsonPath,
   layout,
   placeholder,
   options,
@@ -37,7 +39,7 @@ export const SelectField = ({
 
   return (
     <Input.Root validationValence={status}>
-      {layout !== 'inline' && <FormFieldLabel error={error} readonly={readonly} label={label} />}
+      {layout !== 'inline' && <FormFieldLabel error={error} readonly={readonly} label={label} path={jsonPath} />}
       {layout === 'static' ? (
         <p>{options?.find(({ value: optionValue }) => optionValue === value)?.label ?? String(value)}</p>
       ) : (
@@ -47,10 +49,14 @@ export const SelectField = ({
           <Select.Portal>
             <Select.Content>
               <Select.Viewport>
-                {options?.map(({ value, label }) => (
+                {options?.map(({ value, label, secondaryLabel, icon, iconHue }) => (
                   // NOTE: Numeric values are converted to and from strings.
                   <Select.Option key={String(value)} value={String(value)}>
-                    {label ?? String(value)}
+                    <span className='flex items-center flex-row gap-2'>
+                      {icon && <Icon icon={icon} classNames={getIconHueStyles(iconHue)} />}
+                      {label ?? String(value)}
+                      {secondaryLabel && <span className='text-subdued text-xs'>{secondaryLabel}</span>}
+                    </span>
                   </Select.Option>
                 ))}
               </Select.Viewport>
@@ -63,3 +69,9 @@ export const SelectField = ({
     </Input.Root>
   );
 };
+
+const getIconHueStyles = (iconHue?: string): string | undefined => {
+  const styles = iconHue ? getStyles(iconHue) : undefined;
+
+  return styles?.fg;
+};

package/src/components/Form/fields/SelectOptionField.tsx

@@ -19,6 +19,7 @@ export const SelectOptionField = ({
   type,
   readonly,
   label,
+  jsonPath,
   getStatus,
   getValue,
   onValueChange,
@@ -119,7 +120,7 @@ export const SelectOptionField = ({
 
   return (
     <Input.Root validationValence={status}>
-      <FormFieldLabel error={error} readonly={readonly} label={label} />
+      <FormFieldLabel error={error} readonly={readonly} label={label} path={jsonPath} />
       <div>
         {options && (
           <List.Root
@@ -153,8 +154,8 @@ export const SelectOptionField = ({
                         />
                       </div>
                       {selected === item.id && (
-                        <div className='flex flex-col p-form-padding gap-form-gap dx-density-fine'>
-                          <Input.Label classNames='text-xs'>{t('select-option.label')}</Input.Label>
+                        <div className='flex flex-col p-form-padding gap-form-gap dx-density-md'>
+                          <Input.Label classNames='text-sm'>{t('select-option.label')}</Input.Label>
                           <div className='grid grid-cols-[1fr_min-content_min-content] gap-form-gap'>
                             <Input.TextInput
                               disabled={!!readonly}

package/src/components/Form/fields/TextAreaField.tsx

@@ -25,7 +25,7 @@ export const TextAreaField = ({
     <FormFieldWrapper<string> readonly={readonly} {...props}>
       {({ value = '' }) => (
         <Input.TextArea
-          rows={3}
+          rows={5}
           disabled={!!readonly}
           placeholder={placeholder}
           value={value}