@marimo-team/islands 0.25.2-dev0 → 0.25.2-dev100

package/src/plugins/impl/__test__/slider-labels.test.tsx

@@ -0,0 +1,136 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, test, vi } from "vitest";
+import { SetupMocks } from "@/__mocks__/common";
+import { SliderPlugin } from "../SliderPlugin";
+
+SetupMocks.resizeObserver();
+const plugin = new SliderPlugin();
+function props(label: string | null) {
+  return {
+    host: document.createElement("div"),
+    value: 5,
+    setValue: vi.fn(),
+    functions: {},
+    data: plugin.validator.parse({
+      initialValue: 5,
+      start: 0,
+      stop: 10,
+      step: 1,
+      steps: null,
+      label,
+    }),
+  };
+}
+
+describe("SliderPlugin accessible labels", () => {
+  test("names the actual thumb from formatted labels and updates its reference", () => {
+    const initial = props("<strong>Price &amp; tax</strong>");
+    const { rerender } = render(plugin.render(initial));
+    const thumb = screen.getByRole("slider", { name: "Price & tax" });
+    const labelId = thumb.getAttribute("aria-labelledby");
+    rerender(
+      plugin.render({
+        ...initial,
+        data: { ...initial.data, label: "Updated price" },
+      }),
+    );
+    const updatedThumb = screen.getByRole("slider", { name: "Updated price" });
+    expect(updatedThumb).toHaveAccessibleName("Updated price");
+    expect(updatedThumb).toHaveAttribute("aria-labelledby", labelId);
+    rerender(
+      plugin.render({ ...initial, data: { ...initial.data, label: null } }),
+    );
+    expect(screen.getByRole("slider")).toHaveAccessibleName("Slider");
+    expect(screen.getByRole("slider")).not.toHaveAttribute("aria-labelledby");
+  });
+
+  test.each([null, ""])("retains a fallback name for label %s", (label) => {
+    render(plugin.render(props(label)));
+    expect(screen.getByRole("slider")).toHaveAccessibleName("Slider");
+  });
+
+  test("keeps repeated widget labels independently associated", () => {
+    render(
+      <>
+        {plugin.render(props("Price"))}
+        {plugin.render(props("Price"))}
+      </>,
+    );
+    const thumbs = screen.getAllByRole("slider", { name: "Price" });
+    expect(thumbs).toHaveLength(2);
+    expect(thumbs[0].getAttribute("aria-labelledby")).not.toBe(
+      thumbs[1].getAttribute("aria-labelledby"),
+    );
+  });
+
+  test.each([false, true])(
+    "preserves keyboard commits with debounce=%s",
+    (debounce) => {
+      const initial = props("Price");
+      render(
+        plugin.render({ ...initial, data: { ...initial.data, debounce } }),
+      );
+      fireEvent.keyDown(screen.getByRole("slider"), { key: "ArrowRight" });
+      expect(initial.setValue).toHaveBeenCalledWith(6);
+    },
+  );
+
+  test("preserves maximum and minimum keyboard boundaries", () => {
+    const initial = props("Price");
+    const { rerender } = render(plugin.render({ ...initial, value: 10 }));
+    fireEvent.keyDown(screen.getByRole("slider"), { key: "ArrowRight" });
+    expect(initial.setValue).not.toHaveBeenCalled();
+    rerender(plugin.render({ ...initial, value: 0 }));
+    fireEvent.keyDown(screen.getByRole("slider"), { key: "ArrowLeft" });
+    expect(initial.setValue).not.toHaveBeenCalled();
+  });
+
+  test("retains the name while disabled and removes keyboard focusability", () => {
+    const initial = props("Price");
+    render(
+      plugin.render({ ...initial, data: { ...initial.data, disabled: true } }),
+    );
+    const thumb = screen.getByRole("slider", { name: "Price" });
+    expect(thumb).not.toHaveAttribute("tabindex");
+    expect(thumb).toHaveAttribute("data-disabled");
+  });
+
+  test("preserves vertical keyboard interaction", () => {
+    const initial = props("Price");
+    render(
+      plugin.render({
+        ...initial,
+        data: { ...initial.data, orientation: "vertical" },
+      }),
+    );
+    const thumb = screen.getByRole("slider", { name: "Price" });
+    expect(thumb).toHaveAttribute("aria-orientation", "vertical");
+    fireEvent.keyDown(thumb, { key: "ArrowUp" });
+    expect(initial.setValue).toHaveBeenCalledWith(6);
+  });
+
+  test("preserves mapped values while naming the index-space thumb", () => {
+    const initial = props("Mapped price");
+    render(
+      plugin.render({
+        ...initial,
+        value: 1,
+        data: {
+          ...initial.data,
+          start: 0,
+          stop: 2,
+          steps: [10, 20, 50],
+          showValue: true,
+        },
+      }),
+    );
+    expect(screen.getByText("20")).toBeInTheDocument();
+    fireEvent.keyDown(screen.getByRole("slider", { name: "Mapped price" }), {
+      key: "ArrowRight",
+    });
+    expect(initial.setValue).toHaveBeenCalledWith(2);
+    expect(screen.getByRole("slider")).toHaveAttribute("aria-valuenow", "2");
+    expect(screen.getByRole("tooltip")).toHaveTextContent("50");
+  });
+});

