chore: Add form example

packages/ariakit/src/form/__examples__/form/index.tsx

@@ -0,0 +1,28 @@
+import {
+  Form,
+  FormError,
+  FormInput,
+  FormLabel,
+  FormSubmit,
+  useFormState,
+} from "ariakit/form";
+import "./style.css";
+
+export default function Example() {
+  const form = useFormState({ defaultValues: { name: "" } });
+
+  form.useSubmit(() => {
+    alert(JSON.stringify(form.values));
+  });
+
+  return (
+    <Form state={form} className="form">
+      <div className="field">
+        <FormLabel name={form.names.name}>Name</FormLabel>
+        <FormInput name={form.names.name} required placeholder="John Doe" />
+        <FormError name={form.names.name} className="error" />
+      </div>
+      <FormSubmit className="button">Submit</FormSubmit>
+    </Form>
+  );
+}

packages/ariakit/src/form/__examples__/form/style.css

@@ -0,0 +1,41 @@
+@import url("../../../button/__examples__/button/style.css");
+
+.form {
+  @apply flex flex-col gap-4;
+}
+
+.field {
+  @apply flex flex-col gap-2;
+}
+
+.field input {
+  width: 250px;
+  @apply
+    border-none
+    px-4
+    h-10
+    rounded-lg
+    text-base
+    outline-none
+    bg-canvas-1
+    text-canvas-1
+    hover:bg-canvas-1-hover
+    dark:bg-canvas-1-dark
+    dark:text-canvas-1-dark
+    dark:hover:bg-canvas-1-dark-hover
+    ariakit-focus-visible:ariakit-outline;
+}
+
+.error:not(:empty) {
+  @apply
+    py-2
+    px-4
+    border
+    rounded-lg
+    text-danger-1
+    border-danger-1
+    bg-danger-1
+    dark:border-danger-1-dark
+    dark:bg-danger-1-dark
+    dark:text-danger-1-dark;
+}

packages/ariakit/src/form/__examples__/form/test.tsx

@@ -0,0 +1,130 @@
+import {
+  click,
+  getByRole,
+  press,
+  queryByText,
+  render,
+  type,
+} from "ariakit-test-utils";
+import { axe } from "jest-axe";
+import Example from ".";
+
+const getInput = (name: string) => getByRole("textbox", { name });
+const getError = () => queryByText("Constraints not satisfied");
+
+const spyOnAlert = () =>
+  jest.spyOn(window, "alert").mockImplementation(() => {});
+
+let alert = spyOnAlert();
+
+beforeEach(() => {
+  alert = spyOnAlert();
+});
+
+afterEach(() => {
+  alert.mockClear();
+});
+
+test("a11y", async () => {
+  const { container } = render(<Example />);
+  expect(await axe(container)).toHaveNoViolations();
+});
+
+test("focus on the first input by tabbing", async () => {
+  render(<Example />);
+  expect(getInput("Name")).not.toHaveFocus();
+  await press.Tab();
+  expect(getInput("Name")).toHaveFocus();
+});
+
+test("show error on blur", async () => {
+  render(<Example />);
+  expect(getError()).not.toBeInTheDocument();
+  await press.Tab();
+  await press.Tab();
+  expect(getError()).toBeInTheDocument();
+});
+
+test("show error on submit", async () => {
+  render(<Example />);
+  await press.Tab();
+  expect(getError()).not.toBeInTheDocument();
+  await press.Enter();
+  expect(getError()).toBeInTheDocument();
+});
+
+test("focus on input with error on submit", async () => {
+  render(<Example />);
+  await click(getByRole("button"));
+  expect(getInput("Name")).toHaveFocus();
+});
+
+test("fix error on change", async () => {
+  render(<Example />);
+  await press.Tab();
+  await press.Tab();
+  await press.ShiftTab();
+  expect(getError()).toBeInTheDocument();
+  await type("John");
+  expect(getError()).not.toBeInTheDocument();
+});
+
+test("submit form", async () => {
+  render(<Example />);
+  await press.Tab();
+  await type("John");
+  await press.Enter();
+  expect(alert).toHaveBeenCalledWith(JSON.stringify({ name: "John" }));
+});
+
+test("reset form on submit", async () => {
+  render(<Example />);
+  await press.Tab();
+  await type("John");
+  await press.Enter();
+  expect(getInput("Name")).toHaveValue("");
+});
+
+test("markup", () => {
+  const { container } = render(<Example />);
+  expect(container).toMatchInlineSnapshot(`
+    <div>
+      <form
+        class="form"
+        novalidate=""
+      >
+        <div
+          class="field"
+        >
+          <label
+            for="r:p"
+            id="r:o"
+          >
+            Name
+          </label>
+          <input
+            aria-describedby="r:q"
+            aria-labelledby="r:o"
+            id="r:p"
+            name="name"
+            placeholder="John Doe"
+            required=""
+            value=""
+          />
+          <div
+            class="error"
+            id="r:q"
+            role="alert"
+          />
+        </div>
+        <button
+          class="button"
+          data-command=""
+          type="submit"
+        >
+          Submit
+        </button>
+      </form>
+    </div>
+  `);
+});

packages/ariakit/src/form/form-input.ts

@@ -3,6 +3,7 @@ import { useEventCallback } from "ariakit-utils/hooks";
 import { createMemoComponent, useStore } from "ariakit-utils/store";
 import { createElement, createHook } from "ariakit-utils/system";
 import { As, Props } from "ariakit-utils/types";
+import { FocusableOptions, useFocusable } from "../focusable";
 import { FormContext } from "./__utils";
 import { FormFieldOptions, useFormField } from "./form-field";
 import { FormState } from "./form-state";
@@ -50,6 +51,7 @@ export const useFormInput = createHook<FormInputOptions>(
       onChange,
     };
 
+    props = useFocusable(props);
     props = useFormField({ state, name, ...props });
 
     return props;
@@ -75,6 +77,7 @@ export const FormInput = createMemoComponent<FormInputOptions>((props) => {
   return createElement("input", htmlProps);
 });
 
-export type FormInputOptions<T extends As = "input"> = FormFieldOptions<T>;
+export type FormInputOptions<T extends As = "input"> = FocusableOptions<T> &
+  FormFieldOptions<T>;
 
 export type FormInputProps<T extends As = "input"> = Props<FormInputOptions<T>>;

packages/ariakit/src/form/readme.md

@@ -0,0 +1,3 @@
+# Form
+
+<a href="./__examples__/form/index.tsx" data-playground>Example</a>

tailwind.config.js

@@ -269,6 +269,7 @@ module.exports = {
       });
 
       addVariant("ariakit-focus-visible", "&[data-focus-visible]");
+      addVariant("aria-invalid", '&[aria-invalid="true"]');
       addVariant("aria-disabled", '&[aria-disabled="true"]');
       addVariant("aria-selected", '&[aria-selected="true"]');
     }),