@ariakit/react-core 0.3.12 → 0.3.14

package/cjs/form/form-group.d.cts

@@ -17,16 +17,20 @@ import type { FormStore } from "./form-store.js";
  */
 export declare const useFormGroup: import("../utils/types.js").Hook<FormGroupOptions<"div">>;
 /**
- * Renders a form group.
+ * Renders a group element for form controls. The
+ * [`FormGroupLabel`](https://ariakit.org/reference/form-group-label) component
+ * can be used inside this component so the `aria-labelledby` prop is properly
+ * set on the group element.
  * @see https://ariakit.org/components/form
  * @example
- * ```jsx
+ * ```jsx {9-15}
  * const form = useFormStore({
  *   defaultValues: {
  *     username: "",
  *     email: "",
  *   },
  * });
+ *
  * <Form store={form}>
  *   <FormGroup>
  *     <FormGroupLabel>Account</FormGroupLabel>

package/cjs/form/form-group.d.ts

@@ -17,16 +17,20 @@ import type { FormStore } from "./form-store.js";
  */
 export declare const useFormGroup: import("../utils/types.js").Hook<FormGroupOptions<"div">>;
 /**
- * Renders a form group.
+ * Renders a group element for form controls. The
+ * [`FormGroupLabel`](https://ariakit.org/reference/form-group-label) component
+ * can be used inside this component so the `aria-labelledby` prop is properly
+ * set on the group element.
  * @see https://ariakit.org/components/form
  * @example
- * ```jsx
+ * ```jsx {9-15}
  * const form = useFormStore({
  *   defaultValues: {
  *     username: "",
  *     email: "",
  *   },
  * });
+ *
  * <Form store={form}>
  *   <FormGroup>
  *     <FormGroupLabel>Account</FormGroupLabel>

package/cjs/form/form-input.cjs

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-var _VCDQISP7cjs = require('../__chunks/VCDQISP7.cjs');
+var _N3XK7EAHcjs = require('../__chunks/N3XK7EAH.cjs');
 
 
 var _FROYTN4Bcjs = require('../__chunks/FROYTN4B.cjs');
@@ -52,7 +52,7 @@ var useFormInput = _RNZNGEL4cjs.createHook.call(void 0,
       onChange
     });
     props = _Z3GCTNW4cjs.useFocusable.call(void 0, props);
-    props = _VCDQISP7cjs.useFormField.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, { store, name }, props));
+    props = _N3XK7EAHcjs.useFormControl.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, { store, name }, props));
     return props;
   }
 );

package/cjs/form/form-input.d.cts

@@ -1,8 +1,8 @@
 import type { FocusableOptions } from "../focusable/focusable.js";
 import type { As, Props } from "../utils/types.js";
-import type { FormFieldOptions } from "./form-field.js";
+import type { FormControlOptions } from "./form-control.js";
 /**
- * Returns props to create a `FormInput` component. Unlike `useFormField`, this
+ * Returns props to create a `FormInput` component. Unlike `useFormControl`, this
  * hook returns the `value` and `onChange` props that can be passed to a native
  * input, select or textarea elements.
  * @see https://ariakit.org/components/form
@@ -19,17 +19,18 @@ import type { FormFieldOptions } from "./form-field.js";
 export declare const useFormInput: import("../utils/types.js").Hook<FormInputOptions<"input">>;
 /**
  * Renders a form input. Unlike
- * [`FormField`](https://ariakit.org/reference/form-field), this component
+ * [`FormControl`](https://ariakit.org/reference/form-control), this component
  * passes the `value` and `onChange` props down to the underlying element that
- * can be a native input, select or textarea elements.
+ * can be native input, select or textarea elements.
  * @see https://ariakit.org/components/form
  * @example
- * ```jsx
+ * ```jsx {9}
  * const form = useFormStore({
  *   defaultValues: {
  *     email: "",
  *   },
  * });
+ *
  * <Form store={form}>
  *   <FormLabel name={form.names.email}>Email</FormLabel>
  *   <FormInput name={form.names.email} />
@@ -37,6 +38,6 @@ export declare const useFormInput: import("../utils/types.js").Hook<FormInputOpt
  * ```
  */
 export declare const FormInput: import("../utils/types.js").Component<FormInputOptions<"input">>;
