1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import {
Form,
FormError,
FormInput,
FormLabel,
FormReset,
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>
<FormReset className="button secondary">Reset</FormReset>
</Form>
);
}