package/src/plugins/impl/__test__/text-labels.test.tsx

@@ -0,0 +1,141 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import { expect, test, vi } from "vitest";
+import type { IPlugin } from "../../types";
+import { TextInputPlugin } from "../TextInputPlugin";
+import { TextAreaPlugin } from "../TextAreaPlugin";
+
+function testLabelBehavior<D extends { label: string | null }>(
+  plugin: IPlugin<string, D>,
+) {
+  for (const debounce of [false, true, 200]) {
+    test(`${plugin.tagName} associates formatted label with debounce=${debounce}`, () => {
+      const setValue = vi.fn();
+      const props = {
+        host: document.createElement("div"),
+        value: "",
+        setValue,
+        functions: {},
+        data: plugin.validator.parse({
+          initialValue: "",
+          placeholder: "",
+          label: "<strong>Notes &amp; details</strong>",
+          debounce,
+        }),
+      };
+      const { rerender } = render(plugin.render(props));
+      const control = screen.getByLabelText("Notes & details");
+      expect(control).toHaveAccessibleName("Notes & details");
+      const id = control.id;
+      rerender(
+        plugin.render({
+          ...props,
+          data: { ...props.data, label: "Updated notes" },
+        }),
+      );
+      expect(screen.getByLabelText("Updated notes").id).toBe(id);
+      rerender(
+        plugin.render({ ...props, data: { ...props.data, label: null } }),
+      );
+      expect(control).toHaveAccessibleName("");
+    });
+    test(`${plugin.tagName} preserves commit timing with debounce=${debounce}`, () => {
+      vi.useFakeTimers();
+      try {
+        const setValue = vi.fn();
+        const props = {
+          host: document.createElement("div"),
+          value: "",
+          setValue,
+          functions: {},
+          data: plugin.validator.parse({
+            initialValue: "",
+            placeholder: "",
+            label: "Notes",
+            debounce,
+          }),
+        };
+        render(plugin.render(props));
+        const control = screen.getByLabelText("Notes");
+        if (debounce === false) {
+          fireEvent.input(control, { target: { value: "hello" } });
+        } else {
+          fireEvent.change(control, { target: { value: "hello" } });
+        }
+        const immediateCalls = debounce === false ? 1 : 0;
+        expect(setValue).toHaveBeenCalledTimes(immediateCalls);
+        act(() => vi.advanceTimersByTime(199));
+        expect(setValue).toHaveBeenCalledTimes(immediateCalls);
+        if (debounce === true) {
+          fireEvent.blur(control);
+        } else if (typeof debounce === "number") {
+          act(() => vi.advanceTimersByTime(1));
+        }
+        expect(setValue).toHaveBeenCalledWith("hello");
+      } finally {
+        vi.useRealTimers();
+      }
+    });
+  }
+}
+
+for (const kind of ["text", "password", "email", "url"] as const) {
+  test(`native association preserves ${kind} input attributes`, () => {
+    const plugin = new TextInputPlugin();
+    render(
+      plugin.render({
+        host: document.createElement("div"),
+        value: "",
+        setValue: vi.fn(),
+        functions: {},
+        data: plugin.validator.parse({
+          initialValue: "",
+          placeholder: "",
+          label: "Account",
+          kind,
+          disabled: true,
+          minLength: 2,
+          maxLength: 30,
+        }),
+      }),
+    );
+    const control = screen.getByLabelText("Account");
+    expect(control).toHaveAttribute("type", kind);
+    expect(control).toBeDisabled();
+    expect(control).toBeRequired();
+    expect(control).toHaveAttribute("minlength", "2");
+    expect(control).toHaveAttribute("maxlength", "30");
+  });
+}
+
+function testMultipleInstances<D>(plugin: IPlugin<string, D>) {
+  test(`${plugin.tagName} keeps repeated labels independently associated`, () => {
+    const props = {
+      host: document.createElement("div"),
+      value: "",
+      setValue: vi.fn(),
+      functions: {},
+      data: plugin.validator.parse({
+        initialValue: "",
+        placeholder: "",
+        label: "Notes",
+      }),
+    };
+    render(
+      <>
+        {plugin.render(props)}
+        {plugin.render(props)}
+      </>,
+    );
+    const controls = screen.getAllByLabelText("Notes");
+    expect(controls).toHaveLength(2);
+    expect(controls[0].id).not.toBe(controls[1].id);
+    expect(controls[0]).toHaveAccessibleName("Notes");
+    expect(controls[1]).toHaveAccessibleName("Notes");
+  });
+}
+
+testLabelBehavior(new TextInputPlugin());
+testLabelBehavior(new TextAreaPlugin());
+testMultipleInstances(new TextInputPlugin());
+testMultipleInstances(new TextAreaPlugin());

