diff --git a/src/fields/checkbox-field/CheckboxInput.mock.tsx b/src/fields/checkbox-field/CheckboxInput.mock.tsx
index 2e5330c..3c59fc1 100644
--- a/src/fields/checkbox-field/CheckboxInput.mock.tsx
+++ b/src/fields/checkbox-field/CheckboxInput.mock.tsx
@@ -1,21 +1,17 @@
-import { ReactNode } from "react";
-
-import { CheckboxField } from "./checkboxField";
-import { FieldLabel } from "../../components";
-import { FieldErrors } from "../../components/field-errors";
-import { useCheckboxFieldProps, useRequiredProps } from "../../hooks";
-import { BooleanField } from "../boolean-field";
+import { FieldErrors, FieldLabel } from "../../components";
+import {
+ type CheckboxFieldProps,
+ useCheckboxFieldProps,
+ useRequiredProps,
+} from "../../hooks";
export const CheckboxInput = ({
field,
label,
required,
-}: {
- field: BooleanField | CheckboxField;
- label: ReactNode;
- required?: boolean;
-}) => {
- const props = useCheckboxFieldProps(field);
+ initialValue,
+}: CheckboxFieldProps) => {
+ const props = useCheckboxFieldProps(field, { initialValue });
const requiredProps = useRequiredProps({ field, required });
return (
diff --git a/src/fields/checkbox-field/checkboxField.stories.tsx b/src/fields/checkbox-field/checkboxField.stories.tsx
index 1ea88a1..56cd506 100644
--- a/src/fields/checkbox-field/checkboxField.stories.tsx
+++ b/src/fields/checkbox-field/checkboxField.stories.tsx
@@ -51,3 +51,26 @@ export const Optional = formStory({
},
},
});
+
+export const Initialized = formStory({
+ args: {
+ fields: {
+ visible: checkboxField({ name: "visible" }).optional(),
+ },
+ children: ({ fields }) => (
+
+ ),
+ },
+ parameters: {
+ docs: {
+ description: {
+ story:
+ "This example uses the `initialValue` option passed to the `useCheckboxFieldProps(field, options)`",
+ },
+ },
+ },
+});
diff --git a/src/hooks/use-checkbox-field-props/useCheckboxFieldProps.test.tsx b/src/hooks/use-checkbox-field-props/useCheckboxFieldProps.test.tsx
index 864534b..47aa8c7 100644
--- a/src/hooks/use-checkbox-field-props/useCheckboxFieldProps.test.tsx
+++ b/src/hooks/use-checkbox-field-props/useCheckboxFieldProps.test.tsx
@@ -35,4 +35,14 @@ describe("useCheckboxFieldProps()", () => {
expect(checkboxProps.result.current.checked).toBe(true);
});
+
+ test("can be initialized", async () => {
+ const field = checkboxField();
+
+ const checkboxProps = renderHook(() =>
+ useCheckboxFieldProps(field, { initialValue: true }),
+ );
+
+ expect(checkboxProps.result.current.checked).toBe(true);
+ });
});
diff --git a/src/hooks/use-checkbox-field-props/useCheckboxFieldProps.ts b/src/hooks/use-checkbox-field-props/useCheckboxFieldProps.ts
index eb0c004..f1f57e4 100644
--- a/src/hooks/use-checkbox-field-props/useCheckboxFieldProps.ts
+++ b/src/hooks/use-checkbox-field-props/useCheckboxFieldProps.ts
@@ -1,18 +1,26 @@
+import { UseFieldOptions } from "form-atoms";
import { ChangeEvent, useMemo } from "react";
import { FieldProps, useFieldProps } from "../";
-import { BooleanField, type CheckboxField } from "../../fields";
+import type {
+ BooleanField,
+ BooleanFieldValue,
+ CheckboxField,
+} from "../../fields";
export type CheckboxFieldProps = FieldProps;
const getChecked = (event: ChangeEvent) =>
event.currentTarget.checked;
-export function useCheckboxFieldProps(field: CheckboxField | BooleanField) {
+export function useCheckboxFieldProps(
+ field: CheckboxField | BooleanField,
+ options?: UseFieldOptions,
+) {
// undefined (empty checkbox) is rendered as unchecked input
const { value: checked = false, ...props } = useFieldProps<
CheckboxField | BooleanField
- >(field, getChecked);
+ >(field, getChecked, options);
return useMemo(
() => ({