diff --git a/packages/tabs/__tests__/tabs.test.tsx b/packages/tabs/__tests__/tabs.test.tsx
index 7ead0ac97..3ee45273e 100644
--- a/packages/tabs/__tests__/tabs.test.tsx
+++ b/packages/tabs/__tests__/tabs.test.tsx
@@ -13,6 +13,46 @@ import {
} from "@reach/tabs";
describe("", () => {
+ describe("rendering", () => {
+ it("sets the button type to button by default", () => {
+ const { getByText } = render(
+
+
+
+ Tab 1
+
+
+
+ Panel 1
+
+
+
+
+ );
+
+ expect(getByText("Tab 1")).toHaveAttribute("type", "button");
+ });
+
+ it("allows a custom button type", () => {
+ const { getByText } = render(
+
+
+
+ Tab 1
+
+
+
+ Panel 1
+
+
+
+
+ );
+
+ expect(getByText("Tab 1")).toHaveAttribute("type", "submit");
+ });
+ });
+
describe("a11y", () => {
it("should not have basic a11y issues", async () => {
const { container } = render(
diff --git a/packages/tabs/src/index.tsx b/packages/tabs/src/index.tsx
index 427f50e3e..dc81a158d 100644
--- a/packages/tabs/src/index.tsx
+++ b/packages/tabs/src/index.tsx
@@ -455,6 +455,8 @@ export const Tab = forwardRefWithAs<
context: TabsDescendantsContext,
disabled: !!disabled,
});
+ const htmlType =
+ Comp === "button" && props.type == null ? "button" : props.type;
const isSelected = index === selectedIndex;
@@ -507,6 +509,7 @@ export const Tab = forwardRefWithAs<
onClick={onSelect}
onFocus={handleFocus}
onBlur={handleBlur}
+ type={htmlType}
>
{children}