diff --git a/packages/components/src/Form/docs/forms-concept/accessValue.tsx b/packages/components/src/Form/docs/forms-concept/accessValue.tsx index 0a6d0c666..2fa0bd272 100644 --- a/packages/components/src/Form/docs/forms-concept/accessValue.tsx +++ b/packages/components/src/Form/docs/forms-concept/accessValue.tsx @@ -2,23 +2,23 @@ import { Button, ButtonGroup, Form, TextField } from "@hopper-ui/components"; import { useState, type FormEvent } from "react"; export default function Example() { - let [name, setName] = useState(""); + const [name, setName] = useState(""); - let onSubmit = (e: FormEvent) => { - e.preventDefault(); + const onSubmit = (e: FormEvent) => { + e.preventDefault(); - // Submit data to your backend API... - alert(name); - }; + // Submit data to your backend API... + alert(name); + }; - return ( -
- -
You entered: {name}
- - - - - - ); + return ( +
+ +
You entered: {name}
+ + + + + + ); } diff --git a/packages/components/src/Form/docs/forms-concept/customValidation.tsx b/packages/components/src/Form/docs/forms-concept/customValidation.tsx index ef4ee77ad..86eef6d64 100644 --- a/packages/components/src/Form/docs/forms-concept/customValidation.tsx +++ b/packages/components/src/Form/docs/forms-concept/customValidation.tsx @@ -2,14 +2,14 @@ import { Button, ButtonGroup, Form, TextField } from "@hopper-ui/components"; import { useState, type FormEvent } from "react"; export default function Example() { - let [submitted, setSubmitted] = useState | null>(null); + const [submitted, setSubmitted] = useState | null>(null); - let onSubmit = (e: FormEvent) => { + const onSubmit = (e: FormEvent) => { // Prevent default browser page refresh. e.preventDefault(); // Get form data as an object. - let data = Object.fromEntries(new FormData(e.currentTarget)); + const data = Object.fromEntries(new FormData(e.currentTarget)); // Submit to your backend API... setSubmitted(data); diff --git a/packages/components/src/Form/docs/forms-concept/formData.tsx b/packages/components/src/Form/docs/forms-concept/formData.tsx index 41cb02f83..508333dd0 100644 --- a/packages/components/src/Form/docs/forms-concept/formData.tsx +++ b/packages/components/src/Form/docs/forms-concept/formData.tsx @@ -5,7 +5,7 @@ export default function Example() {
value === 'admin' ? 'Nice try!' : null} + validate={value => value === "admin" ? "Nice try!" : null} /> diff --git a/packages/components/src/Form/docs/forms-concept/reactHookForm.tsx b/packages/components/src/Form/docs/forms-concept/reactHookForm.tsx index 66f121cfb..57b65fad0 100644 --- a/packages/components/src/Form/docs/forms-concept/reactHookForm.tsx +++ b/packages/components/src/Form/docs/forms-concept/reactHookForm.tsx @@ -1,46 +1,47 @@ import { Button, Form, TextField } from "@hopper-ui/components"; import { Controller, useForm } from "react-hook-form"; -type FormValues = { - name: string +interface FormValues { + name: string; } export default function Example() { - const {handleSubmit, control} = useForm({ - defaultValues: { - name: "", - }, - }); + const { handleSubmit, control } = useForm({ + defaultValues: { + name: "" + } + }); - const onSubmit = (data: FormValues) => { - // Call your API here... - }; + const onSubmit = (data: FormValues) => { + // Call your API here... + window.alert(data); + }; - return ( - - ( - - )} - /> - - - ); + return ( +
+ ( + + )} + /> + + + ); }