chore: main demo addded to forms, checkbox validation fixed

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

@@ -0,0 +1,108 @@
+import {Form, Input, Select, SelectItem, Checkbox, Button} from "@nextui-org/react";
+
+export default function App() {
+  const [submitted, setSubmitted] = React.useState(null);
+  const [errors, setErrors] = React.useState({});
+
+  const onSubmit = (e) => {
+    e.preventDefault();
+    const data = Object.fromEntries(new FormData(e.currentTarget));
+
+    // Validate password match
+    if (data.password !== data.confirmPassword) {
+      setErrors({
+        confirmPassword: "Passwords do not match",
+      });
+
+      return;
+    }
+
+    // Clear any previous errors
+    setErrors({});
+    setSubmitted(data);
+  };
+
+  return (
+    <Form
+      className="w-full justify-center items-center w-full space-y-4"
+      validationBehavior="native"
+      validationErrors={errors}
+      onSubmit={onSubmit}
+    >
+      <div className="flex flex-col gap-4 max-w-md">
+        <Input
+          isRequired
+          label="Name"
+          labelPlacement="outside"
+          name="name"
+          placeholder="Enter your name"
+        />
+
+        <Input
+          isRequired
+          label="Email"
+          labelPlacement="outside"
+          name="email"
+          placeholder="Enter your email"
+          type="email"
+        />
+
+        <Input
+          isRequired
+          label="Password"
+          labelPlacement="outside"
+          name="password"
+          placeholder="Enter your password"
+          type="password"
+        />
+
+        <Input
+          isRequired
+          label="Confirm Password"
+          labelPlacement="outside"
+          name="confirmPassword"
+          placeholder="Confirm your password"
+          type="password"
+        />
+
+        <Select
+          isRequired
+          label="Country"
+          labelPlacement="outside"
+          name="country"
+          placeholder="Select country"
+        >
+          <SelectItem key="ar" value="ar">
+            Argentina
+          </SelectItem>
+          <SelectItem key="us" value="us">
+            United States
+          </SelectItem>
+          <SelectItem key="ca" value="ca">
+            Canada
+          </SelectItem>
+          <SelectItem key="uk" value="uk">
+            United Kingdom
+          </SelectItem>
+          <SelectItem key="au" value="au">
+            Australia
+          </SelectItem>
+        </Select>
+
+        <Checkbox isRequired name="terms" value={true}>
+          I agree to the terms and conditions
+        </Checkbox>
+
+        <Button className="w-full" color="primary" type="submit">
+          Submit
+        </Button>
+      </div>
+
+      {submitted && (
+        <div className="text-small text-default-500 mt-4">
+          Submitted data: <pre>{JSON.stringify(submitted, null, 2)}</pre>
+        </div>
+      )}
+    </Form>
+  );
+}

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

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

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

@@ -1,10 +1,12 @@
+import demo from "./demo";
 import usage from "./usage";
 import controlled from "./controlled";
 import nativeValidation from "./native-validation";
 import customErrorMessages from "./custom-error-messages";
 import customValidation from "./custom-validation";
 
 export const formContent = {
+  demo,
   usage,
   controlled,
   nativeValidation,

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

@@ -11,6 +11,8 @@ NextUI provides form components with built-in validation and styling to help use
 
 <CarbonAd />
 
+<CodeDemo title="Demo" showEditor={false} files={formContent.demo} />
+
 ## Labels and help text
 
 Accessible forms start with clear, descriptive labels for each field. All NextUI form components support labeling using

packages/components/checkbox/src/use-checkbox.ts

@@ -106,6 +106,7 @@ export function useCheckbox(props: UseCheckboxProps = {}) {
     classNames,
     className,
     onValueChange,
+    validate,
     ...otherProps
   } = props;
 
@@ -151,7 +152,6 @@ export function useCheckbox(props: UseCheckboxProps = {}) {
       children,
       autoFocus,
       defaultSelected,
-      validationBehavior,
       isIndeterminate,
       isRequired,
       isInvalid,
@@ -174,19 +174,26 @@ export function useCheckbox(props: UseCheckboxProps = {}) {
     isReadOnlyProp,
     isSelectedProp,
     defaultSelected,
-    validationBehavior,
     otherProps["aria-label"],
     otherProps["aria-labelledby"],
     onValueChange,
   ]);
 
+  const validationProps = {
+    isInvalid,
+    isRequired,
+    validate,
+    validationState,
+    validationBehavior,
+  };
+
   const toggleState = useToggleState(ariaCheckboxProps);
 
   const {inputProps, isSelected, isDisabled, isReadOnly, isPressed} = isInGroup
     ? // eslint-disable-next-line
-      useReactAriaCheckboxGroupItem({...ariaCheckboxProps}, groupContext.groupState, inputRef)
+      useReactAriaCheckboxGroupItem({...ariaCheckboxProps, ...validationProps}, groupContext.groupState, inputRef)
     : // eslint-disable-next-line
-      useReactAriaCheckbox({...ariaCheckboxProps}, toggleState, inputRef);
+      useReactAriaCheckbox({...ariaCheckboxProps, ...validationProps}, toggleState, inputRef);
 
   const isInteractionDisabled = isDisabled || isReadOnly;