diff --git a/apps/docs/content/blog/v2.6.0.mdx b/apps/docs/content/blog/v2.6.0.mdx
index f492d96b2f..605f460753 100644
--- a/apps/docs/content/blog/v2.6.0.mdx
+++ b/apps/docs/content/blog/v2.6.0.mdx
@@ -610,32 +610,25 @@ We try to keep the breaking changes to a minimum, but sometimes it's necessary t
 
 The nested group selectors for table themes have been updated to require explicit element selectors. You'll need to add `/tr` or `/th` to custom styles for group-data.
 
-Before:
 
-```css
-group-data-[disabled=true]: text-foreground-300;
-```
-
-After:
+```diff-tsx
+// Before
+- group-data-[disabled=true]:text-foreground-300;
 
-```css
-group-data-[disabled=true]/tr: text-foreground-300;
+// After
++ group-data-[disabled=true]/tr:text-foreground-300;
 ```
 
 #### Circular Progress Theme Location
 
-The circular progress Tailwind variants have been moved from `circular-progress` to `progress`. You'll need to update your Tailwind CSS configuration:
-
-Before:
-
-```js
-"./node_modules/@nextui-org/theme/dist/components/circular-progress.js";
-```
+The circular progress Tailwind variants have been moved from `circular-progress` to `progress`. You'll need to update your Tailwind CSS configuration `tailwind.config.js`:
 
-After:
+```diff-tsx
+// Before
+- "./node_modules/@nextui-org/theme/dist/components/circular-progress.js";
 
-```js
-"./node_modules/@nextui-org/theme/dist/components/progress.js";
+// After
++ "./node_modules/@nextui-org/theme/dist/components/progress.js";
 ```
 
 <Spacer y={4} />
diff --git a/apps/docs/content/components/form/form-usage.raw.jsx b/apps/docs/content/components/form/form-usage.raw.jsx
new file mode 100644
index 0000000000..f8af6d3de3
--- /dev/null
+++ b/apps/docs/content/components/form/form-usage.raw.jsx
@@ -0,0 +1,35 @@
+import {Form, Input, Button} from "@nextui-org/react";
+
+export default function App() {
+  const [submitted, setSubmitted] = React.useState(null);
+
+  const onSubmit = (e) => {
+    e.preventDefault();
+
+    const data = Object.fromEntries(new FormData(e.currentTarget));
+
+    setSubmitted(data);
+  };
+
+  return (
+    <Form className="w-full max-w-xs" validationBehavior="native" onSubmit={onSubmit}>
+      <Input
+        isRequired
+        errorMessage="Please enter a valid email"
+        label="Email"
+        labelPlacement="outside"
+        name="email"
+        placeholder="Enter your email"
+        type="email"
+      />
+      <Button type="submit" variant="bordered">
+        Submit
+      </Button>
+      {submitted && (
+        <div className="text-small text-default-500">
+          You submitted: <code>{JSON.stringify(submitted)}</code>
+        </div>
+      )}
+    </Form>
+  );
+}
diff --git a/apps/docs/content/components/form/real-time-validation.raw.jsx b/apps/docs/content/components/form/real-time-validation.raw.jsx
index f41eacd57d..77fdbd9cdc 100644
--- a/apps/docs/content/components/form/real-time-validation.raw.jsx
+++ b/apps/docs/content/components/form/real-time-validation.raw.jsx
@@ -16,6 +16,7 @@ export default function App() {
 
   return (
     <Input
+      className="max-w-xs"
       errorMessage={() => (
         <ul>
           {errors.map((error, i) => (
diff --git a/apps/docs/content/components/form/usage.ts b/apps/docs/content/components/form/usage.ts
index 1118304c37..0e1780d311 100644
--- a/apps/docs/content/components/form/usage.ts
+++ b/apps/docs/content/components/form/usage.ts
@@ -1,4 +1,4 @@
-import App from "./usage.raw.jsx?raw";
+import App from "./form-usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/input-otp/input-otp-required.raw.jsx b/apps/docs/content/components/input-otp/input-otp-required.raw.jsx
new file mode 100644
index 0000000000..c954a62e6c
--- /dev/null
+++ b/apps/docs/content/components/input-otp/input-otp-required.raw.jsx
@@ -0,0 +1,32 @@
+import {Button, InputOtp, Form} from "@nextui-org/react";
+
+export default function App() {
+  const [otp, setOtp] = React.useState("");
+
+  return (
+    <Form
+      className="flex w-full flex-col items-start gap-4"
+      validationBehavior="native"
+      onSubmit={(e) => {
+        e.preventDefault();
+        const formData = new FormData(e.currentTarget);
+        const otp = formData.get("otp");
+
+        setOtp(otp);
+      }}
+    >
+      <InputOtp
+        isRequired
+        aria-label="OTP input field"
+        length={4}
+        name="otp"
+        placeholder="Enter code"
+        validationBehavior="native"
+      />
+      <Button size="sm" type="submit" variant="bordered">
+        Submit
+      </Button>
+      {otp && <div className="text-small text-default-500">OTP submitted: {otp}</div>}
+    </Form>
+  );
+}
diff --git a/apps/docs/content/components/input-otp/required.ts b/apps/docs/content/components/input-otp/required.ts
index b50b781e6f..bdd0d62eee 100644
--- a/apps/docs/content/components/input-otp/required.ts
+++ b/apps/docs/content/components/input-otp/required.ts
@@ -1,4 +1,4 @@
-import App from "./required.raw.jsx?raw";
+import App from "./input-otp-required.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,