@multiplatform.one/forms 8.3.0 → 8.4.0

package/src/fields/FileUpload/index.tsx

@@ -2,7 +2,16 @@ import { transitionProps } from "@multiplatform.one/theme";
 import { useTouchSurface } from "@multiplatform.one/theme";
 import { FileIcon, UploadIcon, XIcon } from "@phosphor-icons/react";
 import type { DeepKeys, DeepValue } from "@tanstack/form-core";
-import { type DragEvent, type ReactNode, useCallback, useEffect, useRef, useState } from "react";
+import {
+  type DragEvent,
+  type ReactNode,
+  type Ref,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from "react";
 import { useMedia, useProps, type SizeTokens } from "tamagui";
 import { Image, isWeb, Text, XStack, YStack, styled } from "tamagui";
 import { Button, IconButton, IconButtonGroup } from "../../Button";
@@ -26,6 +35,7 @@ import {
 import { formCommonColors, formDropzoneColors, formInputColors } from "../../shared/colorRamps";
 import { t } from "../../shared/t";
 import type { FieldComponentProps, Validator } from "../../types";
+import type { FieldPickerHandle, FieldPickerTrigger } from "../pickerHandle";
 import type { NativePickedFile, NativePickerMode } from "./filePickerTypes";
 // Platform-split: the web twin is inert, the `.native` twin opens
 // expo-document-picker / expo-image-picker (Geolocation map-surface pattern).
@@ -114,6 +124,10 @@ export type FileUploadProps<
     existing?: { src: string; name?: string; isImage?: boolean } | null;
     /** Removes the existing file; given, its tile carries a remove disc. */
     onExistingRemove?: () => void;
+    /** LC-290: `open()` runs the picker from the app's own control. */
+    ref?: Ref<FieldPickerHandle>;
+    /** LC-290: the app's own control, drawn in place of the dropzone; call `open` from its press. */
+    trigger?: FieldPickerTrigger;
   };
 
 const UploadAreaFrame = styled(YStack, {
@@ -203,6 +217,7 @@ export function FileUpload<
 >(props: FileUploadProps<TParentData, TName, TFieldValidator, TFormValidator, TData>) {
   const hydrationTouch = useTouchSurface();
   const media = useMedia();
+  const { ref: pickerRef, trigger } = props;
   const {
     defaultValue,
     form,
@@ -230,6 +245,8 @@ export function FileUpload<
     existing,
     onExistingRemove,
     id: idProp,
+    ref: _ref,
+    trigger: _trigger,
     ...fieldProps
   } = useProps(props);
 
@@ -615,6 +632,9 @@ export function FileUpload<
     fileInputRef.current?.click();
   }, [disabled, readOnly]);
 
+  const requestFilesRef = useRef<() => void>(openFileDialog);
+  useImperativeHandle(pickerRef, () => ({ open: () => requestFilesRef.current() }), []);
+
   // Native has no <input type="file">. The same press opens the OS picker and
   // routes its result through the identical validate → setState → field path,
   // so `accept`, `maxSize`, `multiple` and the removal list behave as on web.
@@ -912,6 +932,29 @@ export function FileUpload<
       : () => {
           void openNativePicker(onValueChange, onBlurHandler);
         };
+    requestFilesRef.current = requestFiles;
+    const hiddenInput = isWeb ? (
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept={accept}
+        multiple={multiple}
+        tabIndex={-1}
+        onChange={(e) => {
+          handleFileSelect(e.target.files, onValueChange, e.target.files);
+          onBlurHandler?.();
+        }}
+        style={{ display: "none" }}
+        disabled={!canInteract}
+      />
+    ) : null;
+    if (trigger)
+      return (
+        <YStack data-file-upload="trigger" alignItems="flex-start">
+          {trigger(requestFiles)}
+          {hiddenInput}
+        </YStack>
+      );
 
     // Drag-and-drop, keyboard activation and the focus ring are DOM concerns;
     // native gets a plain press target on the same surface instead.
@@ -1150,21 +1193,7 @@ export function FileUpload<
             </Text>
           )}
 
