Smart Form Input

1"use client";
2
3import { useState } from "react";
4import { SmartFormInput } from "@/registry/ui";
5
6export function SmartFormInputEmailExample() {
7  const [email, setEmail] = useState("");
8
9  return (
10    <div className="w-2/3 md:w-3/4 flex justify-center items-center px-4">
11      <SmartFormInput
12        type="email"
13        label="Email"
14        value={email}
15        onChange={setEmail}
16        required
17      />
18    </div>
19  );
20}

1"use client";
2
3import { useState } from "react";
4import { SmartFormInput } from "@/registry/ui";
5
6export function SmartFormInputPasswordExample() {
7  const [password, setPassword] = useState("");
8
9  return (
10    <div className="w-2/3 md:w-3/4 flex justify-center items-center px-4">
11      <SmartFormInput
12        type="password"
13        label="Password"
14        value={password}
15        onChange={setPassword}
16        required
17        asyncValidate={async (password: string) => {
18          const res = await fetch("/api/hibp", {
19            method: "POST",
20            body: JSON.stringify({ password }),
21          });
22
23          const data = await res.json();
24
25          if (data.breached) {
26            return "This password has been exposed in a data breach";
27          }
28
29          return null;
30        }}
31      />
32    </div>
33  );
34}

1"use client";
2
3import { useState } from "react";
4import { SmartFormInput } from "@/registry/ui";
5
6export function SmartFormInputCustomValidationExample() {
7  const [username, setUsername] = useState("");
8
9  return (
10    <div className="w-2/3 md:w-3/4 flex justify-center items-center px-4">
11      <SmartFormInput
12        label="Username"
13        value={username}
14        onChange={setUsername}
15        validate={(val: string) => {
16          if (val.length < 3) return "Must be at least 3 characters";
17          if (!/^[a-z0-9_]+$/i.test(val)) return "Invalid characters";
18          return null;
19        }}
20      />
21    </div>
22  );
23}