-export interface FormInputOptions<T extends As = "input"> extends FormFieldOptions<T>, FocusableOptions<T> {
+export interface FormInputOptions<T extends As = "input"> extends FormControlOptions<T>, FocusableOptions<T> {
 }
 export type FormInputProps<T extends As = "input"> = Props<FormInputOptions<T>>;

package/cjs/form/form-input.d.ts

@@ -1,8 +1,8 @@
 import type { FocusableOptions } from "../focusable/focusable.js";
 import type { As, Props } from "../utils/types.js";
-import type { FormFieldOptions } from "./form-field.js";
+import type { FormControlOptions } from "./form-control.js";
 /**
- * Returns props to create a `FormInput` component. Unlike `useFormField`, this
+ * Returns props to create a `FormInput` component. Unlike `useFormControl`, this
  * hook returns the `value` and `onChange` props that can be passed to a native
  * input, select or textarea elements.
  * @see https://ariakit.org/components/form
@@ -19,17 +19,18 @@ import type { FormFieldOptions } from "./form-field.js";
 export declare const useFormInput: import("../utils/types.js").Hook<FormInputOptions<"input">>;
 /**
  * Renders a form input. Unlike
- * [`FormField`](https://ariakit.org/reference/form-field), this component
+ * [`FormControl`](https://ariakit.org/reference/form-control), this component
  * passes the `value` and `onChange` props down to the underlying element that
- * can be a native input, select or textarea elements.
+ * can be native input, select or textarea elements.
  * @see https://ariakit.org/components/form
  * @example
- * ```jsx
+ * ```jsx {9}
  * const form = useFormStore({
  *   defaultValues: {
  *     email: "",
  *   },
  * });
+ *
  * <Form store={form}>
  *   <FormLabel name={form.names.email}>Email</FormLabel>
  *   <FormInput name={form.names.email} />
@@ -37,6 +38,6 @@ export declare const useFormInput: import("../utils/types.js").Hook<FormInputOpt
  * ```
  */
 export declare const FormInput: import("../utils/types.js").Component<FormInputOptions<"input">>;
-export interface FormInputOptions<T extends As = "input"> extends FormFieldOptions<T>, FocusableOptions<T> {
+export interface FormInputOptions<T extends As = "input"> extends FormControlOptions<T>, FocusableOptions<T> {
 }
 export type FormInputProps<T extends As = "input"> = Props<FormInputOptions<T>>;

package/cjs/form/form-label.d.cts

@@ -21,19 +21,23 @@ import type { FormStore } from "./form-store.js";
  */
 export declare const useFormLabel: import("../utils/types.js").Hook<FormLabelOptions<"label">>;
 /**
- * Renders a label for a form field. If the field is not a native input, select
- * or textarea element, the component will render a `span` element. Instead of
- * relying on the `htmlFor` prop, it'll rely on the `aria-labelledby` attribute
- * on the form field. Clicking on the label will move focus to the field even if
- * it's not a native input.
+ * Renders a label associated with a form field, even if the field is not a
+ * native input.
+ *
+ * If the field is a native input, select or textarea element, this component
+ * will render a native `label` element and rely on its `htmlFor` prop.
+ * Otherwise, it'll render a `span` element and rely on the `aria-labelledby`
+ * attribute on the form field instead. Clicking on the label will move focus to
+ * the field even if it's not a native input.
  * @see https://ariakit.org/components/form
  * @example
- * ```jsx
+ * ```jsx {8}
  * const form = useFormStore({
  *   defaultValues: {
  *     email: "",
  *   },
  * });
+ *
  * <Form store={form}>
  *   <FormLabel name={form.names.email}>Email</Role>
  *   <FormInput name={form.names.email} />
@@ -51,7 +55,14 @@ export interface FormLabelOptions<T extends As = "label"> extends CollectionItem
      */
     store?: FormStore;
     /**
-     * Name of the field.
+     * Name of the field labeled by this element. This can either be a string or a
+     * reference to a field name from the
+     * [`names`](https://ariakit.org/reference/use-form-store#names) object in the
+     * store, for type safety.
+     * @example
+     * ```jsx
+     * <FormLabel name="email">Email</FormLabel>
+     * ```
      */
     name: StringLike;
 }

package/cjs/form/form-label.d.ts

@@ -21,19 +21,23 @@ import type { FormStore } from "./form-store.js";
  */
 export declare const useFormLabel: import("../utils/types.js").Hook<FormLabelOptions<"label">>;
 /**
- * Renders a label for a form field. If the field is not a native input, select
- * or textarea element, the component will render a `span` element. Instead of
- * relying on the `htmlFor` prop, it'll rely on the `aria-labelledby` attribute
- * on the form field. Clicking on the label will move focus to the field even if
- * it's not a native input.
+ * Renders a label associated with a form field, even if the field is not a
+ * native input.
+ *
+ * If the field is a native input, select or textarea element, this component
+ * will render a native `label` element and rely on its `htmlFor` prop.
+ * Otherwise, it'll render a `span` element and rely on the `aria-labelledby`
+ * attribute on the form field instead. Clicking on the label will move focus to
+ * the field even if it's not a native input.
  * @see https://ariakit.org/components/form
  * @example
- * ```jsx
+ * ```jsx {8}
  * const form = useFormStore({
  *   defaultValues: {
  *     email: "",
  *   },
  * });
+ *
  * <Form store={form}>
  *   <FormLabel name={form.names.email}>Email</Role>
  *   <FormInput name={form.names.email} />
@@ -51,7 +55,14 @@ export interface FormLabelOptions<T extends As = "label"> extends CollectionItem
      */
     store?: FormStore;
     /**
-     * Name of the field.
+     * Name of the field labeled by this element. This can either be a string or a
+     * reference to a field name from the
+     * [`names`](https://ariakit.org/reference/use-form-store#names) object in the
+     * store, for type safety.
+     * @example
+     * ```jsx
+     * <FormLabel name="email">Email</FormLabel>
+     * ```
      */
     name: StringLike;
 }

