Form

function FormDemo() {  const [submitted, setSubmitted] = useState<LoginValues | null>(null)​  const form = Form.useForm<LoginValues>({    defaultValues: { email: "", password: "" },    validators: {      email: (v) => (!v.includes("@") ? "Email nggak valid" : undefined),      password: (v) => (v.length < 8 ? "Minimal 8 karakter" : undefined),    },    onSubmit: async (values) => {      setSubmitted(values)    },  })​  return (    <Stack as="form" gap="4" maxW="sm" onSubmit={form.handleSubmit}>      <Form.Field meta={form.getFieldMeta("email")} label="Email" required>        <Input type="email" placeholder="kamu@contoh.com" {...form.getInputProps("email")} />      </Form.Field>​      <Form.Field        meta={form.getFieldMeta("password")}        label="Password"        required        helperText="Minimal 8 karakter."      >        <Input type="password" {...form.getInputProps("password")} />      </Form.Field>​      <HStack gap="3">        <Button type="submit" loading={form.isSubmitting}>          Masuk        </Button>        <Button type="button" variant="outline" onClick={() => { form.reset(); setSubmitted(null) }}>          Reset        </Button>      </HStack>​      {submitted && (        <Text fontSize="sm" color="fg.muted">          Submitted: {submitted.email}        </Text>      )}    </Stack>  )}