package/src/plugins/impl/__tests__/DataTablePlugin.test.tsx

@@ -4,11 +4,17 @@ import { Tooltip } from "radix-ui";
 
 const TooltipProvider = Tooltip.Provider;
 
-import { act, render, screen, waitFor } from "@testing-library/react";
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react";
 import { Provider } from "jotai";
 import { beforeAll, beforeEach, describe, expect, it, vi } from "vitest";
 import { SetupMocks } from "@/__mocks__/common";
-import type { DownloadAsArgs } from "@/components/data-table/schemas";
+import type { DownloadAsFunction } from "@/components/data-table/schemas";
 import type { FieldTypesWithExternalType } from "@/components/data-table/types";
 import { store } from "@/core/state/jotai";
 import {
@@ -19,6 +25,10 @@ import {
 
 // Default to normal (non-static) mode; individual tests flip this on.
 const mockIsStatic = vi.fn().mockReturnValue(false);
+vi.mock("@/utils/download", () => ({
+  downloadByURL: vi.fn(),
+  withLoadingToast: vi.fn(async (_title, callback) => callback()),
+}));
 vi.mock("@/core/static/static-state", async (importOriginal) => {
   const actual =
     await importOriginal<typeof import("@/core/static/static-state")>();
@@ -30,9 +40,15 @@ beforeAll(() => {
 });
 
 describe("LoadingDataTableComponent", () => {
-  it("keeps data columns when inferred types include a row header", async () => {
+  it("keeps data columns and routes each export to its RPC", async () => {
     const host = document.createElement("div");
     const data = JSON.stringify([{ index: "first", value: 1 }]);
+    const downloadAs = vi
+      .fn()
+      .mockResolvedValue({ url: "export", filename: "table.csv" });
+    const downloadGeoJSON = vi
+      .fn()
+      .mockResolvedValue({ url: "export", filename: "table.geojson" });
 
     render(
       <Provider store={store}>
@@ -43,7 +59,7 @@ describe("LoadingDataTableComponent", () => {
             pagination={false}
             pageSize={10}
             selection={null}
-            showDownload={false}
+            showDownload={true}
             showFilters={false}
             showColumnSummaries={false}
             showDataTypes={false}
@@ -68,7 +84,22 @@ describe("LoadingDataTableComponent", () => {
               cell_styles: null,
               cell_hover_texts: null,
             })}
-            download_as={vi.fn() as DownloadAsArgs}
+            download_as={downloadAs}
+            download_geojson={downloadGeoJSON}
+            get_export_metadata={vi.fn().mockResolvedValue({
+              geometry_columns: [
+                { name: "value", encoding: "objects", crs: "EPSG:4326" },
+              ],
+              primary_geometry_column: "value",
+              default_geometry_column: "value",
+              formats: {
+                geojson: {
+                  available: true,
+                  reason: null,
+                  missing_packages: [],
+                },
+              },
+            })}
             get_column_summaries={vi.fn()}
             get_data_url={vi.fn() as GetDataUrl}
             get_row_ids={vi.fn() as GetRowIds}
@@ -83,6 +114,26 @@ describe("LoadingDataTableComponent", () => {
         screen.getByRole("columnheader", { name: "value" }),
       ).toBeInTheDocument();
     });
+    fireEvent.click(screen.getByTestId("export-button"));
+    await screen.findByRole("dialog", { name: "Export table" });
+    await waitFor(() =>
+      expect(
+        screen.getByRole("button", { name: "Download GeoJSON" }),
+      ).toBeEnabled(),
+    );
+    fireEvent.click(screen.getByRole("button", { name: "Download GeoJSON" }));
+    await waitFor(() =>
+      expect(downloadGeoJSON).toHaveBeenCalledWith({
+        format: "geojson",
+        geometry_column: "value",
+      }),
+    );
+    expect(downloadAs).not.toHaveBeenCalled();
+    fireEvent.click(screen.getByRole("button", { name: "Download CSV" }));
+    await waitFor(() =>
+      expect(downloadAs).toHaveBeenCalledWith({ format: "csv" }),
+    );
+    expect(downloadGeoJSON).toHaveBeenCalledTimes(1);
   });
 
   it("does not log duplicate keys when a pivot becomes empty", async () => {
@@ -122,7 +173,9 @@ describe("LoadingDataTableComponent", () => {
       showSearch: false,
       value: [] as (number | string | { rowId: string; columnName?: string })[],
       setValue: vi.fn(),
-      download_as: vi.fn() as DownloadAsArgs,
+      download_as: vi.fn() as DownloadAsFunction,
+      download_geojson: vi.fn(),
+      get_export_metadata: vi.fn(),
       get_column_summaries: vi.fn(),
       get_data_url: vi.fn() as GetDataUrl,
       get_row_ids: vi.fn() as GetRowIds,
@@ -263,7 +316,9 @@ describe("LoadingDataTableComponent", () => {
       showSearch: true,
       value: [] as (number | string | { rowId: string; columnName?: string })[],
       setValue,
-      download_as: vi.fn() as DownloadAsArgs,
+      download_as: vi.fn() as DownloadAsFunction,
+      download_geojson: vi.fn(),
+      get_export_metadata: vi.fn(),
       get_column_summaries: vi.fn().mockResolvedValue({
         data: null,
         stats: {},
@@ -379,7 +434,9 @@ describe("static notebook control suppression", () => {
         cell_styles: null,
         cell_hover_texts: null,
       }),
-      download_as: vi.fn() as DownloadAsArgs,
+      download_as: vi.fn() as DownloadAsFunction,
+      download_geojson: vi.fn(),
+      get_export_metadata: vi.fn(),
       get_column_summaries: vi.fn().mockResolvedValue({
         data: null,
         stats: {},

package/src/plugins/impl/__tests__/FileBrowserPlugin.test.tsx

@@ -1,6 +1,12 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import {
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+  within,
+} from "@testing-library/react";
 import { beforeAll, describe, expect, it, vi } from "vitest";
 import { SetupMocks } from "@/__mocks__/common";
 import { initialModeAtom } from "@/core/mode";
@@ -187,7 +193,7 @@ describe("FileBrowserPlugin keyboard accessibility", () => {
     const docsRow = docs.closest('[role="row"]')!;
     fireEvent.keyDown(docsRow, { key: "ArrowDown" }); // move active off the parent
     fireEvent.click(docs); // navigate into "docs"
-    await screen.findByText("docs"); // listing reloads (mock returns same files)
+    await within(screen.getByRole("grid")).findByText("docs"); // listing reloads (mock returns same files)
     const rows = screen.getAllByRole("row");
     expect(rows[0]).toHaveAttribute("tabindex", "0");
     // the focused row must match the only tabbable row
@@ -361,3 +367,80 @@ describe("FileBrowserPlugin keyboard accessibility", () => {
 function rowFor(name: string): HTMLElement {
   return screen.getByText(name).closest('[role="row"]') as HTMLElement;
 }
+
+describe("FileBrowserPlugin breadcrumbs", () => {
+  function breadcrumbs() {
+    return within(
+      screen.getByRole("navigation", { name: "Current directory" }),
+    );
+  }
+
+  it("renders a crumb per ancestor with the current directory last", async () => {
+    renderBrowser();
+    await screen.findByText("docs");
+    const items = breadcrumbs().getAllByRole("listitem");
+    expect(items.map((li) => li.textContent)).toEqual(["/", "home", "user"]);
+    expect(breadcrumbs().getByRole("button", { name: "user" })).toHaveAttribute(
+      "aria-current",
+      "page",
+    );
+    expect(
+      breadcrumbs().getByRole("button", { name: "home" }),
+    ).not.toHaveAttribute("aria-current");
+  });
+
+  it("keeps focus on a crumb after navigating to it", async () => {
+    const { listDirectory } = renderBrowser();
+    await screen.findByText("docs");
+    const home = breadcrumbs().getByRole("button", { name: "home" });
+    home.focus();
+    fireEvent.click(home);
+    await waitFor(() =>
+      expect(listDirectory).toHaveBeenLastCalledWith({ path: "/home" }),
+    );
+    const current = breadcrumbs().getByRole("button", { name: "home" });
+    expect(current).toHaveAttribute("aria-current", "page");
+    expect(current).toBe(home);
+    expect(current).toHaveFocus();
+  });
+
+  it("does not reload when the current crumb is clicked", async () => {
+    const { listDirectory } = renderBrowser();
+    await screen.findByText("docs");
+    fireEvent.click(breadcrumbs().getByRole("button", { name: "user" }));
+    expect(listDirectory).toHaveBeenCalledTimes(1);
+  });
+
+  it("navigates to an ancestor when a crumb is clicked", async () => {
+    const { listDirectory } = renderBrowser();
+    await screen.findByText("docs");
+    fireEvent.click(breadcrumbs().getByRole("button", { name: "home" }));
+    await waitFor(() =>
+      expect(listDirectory).toHaveBeenLastCalledWith({ path: "/home" }),
+    );
+    fireEvent.click(breadcrumbs().getByRole("button", { name: "/" }));
+    await waitFor(() =>
+      expect(listDirectory).toHaveBeenLastCalledWith({ path: "/" }),
+    );
+  });
+
+  it("hides ancestors outside the initial path when navigation is restricted", async () => {
+    render(
+      <FileBrowser
+        initialPath="/home/user"
+        filetypes={[]}
+        selectionMode="all"
+        multiple={true}
+        label={null}
+        restrictNavigation={true}
+        value={[]}
+        setValue={vi.fn()}
+        host={document.createElement("div")}
+        list_directory={mockListDirectory(FILES)}
+      />,
+    );
+    await screen.findByText("docs");
+    const items = breadcrumbs().getAllByRole("listitem");
+    expect(items.map((li) => li.textContent)).toEqual(["user"]);
+  });
+});

package/src/plugins/impl/__tests__/widget-labels.test.tsx

@@ -0,0 +1,122 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { render } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { initialModeAtom } from "@/core/mode";
+import { store } from "@/core/state/jotai";
+import { DatePickerPlugin } from "../DatePickerPlugin";
+import { DateRangePickerPlugin } from "../DateRangePlugin";
+import { DateTimePickerPlugin } from "../DateTimePickerPlugin";
+
+const sharedProps = () => ({
+  host: document.createElement("div"),
+  setValue: vi.fn(),
+  functions: {},
+});
+
+const widgets = [
+  {
+    name: "date",
+    role: "group",
+    fallback: "date picker",
+    render: (label: string | null, disabled = false) =>
+      new DatePickerPlugin().render({
+        ...sharedProps(),
+        value: "2026-10-02",
+        data: {
+          label,
+          disabled,
+          start: "2026-01-01",
+          stop: "2026-12-31",
+          fullWidth: false,
+        },
+      }),
+  },
+  {
+    name: "datetime",
+    role: "group",
+    fallback: "date time picker",
+    render: (label: string | null, disabled = false) =>
+      new DateTimePickerPlugin().render({
+        ...sharedProps(),
+        value: "2026-10-02T12:00:00",
+        data: {
+          label,
+          disabled,
+          start: "2026-01-01T00:00:00",
+          stop: "2026-12-31T23:59:59",
+          precision: "minute",
+          fullWidth: false,
+        },
+      }),
+  },
+  {
+    name: "date range",
+    role: "group",
+    fallback: "date range picker",
+    render: (label: string | null, disabled = false) =>
+      new DateRangePickerPlugin().render({
+        ...sharedProps(),
+        value: ["2026-10-02", "2026-10-03"],
+        data: {
+          label,
+          disabled,
+          start: "2026-01-01",
+          stop: "2026-12-31",
+          fullWidth: false,
+        },
+      }),
+  },
+];
+
+beforeEach(() => store.set(initialModeAtom, "edit"));
+
+describe.each(widgets)("$name accessible labels", (widget) => {
+  it("uses rendered formatting and decoded entities, and follows label updates", () => {
+    const { getByRole, rerender } = render(
+      widget.render("<span>Visit <strong>date</strong> &amp; time</span>"),
+    );
+    expect(getByRole(widget.role, { name: "Visit date & time" })).toBeTruthy();
+    rerender(widget.render("<span>Updated <em>label</em></span>"));
+    expect(getByRole(widget.role, { name: "Updated label" })).toBeTruthy();
+    rerender(widget.render(null));
+    expect(getByRole(widget.role, { name: widget.fallback })).toBeTruthy();
+  });
+
+  it.each([null, ""])("uses the fallback when label is %s", (label) => {
+    const { getByRole } = render(widget.render(label));
+    expect(getByRole(widget.role, { name: widget.fallback })).toBeTruthy();
+  });
+
+  it("names the calendar button and every editable segment", () => {
+    const { getByRole, getAllByRole } = render(
+      widget.render("<strong>Visit</strong> &amp; time"),
+    );
+    expect(getByRole("button", { name: "Calendar Visit & time" })).toBeTruthy();
+    for (const segment of getAllByRole("spinbutton")) {
+      expect(segment).toHaveAccessibleName(/Visit & time/);
+    }
+  });
+
+  it("preserves disabled controls with a formatted label", () => {
+    const { getByRole, getAllByRole } = render(
+      widget.render("<strong>Visit</strong>", true),
+    );
+    expect(getByRole("button", { name: "Calendar Visit" })).toBeDisabled();
+    for (const segment of getAllByRole("spinbutton")) {
+      expect(segment).toHaveAttribute("aria-disabled", "true");
+    }
+  });
+
+  it("keeps labels distinct for multiple widgets", () => {
+    const { getByRole } = render(
+      <>
+        {widget.render("First")}
+        {widget.render("Second")}
+      </>,
+    );
+    expect(getByRole(widget.role, { name: "First" })).not.toBe(
+      getByRole(widget.role, { name: "Second" }),
+    );
+  });
+});

package/src/plugins/impl/chat/ChatPlugin.tsx

@@ -27,7 +27,7 @@ const messageSchema = z.array(
     role: z.enum(["system", "user", "assistant"]),
     content: z.string().nullable(),
     parts: z.array(z.any()),
-    metadata: z.any().nullable(),
+    metadata: z.any().optional(),
   }),
 );
 

package/src/plugins/impl/common/labeled.tsx

@@ -9,7 +9,8 @@ interface Props {
   label: string | null | undefined;
   className?: string;
   labelClassName?: string;
-  id?: string;
+  labelId?: string;
+  controlId?: string;
   fullWidth?: boolean;
   /**
    * Align the label to the top, left, or right of the component.
@@ -27,8 +28,9 @@ export const Labeled: React.FC<PropsWithChildren<Props>> = ({
   align = "left",
   className,
   labelClassName,
+  labelId,
   fullWidth,
-  id,
+  controlId,
 }) => {
   // If fullWidth is true, force align to be "top"
   if (fullWidth) {
@@ -45,7 +47,11 @@ export const Labeled: React.FC<PropsWithChildren<Props>> = ({
 
   const labelElement = (
     <div part="label" className="inline-flex items-center m-0 p-0">
-      <Label htmlFor={id} className={cn("font-prose", labelClassName)}>
+      <Label
+        id={labelId}
+        htmlFor={controlId}
+        className={cn("font-prose", labelClassName)}
+      >
         {renderHTML({ html: label })}
       </Label>
     </div>