Form

"use client";import { Button } from "@/components/vip-ui/button";import { Form } from "@/components/vip-ui/form";import { TextField } from "@/components/vip-ui/text-field";export function FormDemo() {  return (    <Form      className="w-full max-w-sm"      onSubmit={(event) => {        event.preventDefault();      }}    >      <TextField        label="Email address"        name="email"        type="email"        autoComplete="email"        isRequired        placeholder="teammate@example.com"      />      <Button type="submit">Invite teammate</Button>    </Form>  );}

"use client";import { Button } from "@/components/vip-ui/button";import { Form } from "@/components/vip-ui/form";import { TextField } from "@/components/vip-ui/text-field";export function FormValidationDemo() {  return (    <Form      className="w-full max-w-sm"      onSubmit={(event) => {        event.preventDefault();      }}    >      <TextField        label="Workspace name"        name="workspace"        isRequired        description="Use 3 or more characters."        validate={(value) =>          value.trim().length < 3 ? "Enter 3 or more characters." : null        }      />      <Button type="submit">Create workspace</Button>    </Form>  );}

"use client";import { useState } from "react";import { Button } from "@/components/vip-ui/button";import { Form } from "@/components/vip-ui/form";import { TextField } from "@/components/vip-ui/text-field";const takenUsernames = ["admin", "maya"];export function FormServerErrorsDemo() {  const [errors, setErrors] = useState<Record<string, string>>({});  return (    <Form      className="w-full max-w-sm"      validationErrors={errors}      onSubmit={(event) => {        event.preventDefault();        const username = String(          new FormData(event.currentTarget).get("username") ?? "",        );        setErrors(          takenUsernames.includes(username.trim().toLowerCase())            ? { username: "This username is taken." }            : {},        );      }}    >      <TextField        label="Username"        name="username"        defaultValue="maya"        isRequired      />      <Button type="submit">Save</Button>    </Form>  );}