package/cjs/form/form-provider.d.cts

@@ -4,7 +4,8 @@ import type { PickRequired } from "@ariakit/core/utils/types";
 import type { FormStoreProps } from "./form-store.js";
 type Values = FormStoreValues;
 /**
- * Provides a form store to Form components.
+ * Provides a form store to [Form](https://ariakit.org/components/form)
+ * components.
  * @see https://ariakit.org/components/form
  * @example
  * ```jsx

package/cjs/form/form-provider.d.ts

@@ -4,7 +4,8 @@ import type { PickRequired } from "@ariakit/core/utils/types";
 import type { FormStoreProps } from "./form-store.js";
 type Values = FormStoreValues;
 /**
- * Provides a form store to Form components.
+ * Provides a form store to [Form](https://ariakit.org/components/form)
+ * components.
  * @see https://ariakit.org/components/form
  * @example
  * ```jsx

package/cjs/form/form-push.d.cts

@@ -32,14 +32,25 @@ export declare const useFormPush: import("../utils/types.js").Hook<FormPushOptio
 /**
  * Renders a button that will push items to an array value in the form store
  * when clicked.
+ *
+ * The [`name`](https://ariakit.org/reference/form-push#name) prop needs to be
+ * provided to identify the array field. The
+ * [`value`](https://ariakit.org/reference/form-push#value) prop is required to
+ * define the value that will be added to the array.
+ *
+ * By default, the newly added input will be automatically focused when the
+ * button is clicked unless the
+ * [`autoFocusOnClick`](https://ariakit.org/reference/form-push#autofocusonclick)
+ * prop is set to `false`.
  * @see https://ariakit.org/components/form
  * @example
- * ```jsx
+ * ```jsx {13-15}
  * const form = useFormStore({
  *   defaultValues: {
  *     languages: ["JavaScript", "PHP"],
  *   },
  * });
+ *
  * const values = form.useState("values");
  *
  * <Form store={form}>
@@ -63,11 +74,14 @@ export interface FormPushOptions<T extends As = "button"> extends ButtonOptions<
      */
     store?: FormStore;
     /**
-     * Name of the array field.
+     * Name of the array field. This can either be a string or a reference to a
+     * field name from the
+     * [`names`](https://ariakit.org/reference/use-form-store#names) object in the
+     * store, for type safety.
      */
     name: StringLike;
     /**
-     * Value that will be initially set to the item when it is pushed.
+     * Value that will initially be assigned to the array item when it's pushed.
      */
     value: unknown;
     /**

package/cjs/form/form-push.d.ts

@@ -32,14 +32,25 @@ export declare const useFormPush: import("../utils/types.js").Hook<FormPushOptio
 /**
  * Renders a button that will push items to an array value in the form store
  * when clicked.
+ *
+ * The [`name`](https://ariakit.org/reference/form-push#name) prop needs to be
+ * provided to identify the array field. The
+ * [`value`](https://ariakit.org/reference/form-push#value) prop is required to
+ * define the value that will be added to the array.
+ *
+ * By default, the newly added input will be automatically focused when the
+ * button is clicked unless the
+ * [`autoFocusOnClick`](https://ariakit.org/reference/form-push#autofocusonclick)
+ * prop is set to `false`.
  * @see https://ariakit.org/components/form
  * @example
- * ```jsx
+ * ```jsx {13-15}
  * const form = useFormStore({
  *   defaultValues: {
  *     languages: ["JavaScript", "PHP"],
  *   },
  * });
+ *
  * const values = form.useState("values");
  *
  * <Form store={form}>
@@ -63,11 +74,14 @@ export interface FormPushOptions<T extends As = "button"> extends ButtonOptions<
      */
     store?: FormStore;
     /**
-     * Name of the array field.
+     * Name of the array field. This can either be a string or a reference to a
+     * field name from the
+     * [`names`](https://ariakit.org/reference/use-form-store#names) object in the
+     * store, for type safety.
      */
     name: StringLike;
     /**
-     * Value that will be initially set to the item when it is pushed.
+     * Value that will initially be assigned to the array item when it's pushed.
      */
     value: unknown;
     /**

package/cjs/form/form-radio-group.d.cts

@@ -19,15 +19,20 @@ import type { FormGroupOptions } from "./form-group.js";
  */
 export declare const useFormRadioGroup: import("../utils/types.js").Hook<FormRadioGroupOptions<"div">>;
 /**
- * Renders a radio group in a form.
+ * Renders a group element for
+ * [`FormRadio`](https://ariakit.org/reference/form-radio) elements. The
+ * [`FormGroupLabel`](https://ariakit.org/reference/form-group-label) component
+ * can be used inside this component so the `aria-labelledby` prop is properly
+ * set on the group element.
  * @see https://ariakit.org/components/form
  * @example
- * ```jsx
+ * ```jsx {8-13}
  * const form = useFormStore({
  *   defaultValues: {
  *     color: "red",
  *   },
  * });
+ *
  * <Form store={form}>
  *   <FormRadioGroup>
  *     <FormGroupLabel>Favorite color</FormGroupLabel>

package/cjs/form/form-radio-group.d.ts

@@ -19,15 +19,20 @@ import type { FormGroupOptions } from "./form-group.js";
  */
 export declare const useFormRadioGroup: import("../utils/types.js").Hook<FormRadioGroupOptions<"div">>;
 /**
- * Renders a radio group in a form.
+ * Renders a group element for
+ * [`FormRadio`](https://ariakit.org/reference/form-radio) elements. The
+ * [`FormGroupLabel`](https://ariakit.org/reference/form-group-label) component
+ * can be used inside this component so the `aria-labelledby` prop is properly
+ * set on the group element.
  * @see https://ariakit.org/components/form
  * @example
- * ```jsx
+ * ```jsx {8-13}
  * const form = useFormStore({
  *   defaultValues: {
  *     color: "red",
  *   },
  * });
+ *
  * <Form store={form}>
  *   <FormRadioGroup>
  *     <FormGroupLabel>Favorite color</FormGroupLabel>

package/cjs/form/form-radio.cjs

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-var _VCDQISP7cjs = require('../__chunks/VCDQISP7.cjs');
+var _N3XK7EAHcjs = require('../__chunks/N3XK7EAH.cjs');
 
 
 var _FROYTN4Bcjs = require('../__chunks/FROYTN4B.cjs');
@@ -61,7 +61,7 @@ var useFormRadio = _RNZNGEL4cjs.createHook.call(void 0,
       onChange
     });
     props = _G2ZXRZ2Rcjs.useRadio.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, { value }, props));
-    props = _VCDQISP7cjs.useFormField.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {
+    props = _N3XK7EAHcjs.useFormControl.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {
       store,
       name,
       "aria-labelledby": void 0

package/cjs/form/form-radio.d.cts

@@ -1,6 +1,6 @@
 import type { RadioOptions } from "../radio/radio.js";
 import type { As, Props } from "../utils/types.js";
-import type { FormFieldOptions } from "./form-field.js";
+import type { FormControlOptions } from "./form-control.js";
 /**
  * Returns props to create a `FormRadio` component.
  * @see https://ariakit.org/components/form
@@ -22,15 +22,19 @@ import type { FormFieldOptions } from "./form-field.js";
  */
 export declare const useFormRadio: import("../utils/types.js").Hook<FormRadioOptions<"input">>;
 /**
- * Renders a radio button in a form.
+ * Renders a radio button as a form control. This component must be wrapped in a
+ * [`FormRadioGroup`](https://ariakit.org/reference/form-radio-group) along with
+ * other radio buttons sharing the same
+ * [`name`](https://ariakit.org/reference/form-radio#name).
  * @see https://ariakit.org/components/form
  * @example
- * ```jsx
+ * ```jsx {10-12}
  * const form = useFormStore({
  *   defaultValues: {
  *     char: "a",
  *   },
  * });
+ *
  * <Form store={form}>
  *   <FormRadioGroup>
  *     <FormGroupLabel>Favorite character</FormGroupLabel>
@@ -42,6 +46,6 @@ export declare const useFormRadio: import("../utils/types.js").Hook<FormRadioOpt
  * ```
  */
 export declare const FormRadio: import("../utils/types.js").Component<FormRadioOptions<"input">>;
