fix(form): use native as default validation behavior

.changeset/flat-ducks-attack.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/form": minor
+---
+
+changed form default validation behavior to native

apps/docs/content/components/form/controlled.raw.jsx

@@ -13,7 +13,7 @@ export default function App() {
   };
 
   return (
-    <Form className="w-full max-w-xs" validationBehavior="native" onSubmit={onSubmit}>
+    <Form className="w-full max-w-xs" onSubmit={onSubmit}>
       <Input
         isRequired
         errorMessage="Please enter a valid email"

apps/docs/content/components/form/custom-error-messages.raw.jsx

@@ -6,7 +6,7 @@ export default function App() {
   };
 
   return (
-    <Form className="w-full max-w-xs" validationBehavior="native" onSubmit={onSubmit}>
+    <Form className="w-full max-w-xs" onSubmit={onSubmit}>
       <Input
         isRequired
         errorMessage={({validationDetails}) => {

apps/docs/content/components/form/custom-validation-aria.raw.jsx

@@ -0,0 +1,30 @@
+import {Form, Input, Button} from "@nextui-org/react";
+
+export default function App() {
+  const onSubmit = (e) => {
+    e.preventDefault();
+  };
+
+  return (
+    <Form className="w-full max-w-xs" validationBehavior="aria" onSubmit={onSubmit}>
+      <Input
+        isRequired
+        label="Username"
+        labelPlacement="outside"
+        name="username"
+        placeholder="Enter your username"
+        type="text"
+        validate={(value) => {
+          if (value.length < 3) {
+            return "Username must be at least 3 characters long";
+          }
+
+          return value === "admin" ? "Nice try!" : null;
+        }}
+      />
+      <Button type="submit" variant="bordered">
+        Submit
+      </Button>
+    </Form>
+  );
+}

apps/docs/content/components/form/custom-validation-aria.ts

@@ -0,0 +1,9 @@
+import App from "./custom-validation-aria.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/form/custom-validation.raw.jsx

@@ -6,7 +6,7 @@ export default function App() {
   };
 
   return (
-    <Form className="w-full max-w-xs" validationBehavior="native" onSubmit={onSubmit}>
+    <Form className="w-full max-w-xs" onSubmit={onSubmit}>
       <Input
         isRequired
         label="Username"

apps/docs/content/components/form/demo.raw.jsx

@@ -58,8 +58,7 @@ export default function App() {
 
   return (
     <Form
-      className="w-full justify-center items-center w-full space-y-4"
-      validationBehavior="native"
+      className="w-full justify-center items-center space-y-4"
       validationErrors={errors}
       onReset={() => setSubmitted(null)}
       onSubmit={onSubmit}

apps/docs/content/components/form/events.raw.jsx

@@ -6,7 +6,6 @@ export default function App() {
   return (
     <Form
       className="w-full max-w-xs flex flex-col gap-4"
-      validationBehavior="native"
       onReset={() => setAction("reset")}
       onSubmit={(e) => {
         e.preventDefault();

apps/docs/content/components/form/form-usage.raw.jsx

@@ -12,7 +12,7 @@ export default function App() {
   };
 
   return (
-    <Form className="w-full max-w-xs" validationBehavior="native" onSubmit={onSubmit}>
+    <Form className="w-full max-w-xs" onSubmit={onSubmit}>
       <Input
         isRequired
         errorMessage="Please enter a valid email"

apps/docs/content/components/form/index.ts

@@ -4,6 +4,7 @@ import controlled from "./controlled";
 import nativeValidation from "./native-validation";
 import customErrorMessages from "./custom-error-messages";
 import customValidation from "./custom-validation";
+import customValidationAria from "./custom-validation-aria";
 import realTimeValidation from "./real-time-validation";
 import serverValidation from "./server-validation";
 import events from "./events";
@@ -15,6 +16,7 @@ export const formContent = {
   nativeValidation,
   customErrorMessages,
   customValidation,
+  customValidationAria,
   realTimeValidation,
   serverValidation,
   events,

apps/docs/content/components/form/native-validation.raw.jsx

@@ -6,7 +6,7 @@ export default function App() {
   };
 
   return (
-    <Form className="w-full max-w-xs" validationBehavior="native" onSubmit={onSubmit}>
+    <Form className="w-full max-w-xs" onSubmit={onSubmit}>
       <Input
         isRequired
         errorMessage="Please enter a valid email"

apps/docs/content/components/form/usage.raw.jsx

@@ -12,7 +12,7 @@ export default function App() {
   };
 
   return (
-    <Form className="w-full max-w-xs" validationBehavior="native" onSubmit={onSubmit}>
+    <Form className="w-full max-w-xs" onSubmit={onSubmit}>
       <Input
         isRequired
         errorMessage="Please enter a valid email"

apps/docs/content/components/input-otp/input-otp-required.raw.jsx

@@ -6,7 +6,6 @@ export default function App() {
   return (
     <Form
       className="flex w-full flex-col items-start gap-4"
-      validationBehavior="native"
       onSubmit={(e) => {
         e.preventDefault();
         const formData = new FormData(e.currentTarget);
@@ -21,7 +20,6 @@ export default function App() {
         length={4}
         name="otp"
         placeholder="Enter code"
-        validationBehavior="native"
       />
       <Button size="sm" type="submit" variant="bordered">
         Submit

apps/docs/content/components/input-otp/required.raw.jsx

@@ -20,7 +20,6 @@ export default function App() {
         length={4}
         name="otp"
         placeholder="Enter code"
-        validationBehavior="native"
       />
       <Button size="sm" type="submit" variant="bordered">
         Submit

apps/docs/content/components/input/built-in-validation.raw.jsx

@@ -11,7 +11,7 @@ export default function App() {
   };
 
   return (
-    <Form className="w-full max-w-xs" validationBehavior="native" onSubmit={onSubmit}>
+    <Form className="w-full max-w-xs" onSubmit={onSubmit}>
       <Input
         isRequired
         errorMessage={({validationDetails, validationErrors}) => {

apps/docs/content/components/input/custom-validation.raw.jsx

@@ -11,7 +11,7 @@ export default function App() {
   };
 
   return (
-    <Form className="w-full max-w-xs" validationBehavior="native" onSubmit={onSubmit}>
+    <Form className="w-full max-w-xs" onSubmit={onSubmit}>
       <Input
         isRequired
         label="Username"

apps/docs/content/components/input/real-time-validation.raw.jsx

@@ -23,7 +23,7 @@ export default function App() {
   }
 
   return (
-    <Form className="w-full max-w-xs" validationBehavior="native" onSubmit={onSubmit}>
+    <Form className="w-full max-w-xs" onSubmit={onSubmit}>
       <Input
         errorMessage={() => (
           <ul>

apps/docs/content/components/input/server-validation.raw.jsx

@@ -16,12 +16,7 @@ export default function App() {
   };
 
   return (
-    <Form
-      className="w-full max-w-xs"
-      validationBehavior="native"
-      validationErrors={errors}
-      onSubmit={onSubmit}
-    >
+    <Form className="w-full max-w-xs" validationErrors={errors} onSubmit={onSubmit}>
       <Input
         isRequired
         isDisabled={isLoading}

apps/docs/content/docs/api-references/nextui-provider.mdx

@@ -5,7 +5,7 @@ description: API References for NextUI Provider
 
 # NextUI Provider
 
-API reference for the `NextUIProvider`. 
+API reference for the `NextUIProvider`.
 
 ------
 
@@ -67,11 +67,11 @@ Here's the supported locales. By default, It is `en-US`.
 ```tsx
 const localeValues = [
   'fr-FR', 'fr-CA', 'de-DE', 'en-US', 'en-GB', 'ja-JP',
-  'da-DK', 'nl-NL', 'fi-FI', 'it-IT', 'nb-NO', 'es-ES', 
-  'sv-SE', 'pt-BR', 'zh-CN', 'zh-TW', 'ko-KR', 'bg-BG', 
-  'hr-HR', 'cs-CZ', 'et-EE', 'hu-HU', 'lv-LV', 'lt-LT', 
-  'pl-PL', 'ro-RO', 'ru-RU', 'sr-SP', 'sk-SK', 'sl-SI', 
-  'tr-TR', 'uk-UA', 'ar-AE', 'ar-DZ', 'AR-EG', 'ar-SA', 
+  'da-DK', 'nl-NL', 'fi-FI', 'it-IT', 'nb-NO', 'es-ES',
+  'sv-SE', 'pt-BR', 'zh-CN', 'zh-TW', 'ko-KR', 'bg-BG',
+  'hr-HR', 'cs-CZ', 'et-EE', 'hu-HU', 'lv-LV', 'lt-LT',
+  'pl-PL', 'ro-RO', 'ru-RU', 'sr-SP', 'sk-SK', 'sl-SI',
+  'tr-TR', 'uk-UA', 'ar-AE', 'ar-DZ', 'AR-EG', 'ar-SA',
   'el-GR', 'he-IL', 'fa-AF', 'am-ET', 'hi-IN', 'th-TH'
 ];
 ```
@@ -112,7 +112,7 @@ interface AppProviderProps {
 
 `createCalendar`
 
-- **Description**: 
+- **Description**:
     This function helps to reduce the bundle size by providing a custom calendar system.
 
     By default, this includes all calendar systems supported by `@internationalized/date`. However,
@@ -173,14 +173,14 @@ interface AppProviderProps {
 
 `validationBehavior`
 
-- **Description**: Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, 
+- **Description**: Whether to use native HTML form validation to prevent form submission when the value is missing or invalid,
 or mark the field as required or invalid via ARIA.
 - **Type**: `native | aria`
-- **Default**: `aria`
+- **Default**: `native`
 
 `reducedMotion`
 
-- **Description**: Controls the motion preferences for the entire application, allowing developers to respect user settings for reduced motion. 
+- **Description**: Controls the motion preferences for the entire application, allowing developers to respect user settings for reduced motion.
 The available options are:
   - `"user"`: Adapts to the user's device settings for reduced motion.
   - `"always"`: Disables all animations.

apps/docs/content/docs/components/form.mdx

@@ -72,11 +72,12 @@ See the [Forms](/docs/guide/forms) guide to learn more about form validation, in
 
 ### Validation Behavior
 
-`Form` validation uses ARIA attributes by default, but can be switched to native HTML validation by setting `validationBehavior="native"`. ARIA validation shows realtime errors without blocking submission. This can be set at the form or field level.
+`Form` validation uses native validation behavior by default, but can be switched to ARIA validation by setting `validationBehavior="aria"`. ARIA validation shows realtime errors without blocking submission. This can be set at the form or field level.
+To set the default behavior at the app level, you can change the form defaults for your entire app using [NextUI Provider](/docs/api-references/nextui-provider).
 
 
 ```tsx
-<Form validationBehavior="native">
+<Form validationBehavior="aria">
   <Input
     isRequired
     name="username"
@@ -95,7 +96,7 @@ See the [Forms](/docs/guide/forms) guide to learn more about form validation, in
 </Form>
 ```
 
-<CodeDemo title="Validation Behavior" files={formContent.customValidation} />
+<CodeDemo title="Validation Behavior" files={formContent.customValidationAria} />
 
 ## Accessibility
 
@@ -123,7 +124,7 @@ See the [Forms](/docs/guide/forms) guide to learn more about form validation, in
       type: "'native' | 'aria'",
       description:
         "Whether to use native HTML form validation to prevent form submission when a field value is missing or invalid, or mark fields as required or invalid via ARIA.",
-      default: "aria",
+      default: "native",
     },
     {
       attribute: "validationErrors",

apps/docs/content/docs/components/input.mdx

@@ -127,7 +127,7 @@ You can use the `value` and `onValueChange` properties to control the input valu
 
 ### With Form
 
-`Input` can be used with a `Form` component to leverage form state management. By default, `Form` components use `validationBehavior="aria"`, which will not block form submission if any inputs are invalid. For more on form and validation behaviors, see the [Forms](/docs/guide/forms) guide.
+`Input` can be used with a `Form` component to leverage form state management. For more on form and validation behaviors, see the [Forms](/docs/guide/forms) guide.
 
 #### Built-in Validation
 

apps/docs/content/docs/guide/forms.mdx

@@ -65,7 +65,7 @@ function Example() {
   };
 
   return (
-    <Form onSubmit={onSubmit} validationBehavior="native">
+    <Form onSubmit={onSubmit}>
       <Input
         isRequired
         errorMessage="Please enter a valid email"
@@ -111,7 +111,7 @@ function Example() {
   };
 
   return (
-    <Form className="w-full max-w-xs" validationBehavior="native" onSubmit={onSubmit}>
+    <Form className="w-full max-w-xs" onSubmit={onSubmit}>
       <Input
         isRequired
         errorMessage="Please enter a valid email"
@@ -155,7 +155,7 @@ export default function App() {
   };
 
   return (
-    <Form validationBehavior="native" onSubmit={onSubmit}>
+    <Form onSubmit={onSubmit}>
       <Input
         isRequired
         errorMessage={({validationDetails}) => {
@@ -208,7 +208,7 @@ export default function App() {
   };
 
   return (
-    <Form validationBehavior="native" onSubmit={onSubmit}>
+    <Form onSubmit={onSubmit}>
       <Input
         isRequired
         label="Email"
@@ -225,8 +225,8 @@ export default function App() {
 }
 ```
 
-To enable native validation, set `validationBehavior="native"`.
-By default, `validationBehavior="aria"` is set, which only marks the field as required or invalid for assistive technologies, without preventing form submission.
+To enable ARIA validation, set `validationBehavior="aria"`.
+When`validationBehavior="aria"` is set, fields are only marked as required or invalid for assistive technologies, without preventing form submission.
 You can change the form defaults for your entire app using [NextUI Provider](/docs/api-references/nextui-provider).
 
 Supported constraints include:
@@ -256,7 +256,7 @@ export default function App() {
   };
 
   return (
-    <Form validationBehavior="native" onSubmit={onSubmit}>
+    <Form onSubmit={onSubmit}>
       <Input
         isRequired
         label="Username"

packages/components/autocomplete/__tests__/autocomplete.test.tsx

@@ -653,8 +653,8 @@ describe("Autocomplete", () => {
     describe("validationBehavior=native", () => {
       it("supports isRequired", async () => {
         const {getByTestId, getByRole, findByRole} = render(
-          <Form data-testid="form">
-            <AutocompleteExample isRequired validationBehavior="native" />
+          <Form data-testid="form" validationBehavior="native">
+            <AutocompleteExample isRequired />
           </Form>,
         );
 
@@ -695,8 +695,8 @@ describe("Autocomplete", () => {
           };
 
           return (
-            <Form validationErrors={serverErrors} onSubmit={onSubmit}>
-              <AutocompleteExample data-testid="input" name="value" validationBehavior="native" />
+            <Form validationBehavior="native" validationErrors={serverErrors} onSubmit={onSubmit}>
+              <AutocompleteExample data-testid="input" name="value" />
               <button data-testid="submit" type="submit">
                 Submit
               </button>
@@ -778,7 +778,7 @@ describe("Autocomplete", () => {
 
       it("supports server validation", async () => {
         const {getByTestId, getByRole} = render(
-          <Form validationErrors={{value: "Invalid value"}}>
+          <Form validationBehavior="aria" validationErrors={{value: "Invalid value"}}>
             <AutocompleteExample data-testid="input" name="value" />
           </Form>,
         );

packages/components/checkbox/__tests__/checkbox-group.test.tsx

@@ -294,12 +294,8 @@ describe("Checkbox.Group", () => {
           };
 
           return (
-            <Form validationErrors={serverErrors} onSubmit={onSubmit}>
-              <CheckboxGroup
-                label="Agree to the following"
-                name="terms"
-                validationBehavior="native"
-              >
+            <Form validationBehavior="native" validationErrors={serverErrors} onSubmit={onSubmit}>
+              <CheckboxGroup label="Agree to the following" name="terms">
                 <Checkbox value="terms">Terms and conditions</Checkbox>
                 <Checkbox value="cookies">Cookies</Checkbox>
                 <Checkbox value="privacy">Privacy policy</Checkbox>