Form with Workspace Fields

1import { Button } from '@/components/ui/button';
2import { Field, FieldLabel } from '@/components/ui/field';
3import { Input } from '@/components/ui/input';
4import { Separator } from '@/components/ui/separator';
5 
6export default function FormLayout01() {
7  return (
8    <div className="flex items-center justify-center p-10">
9      <div className="sm:mx-auto sm:max-w-2xl">
10        <h3 className="text-balance font-semibold text-2xl text-foreground dark:text-foreground">
11          Register to workspace
12        </h3>
13        <p className="mt-1 text-pretty text-muted-foreground text-sm dark:text-muted-foreground">
14          Take a few moments to register for your company&apos;s workspace
15        </p>
16        <form action="#" className="mt-8" method="post">
17          <div className="grid grid-cols-1 gap-x-4 gap-y-6 sm:grid-cols-6">
18            <div className="col-span-full sm:col-span-3">
19              <Field className="gap-2">
20                <FieldLabel htmlFor="first-name">
21                  First name
22                  <span className="text-red-500">*</span>
23                </FieldLabel>
24                <Input
25                  autoComplete="first-name"
26                  id="first-name"
27                  name="first-name"
28                  placeholder="First name"
29                  required
30                  type="text"
31                />
32              </Field>
33            </div>
34            <div className="col-span-full sm:col-span-3">
35              <Field className="gap-2">
36                <FieldLabel htmlFor="last-name">
37                  Last name
38                  <span className="text-red-500">*</span>
39                </FieldLabel>
40                <Input
41                  autoComplete="last-name"
42                  id="last-name"
43                  name="last-name"
44                  placeholder="Last name"
45                  required
46                  type="text"
47                />
48              </Field>
49            </div>
50            <div className="col-span-full">
51              <Field className="gap-2">
52                <FieldLabel htmlFor="email">
53                  Email
54                  <span className="text-red-500">*</span>
55                </FieldLabel>
56                <Input
57                  autoComplete="email"
58                  id="email"
59                  name="email"
60                  placeholder="Email"
61                  required
62                  type="email"
63                />
64              </Field>
65            </div>
66// … truncated