-          {isWeb ? (
-            <input
-              ref={fileInputRef}
-              type="file"
-              accept={accept}
-              multiple={multiple}
-              tabIndex={-1}
-              onChange={(e) => {
-                handleFileSelect(e.target.files, onValueChange, e.target.files);
-                onBlurHandler?.();
-              }}
-              style={{ display: "none" }}
-              disabled={!canInteract}
-            />
-          ) : null}
+          {hiddenInput}
         </YStack>
 
         {((multiple && hasRows) || transfers.length > 0) && (

package/src/fields/ImageField/index.tsx

@@ -18,8 +18,9 @@ import {
   type DisabledSurfaceProps,
   type KnobProps,
 } from "@multiplatform.one/theme";
-import type { DragEvent, ReactNode } from "react";
-import { useCallback, useEffect, useRef, useState } from "react";
+import type { DragEvent, ReactNode, Ref } from "react";
+import { useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
+import type { FieldPickerHandle, FieldPickerTrigger } from "../pickerHandle";
 import type { LabelProps, SizeTokens } from "tamagui";
 import { Image, Text as TamaguiText, View, YStack, isWeb, styled } from "tamagui";
 import { IconButton } from "../../Button";
@@ -78,6 +79,10 @@ export interface ImageFieldProps {
   objectFit?: "cover" | "contain" | "fill" | "none";
   /** When true, renders a skeleton placeholder instead of the image field */
   skeleton?: boolean;
+  /** LC-290: `open()` runs the picker from the app's own control. */
+  ref?: Ref<FieldPickerHandle>;
+  /** LC-290: the app's own control, drawn in place of the image frame; call `open` from its press. */
+  trigger?: FieldPickerTrigger;
 }
 
 const ImageFrame = styled(View, {
@@ -112,6 +117,8 @@ type ImageControlProps = {
   onChangeProp?: (val: string | File | null) => void;
   onInvalid?: (message: string | undefined) => void;
   blurHandler?: (...args: any[]) => void;
+  pickerRef?: Ref<FieldPickerHandle>;
+  trigger?: FieldPickerTrigger;
 };
 
 function isImageFile(file: File, accept: string): boolean {
@@ -148,6 +155,8 @@ function ImageControl({
   onChangeProp,
   onInvalid,
   blurHandler,
+  pickerRef,
+  trigger,
 }: ImageControlProps) {
   const describedBy = useFieldDescribedBy();
   const fieldA11y = useFieldA11y();
@@ -230,6 +239,7 @@ function ImageControl({
     if (!canInteract) return;
     fileInputRef.current?.click();
   }, [canInteract]);
+  useImperativeHandle(pickerRef, () => ({ open: openFileDialog }), [openFileDialog]);
 
   const isInteractiveChild = useCallback((e: { target: unknown; currentTarget: unknown }) => {
     const target = e.target as HTMLElement | null;
@@ -313,6 +323,31 @@ function ImageControl({
   const emptyName =
     typeof label === "string" && label ? t("{{label}}: add image", { label }) : t("Add image");
 
+  const hiddenInput = isWeb ? (
+    <input
+      ref={fileInputRef}
+      type="file"
+      accept={accept}
+      tabIndex={-1}
+      aria-hidden={true}
+      onChange={(e) => {
+        const files = e.target.files;
+        e.target.value = "";
+        if (!files || files.length === 0) return;
+        applyFile(files[0]);
+      }}
+      style={{ display: "none" }}
+      disabled={!canInteract}
+    />
+  ) : null;
+  if (trigger)
+    return (
+      <YStack alignItems="flex-start" data-image-field="trigger">
+        {trigger(openFileDialog)}
+        {hiddenInput}
+      </YStack>
+    );
+
   return (
     <YStack alignItems="flex-start" {...knobProps.gap}>
       <ImageFrame
@@ -398,23 +433,7 @@ function ImageControl({
           </View>
         )}
 
-        {isWeb && (
-          <input
-            ref={fileInputRef}
-            type="file"
-            accept={accept}
-            tabIndex={-1}
-            aria-hidden={true}
-            onChange={(e) => {
-              const files = e.target.files;
-              e.target.value = "";
-              if (!files || files.length === 0) return;
-              applyFile(files[0]);
-            }}
-            style={{ display: "none" }}
-            disabled={!canInteract}
-          />
-        )}
+        {hiddenInput}
       </ImageFrame>
 
       {showRemove && hasValue && canInteract && !inTableCell && (
@@ -453,6 +472,8 @@ export function ImageField({
   placeholder,
   objectFit = "cover",
   skeleton,
+  ref,
+  trigger,
 }: ImageFieldProps) {
   const { resolvedForm, knobProps, disabledState, id } = useFormField({
     form: formProp,
@@ -486,6 +507,8 @@ export function ImageField({
     disabledSurface: disabled ? disabledState.surfaceKnobProps : undefined,
     onChangeProp,
     onInvalid: setValidationError,
+    pickerRef: ref,
+    trigger,
   };
 
   if (!resolvedForm || !name) {

package/src/fields/Progress/index.tsx

@@ -25,6 +25,7 @@ import {
 import { Field, FieldLayout, useFieldDescribedBy } from "../../fieldLayout";
 import { Skeleton } from "../../Skeleton";
 import { formControlColors, formSelectedColors } from "../../shared/colorRamps";
+import { useControlTrackFill } from "../../shared/controlTrack";
 import { useIsInTableCell } from "../../shared/tableCellContext";
 import { bidiIsolate, t } from "../../shared/t";
 import {
@@ -186,6 +187,7 @@ function ProgressTrack({
   blurHandler,
 }: ProgressTrackProps) {
   const describedBy = useFieldDescribedBy();
+  const trackFill = useControlTrackFill();
   const trackSize = size ?? sizeToken;
   const percent = Math.round((progressValue / max) * 100);
   const motion = indicatorMotion(knobProps.motion.slide);
@@ -197,6 +199,7 @@ function ProgressTrack({
       size={trackSize}
       overflow="hidden"
       outlined={knobProps.outlined}
+      {...(knobProps.outlined ? undefined : { backgroundColor: trackFill })}
       {...knobProps.borderRadius}
       {...(knobProps.outlined ? knobProps.inputSurface : { borderWidth: 0 })}
       {...(knobProps.outlined ? { borderColor: formControlColors.boundary } : undefined)}

package/src/fields/Slider/Slider.system.native.spec.tsx

@@ -25,6 +25,17 @@ const SystemSliderProbe = vi.hoisted(
           data-rail={props.maximumTrackTintColor}
           data-thumb={props.thumbTintColor ?? ""}
           data-label={props.accessibilityLabel ?? ""}
+          data-accessible={String(props.accessible ?? "")}
+          data-role={props.accessibilityRole ?? ""}
+          data-a11y-value={JSON.stringify(props.accessibilityValue ?? null)}
+          data-actions={(props.accessibilityActions ?? [])
+            .map((a: { name: string }) => a.name)
+            .join(",")}
+          onKeyDown={(event) => {
+            const actionName =
+              event.key === "ArrowUp" ? "increment" : event.key === "ArrowDown" ? "decrement" : "";
+            if (actionName) props.onAccessibilityAction?.({ nativeEvent: { actionName } });
+          }}
           data-min={props.minimumValue}
           data-max={props.maximumValue}
           data-step={props.step}
@@ -101,6 +112,39 @@ describe("Slider on iOS and Android", () => {
     },
   );
 
+  it("is an adjustable element named by its label, valued, stepping on VoiceOver swipes (FZ-8905)", () => {
+    const onChange = vi.fn();
+    const result = renderWithProviders(
+      <Slider
+        label="Brightness"
+        defaultValue={[80]}
+        min={0}
+        max={100}
+        step={1}
+        onChange={onChange}
+      />,
+    );
+    const view = result.getByTestId("system-slider");
+    expect(view.dataset).toMatchObject({
+      accessible: "true",
+      role: "adjustable",
+      label: "Brightness",
+      actions: "increment,decrement",
+    });
+    expect(JSON.parse(view.dataset.a11yValue ?? "null")).toEqual({
+      min: 0,
+      max: 100,
+      now: 80,
+      text: "80",
+    });
+    fireEvent.keyDown(view, { key: "ArrowUp" });
+    expect(onChange).toHaveBeenLastCalledWith([81]);
+    expect(JSON.parse(view.dataset.a11yValue ?? "null")).toMatchObject({ now: 81 });
+    fireEvent.keyDown(view, { key: "ArrowDown" });
+    fireEvent.keyDown(view, { key: "ArrowDown" });
+    expect(onChange).toHaveBeenLastCalledWith([79]);
+  });
+
   it("tints the Android thumb with the fill", () => {
     system.os = "android";
     const result = renderInScheme(<Slider label="Volume" />, "light");

package/src/fields/Slider/index.tsx

@@ -34,6 +34,7 @@ import {
 import { Skeleton } from "../../Skeleton";
 import { Field, FieldLayout, useFieldA11y, useFieldDescribedBy } from "../../fieldLayout";
 import { formCommonColors, formControlColors, formSelectedColors } from "../../shared/colorRamps";
+import { useControlTrackFill } from "../../shared/controlTrack";
 import { loadSystemSlider } from "../../shared/systemControlModules";
 import {
   type SystemPlatform,
@@ -74,12 +75,16 @@ function radiusStopFromToken(token: number | string): BorderRadius {
 }
 
 // Track styling helper - returns props to pass to TamaguiSlider.Track
-const getTrackProps = (outlined: boolean | undefined, borderRadius: number) => ({
+const getTrackProps = (
+  outlined: boolean | undefined,
+  borderRadius: number,
+  trackFill: string = formControlColors.background,
+) => ({
   unstyled: false,
   height: TRACK_HEIGHT,
   width: "100%",
   alignSelf: "center" as const,
-  backgroundColor: outlined ? "transparent" : formControlColors.background,
+  backgroundColor: outlined ? "transparent" : trackFill,
   borderWidth: outlined ? 1 : 0,
   borderColor: outlined ? formControlColors.border : undefined,
   borderRadius,
@@ -270,9 +275,26 @@ function SystemSliderControl({
   onBlur?: (...args: any[]) => void;
 }) {
   const literal = useThemeLiteral();
+  const trackFill = useControlTrackFill();
   const [displayValue, setDisplayValue] = useState(value);
   useEffect(() => setDisplayValue(value), [value]);
   const fill = literal(hasError ? formCommonColors.error : formSelectedColors.mark);
+  // A Fabric view is an accessibility element only when `accessible` says so:
+  // without it UIKit drops the UISlider from the tree (FZ-8905). It takes the
+  // MPO thumb's VoiceOver contract: adjustable, named by its field, valued,
+  // and one step per swipe.
+  const fieldA11y = useFieldA11y();
+  const move = (next: number) => {
+    setDisplayValue(next);
+    if (disabled || readOnly) return;
+    onChangeValue(next);
+  };
+  const adjust = (direction: 1 | -1) => {
+    if (disabled || readOnly) return;
+    const next = snapSliderValue(displayValue + direction * step, min, max, step);
+    if (next !== displayValue) move(next);
+  };
+  const readout = formatSliderOutput([displayValue], step);
   return (
     <XStack height={height} alignItems="center" width="100%" gap="$3">
       <View
@@ -291,15 +313,20 @@ function SystemSliderControl({
           step={step}
           disabled={disabled}
           minimumTrackTintColor={fill}
-          maximumTrackTintColor={literal(formControlColors.background)}
+          maximumTrackTintColor={literal(trackFill)}
           {...(platform === "android" && { thumbTintColor: fill })}
-          accessibilityLabel={accessibilityLabel}
-          accessibilityHint={accessibilityHint}
-          onValueChange={(next) => {
-            setDisplayValue(next);
-            if (disabled || readOnly) return;
-            onChangeValue(next);
+          accessible
+          accessibilityRole="adjustable"
+          accessibilityLabel={accessibilityLabel ?? fieldA11y?.label ?? t("Slider")}
+          accessibilityHint={accessibilityHint ?? fieldA11y?.description}
+          accessibilityValue={{ min, max, now: displayValue, text: readout }}
+          accessibilityState={{ disabled: Boolean(disabled) }}
+          accessibilityActions={A11Y_ADJUSTABLE_ACTIONS}
+          onAccessibilityAction={(event: { nativeEvent: { actionName: string } }) => {
+            if (event.nativeEvent.actionName === "increment") adjust(1);
+            else if (event.nativeEvent.actionName === "decrement") adjust(-1);
           }}
+          onValueChange={move}
           onSlidingComplete={() => onBlur?.()}
         />
       </View>
@@ -310,7 +337,7 @@ function SystemSliderControl({
         textAlign="right"
         aria-hidden
       >
-        {formatSliderOutput([displayValue], step)}
+        {readout}
       </Paragraph>
     </XStack>
   );
@@ -383,6 +410,7 @@ function SliderControl({
   // with their thumbs (RULINGS-2026-08-28 §R2).
   const radiusStop = radiusStopFromToken(borderRadius);
   const railRadius = resolveRadiusClass("BINARY", radiusStop, { heightPx: TRACK_HEIGHT });
+  const trackFill = useControlTrackFill();
 
   // Native jump tween rides transform (FLIP) — the RN driver cannot animate
   // the thumb's `left` percent (see ./jumpMotion.ts). Web keeps the css
@@ -634,12 +662,12 @@ function SliderControl({
               height={TRACK_HEIGHT}
               borderRadius={railRadius}
             >
-              <TamaguiSlider.Track {...getTrackProps(outlined, railRadius)}>
+              <TamaguiSlider.Track {...getTrackProps(outlined, railRadius, trackFill)}>
                 {trackActive}
               </TamaguiSlider.Track>
             </View>
           ) : (
-            <TamaguiSlider.Track {...getTrackProps(outlined, railRadius)}>
+            <TamaguiSlider.Track {...getTrackProps(outlined, railRadius, trackFill)}>
               {trackActive}
             </TamaguiSlider.Track>
           )}

package/src/fields/Stepper/Stepper.stories.tsx

@@ -188,3 +188,45 @@ export const InTable: Story = {
     );
   },
 };
+
+/** LC-114: a buttonless Stepper with `hug` is the number field. It is as wide as its value plus the currency glyph or unit, and a long signed value with decimals still fits (FZ-7598). */
+export const HuggingCurrency: Story = {
+  render: () => (
+    <YStack gap="$4" width="100%">
+      <Stepper
+        label="Daily loss cap"
+        aria-label="Daily loss cap"
+        currency="USD"
+        hug
+        showButtons={false}
+        min={0}
+        max={50000}
+        precision={2}
+        defaultValue={2500}
+      />
+      <Stepper
+        label="Position limit"
+        aria-label="Position limit"
+        unit="%"
+        hug
+        showButtons={false}
+        min={0}
+        max={100}
+        precision={1}
+        defaultValue={12.5}
+      />
+      <Stepper
+        label="Adjustment"
+        aria-label="Adjustment"
+        currency="USD"
+        hug
+        showButtons={false}
+        min={-9999999}
+        max={9999999}
+        precision={2}
+        defaultValue={-1234567.89}
+      />
+      <Stepper label="Contracts" aria-label="Contracts" hug min={1} max={500} defaultValue={12} />
+    </YStack>
+  ),
+};

package/src/fields/Switch/Switch.spec.tsx

@@ -499,16 +499,20 @@ describe("Switch thumb and pointer paint", () => {
     expect(paint(track, "_bg-")).toBe("var(--switchTrackOff)");
   });
 
-  it.each([false, true])("grown=%s changes only the outlined ring on hover", (grown) => {
-    const { frame, track } = mount({ grown, outlined: true });
-    expect(track.className).toContain("_bg-transparent");
-    expect(paint(track, "_btc-")).toBe("var(--switchTrackOff)");
-    fireEvent.mouseEnter(frame);
-    expect(track.className).toContain("_bg-transparent");
-    expect(paint(track, "_btc-")).toBe("var(--switchTrackOffHover)");
-    fireEvent.mouseLeave(frame);
-    expect(paint(track, "_btc-")).toBe("var(--switchTrackOff)");
-  });
+  it.each([false, true])(
+    "grown=%s keeps the outlined ring on its 3:1 edge and washes the track on hover (LC-299)",
+    (grown) => {
+      const { frame, track } = mount({ grown, outlined: true });
+      expect(track.className).toContain("_bg-transparent");
+      expect(paint(track, "_btc-")).toBe("var(--switchTrackOffBorder)");
+      fireEvent.mouseEnter(frame);
+      expect(paint(track, "_bg-")).toBe("var(--switchTrackOffHover)");
+      expect(paint(track, "_btc-")).toBe("var(--switchTrackOffBorder)");
+      fireEvent.mouseLeave(frame);
+      expect(track.className).toContain("_bg-transparent");
+      expect(paint(track, "_btc-")).toBe("var(--switchTrackOffBorder)");
+    },
+  );
 
   it("composes the caller's mouse handlers once", () => {
     const onMouseEnter = vi.fn();

package/src/fields/Switch/index.tsx

@@ -198,7 +198,7 @@ const SwitchFrameStyled = styled(View, {
         borderRadius: 1000,
         backgroundColor: formSwitchColors.track.off,
         borderWidth: 0,
-        borderColor: formSwitchColors.track.off,
+        borderColor: formSwitchColors.track.offBorder,
         outlineWidth: 0,
         focusStyle: { outlineWidth: 0 },
         // LC-71: ring is painted from keyboard modality on the track, never
@@ -214,7 +214,7 @@ const SwitchFrameStyled = styled(View, {
       },
       false: {
         backgroundColor: formSwitchColors.track.off,
-        borderColor: formSwitchColors.track.off,
+        borderColor: formSwitchColors.track.offBorder,
       },
     },
 
@@ -406,6 +406,8 @@ function SwitchControl({
     : hovered
       ? formSwitchColors.track.offHover
       : formSwitchColors.track.off;
+  const offFill = outlined && !hovered && !pressed ? "transparent" : offPaint;
+  const offRing = outlined ? undefined : knobProps.trackRing;
   const { thumbInset, thumbSize, travel: dragDistance } = footprint;
   const motion = resolveSwitchMotion(transition);
   const [dragX, setDragX] = useState<number | null>(null);
@@ -562,8 +564,9 @@ function SwitchControl({
               borderColor: formSwitchColors.track.on,
             }
           : {
-              backgroundColor: outlined ? "transparent" : offPaint,
-              borderColor: offPaint,
+              backgroundColor: offFill,
+              borderColor: formSwitchColors.track.offBorder,
+              ...offRing,
             })}
       {...(kbFocus ? { "data-kb-focus": "true" } : undefined)}
       {...(frameClassName ? { className: frameClassName } : undefined)}
@@ -653,10 +656,11 @@ function SwitchControl({
           borderRadius={cellTrack.borderRadius}
           {...radiusResolution}
           borderWidth={cellTrack.borderWidth}
-          borderColor={displayChecked ? formSwitchColors.track.on : offPaint}
-          backgroundColor={
-            displayChecked ? formSwitchColors.track.on : outlined ? "transparent" : offPaint
+          borderColor={
+            displayChecked ? formSwitchColors.track.on : formSwitchColors.track.offBorder
           }
+          backgroundColor={displayChecked ? formSwitchColors.track.on : offFill}
+          {...(displayChecked ? undefined : offRing)}
           {...transitionProps({ ...knobProps.motion.control, transition: motion }, ["borderWidth"])}
           pointerEvents="none"
           className={kbFocus ? SWITCH_KB_RING_CLASS : undefined}

package/src/fields/TimePicker/parts.tsx

@@ -160,11 +160,6 @@ export function TimePickerInputTrigger({
         onPress={isWeb && interactive ? onOpen : undefined}
         {...(disabled ? { opacity: 0.5, pointerEvents: "none" as const } : undefined)}
       >
-        <InputParts.Section data-testid="time-picker-glyph">
-          <InputParts.Icon adornment="leading" color={formCommonColors.muted}>
-            {clockIcon ?? <ClockIcon />}
-          </InputParts.Icon>
-        </InputParts.Section>
         <InputParts.Section>
           <InputParts.Area
             readOnly
@@ -174,7 +169,6 @@ export function TimePickerInputTrigger({
             placeholder={placeholder}
             disabled={disabled}
             color={formCommonColors.text}
-            placeholderTextColor={formCommonColors.muted}
             aria-label={ariaLabel}
             aria-required={ariaRequired}
             aria-invalid={ariaInvalid}
@@ -196,11 +190,17 @@ export function TimePickerInputTrigger({
             }
           />
         </InputParts.Section>
-        {value && isWeb && !readOnly ? (
+        {value && isWeb && !readOnly && !disabled ? (
           <InputParts.Section>
             <TimePickerClearButton onClear={onClear} disabled={disabled} />
           </InputParts.Section>
-        ) : null}
+        ) : (
+          <InputParts.Section data-testid="time-picker-glyph">
+            <InputParts.Icon adornment="trailing" color={formCommonColors.muted}>
+              {clockIcon ?? <ClockIcon />}
+            </InputParts.Icon>
+          </InputParts.Section>
+        )}
       </InputParts.Box>
     </View>
   );

package/src/fields/ToggleGroup/index.tsx

@@ -25,7 +25,12 @@ import {
 } from "tamagui";
 import { Skeleton } from "../../Skeleton";
 import { Field, FieldLayout } from "../../fieldLayout";
-import { formButtonColors, formCommonColors, formInputColors } from "../../shared/colorRamps";
+import {
+  formButtonColors,
+  formCommonColors,
+  formControlColors,
+  formInputColors,
+} from "../../shared/colorRamps";
 import { warnBareDisabled } from "../../shared/devWarn";
 import { choiceItemA11y, composeA11yName } from "../../shared/nativeA11y";
 import { loadSystemSegmentedControl } from "../../shared/systemControlModules";
@@ -693,6 +698,7 @@ export function ToggleGroup({
           {...toggleProps}
           {...knobProps.borderRadius}
           {...knobProps.inputSurface}
+          borderColor={formControlColors.edge}
           overflow="hidden"
           backgroundColor={knobProps.outlined ? "transparent" : formInputColors.background.base}
           {...(isWeb