-export interface FormRadioOptions<T extends As = "input"> extends FormFieldOptions<T>, Omit<RadioOptions<T>, "store" | "name"> {
+export interface FormRadioOptions<T extends As = "input"> extends FormControlOptions<T>, Omit<RadioOptions<T>, "store" | "name"> {
 }
 export type FormRadioProps<T extends As = "input"> = Props<FormRadioOptions<T>>;

package/cjs/form/form-radio.d.ts

@@ -1,6 +1,6 @@
 import type { RadioOptions } from "../radio/radio.js";
 import type { As, Props } from "../utils/types.js";
-import type { FormFieldOptions } from "./form-field.js";
+import type { FormControlOptions } from "./form-control.js";
 /**
  * Returns props to create a `FormRadio` component.
  * @see https://ariakit.org/components/form
@@ -22,15 +22,19 @@ import type { FormFieldOptions } from "./form-field.js";
  */
 export declare const useFormRadio: import("../utils/types.js").Hook<FormRadioOptions<"input">>;
 /**
- * Renders a radio button in a form.
+ * Renders a radio button as a form control. This component must be wrapped in a
+ * [`FormRadioGroup`](https://ariakit.org/reference/form-radio-group) along with
+ * other radio buttons sharing the same
+ * [`name`](https://ariakit.org/reference/form-radio#name).
  * @see https://ariakit.org/components/form
  * @example
- * ```jsx
+ * ```jsx {10-12}
  * const form = useFormStore({
  *   defaultValues: {
  *     char: "a",
  *   },
  * });
+ *
  * <Form store={form}>
  *   <FormRadioGroup>
  *     <FormGroupLabel>Favorite character</FormGroupLabel>
@@ -42,6 +46,6 @@ export declare const useFormRadio: import("../utils/types.js").Hook<FormRadioOpt
  * ```
  */
 export declare const FormRadio: import("../utils/types.js").Component<FormRadioOptions<"input">>;
-export interface FormRadioOptions<T extends As = "input"> extends FormFieldOptions<T>, Omit<RadioOptions<T>, "store" | "name"> {
+export interface FormRadioOptions<T extends As = "input"> extends FormControlOptions<T>, Omit<RadioOptions<T>, "store" | "name"> {
 }
 export type FormRadioProps<T extends As = "input"> = Props<FormRadioOptions<T>>;

package/cjs/form/form-remove.d.cts

@@ -31,14 +31,26 @@ export declare const useFormRemove: import("../utils/types.js").Hook<FormRemoveO
 /**
  * Renders a button that will remove an item from an array field in the form
  * when clicked.
+ *
+ * The [`name`](https://ariakit.org/reference/form-remove#name) prop must be
+ * provided to identify the array field. Similarly, the
+ * [`index`](https://ariakit.org/reference/form-remove#index) prop is required
+ * to pinpoint the item to remove.
+ *
+ * By default, the button will automatically move focus to the next field in the
+ * form when clicked, or to the previous field if there isn't a next field. This
+ * behavior can be disabled by setting the
+ * [`autoFocusOnClick`](https://ariakit.org/reference/form-remove#autofocusonclick)
+ * prop to `false`.
  * @see https://ariakit.org/components/form
  * @example
- * ```jsx
+ * ```jsx {13}
  * const form = useFormStore({
  *   defaultValues: {
  *     languages: ["JavaScript", "PHP"],
  *   },
  * });
+ *
  * const values = form.useState("values");
  *
  * <Form store={form}>
@@ -62,7 +74,10 @@ export interface FormRemoveOptions<T extends As = "button"> extends ButtonOption
      */
     store?: FormStore;
     /**
-     * Name of the array field.
+     * Name of the array field. This can either be a string or a reference to a
+     * field name from the
+     * [`names`](https://ariakit.org/reference/use-form-store#names) object in the
+     * store, for type safety.
      */
     name: StringLike;
     /**

package/cjs/form/form-remove.d.ts

@@ -31,14 +31,26 @@ export declare const useFormRemove: import("../utils/types.js").Hook<FormRemoveO
 /**
  * Renders a button that will remove an item from an array field in the form
  * when clicked.
+ *
+ * The [`name`](https://ariakit.org/reference/form-remove#name) prop must be
+ * provided to identify the array field. Similarly, the
+ * [`index`](https://ariakit.org/reference/form-remove#index) prop is required
+ * to pinpoint the item to remove.
+ *
+ * By default, the button will automatically move focus to the next field in the
+ * form when clicked, or to the previous field if there isn't a next field. This
+ * behavior can be disabled by setting the
+ * [`autoFocusOnClick`](https://ariakit.org/reference/form-remove#autofocusonclick)
+ * prop to `false`.
  * @see https://ariakit.org/components/form
  * @example
- * ```jsx
+ * ```jsx {13}
  * const form = useFormStore({
  *   defaultValues: {
  *     languages: ["JavaScript", "PHP"],
  *   },
  * });
+ *
  * const values = form.useState("values");
  *
  * <Form store={form}>
@@ -62,7 +74,10 @@ export interface FormRemoveOptions<T extends As = "button"> extends ButtonOption
      */
     store?: FormStore;
     /**
-     * Name of the array field.
+     * Name of the array field. This can either be a string or a reference to a
+     * field name from the
+     * [`names`](https://ariakit.org/reference/use-form-store#names) object in the
+     * store, for type safety.
      */
     name: StringLike;
     /**

package/cjs/form/form-reset.d.cts

@@ -15,10 +15,13 @@ import type { FormStore } from "./form-store.js";
  */
 export declare const useFormReset: import("../utils/types.js").Hook<FormResetOptions<"button">>;
 /**
- * Renders a reset buttom in a form.
+ * Renders a button that resets the form to its initial values, as defined by
+ * the
+ * [`defaultValues`](https://ariakit.org/reference/use-form-store#defaultvalues)
+ * prop given to the form store.
  * @see https://ariakit.org/components/form
  * @example
- * ```jsx
+ * ```jsx {4}
  * const form = useFormStore();
  *
  * <Form store={form}>

package/cjs/form/form-reset.d.ts

@@ -15,10 +15,13 @@ import type { FormStore } from "./form-store.js";
  */
 export declare const useFormReset: import("../utils/types.js").Hook<FormResetOptions<"button">>;
 /**
- * Renders a reset buttom in a form.
+ * Renders a button that resets the form to its initial values, as defined by
+ * the
+ * [`defaultValues`](https://ariakit.org/reference/use-form-store#defaultvalues)
+ * prop given to the form store.
  * @see https://ariakit.org/components/form
  * @example
- * ```jsx
+ * ```jsx {4}
  * const form = useFormStore();
  *
  * <Form store={form}>