Form with Side Labels

1import { Button } from '@/components/ui/button';
2import { Field, FieldDescription, FieldLabel } from '@/components/ui/field';
3import { Input } from '@/components/ui/input';
4import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
5import {
6  Select,
7  SelectContent,
8  SelectItem,
9  SelectTrigger,
10  SelectValue,
11} from '@/components/ui/select';
12import { Separator } from '@/components/ui/separator';
13import { Textarea } from '@/components/ui/textarea';
14 
15export default function FormLayout02() {
16  return (
17    <div className="flex items-center justify-center p-10">
18      <form>
19        <div className="grid grid-cols-1 gap-10 md:grid-cols-3">
20          <div>
21            <h2 className="text-balance font-semibold text-foreground dark:text-foreground">
22              Personal information
23            </h2>
24            <p className="mt-1 text-pretty text-muted-foreground text-sm leading-6 dark:text-muted-foreground">
25              Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
26            </p>
27          </div>
28          <div className="sm:max-w-3xl md:col-span-2">
29            <div className="grid grid-cols-1 gap-4 sm:grid-cols-6">
30              <div className="col-span-full sm:col-span-3">
31                <Field className="gap-2">
32                  <FieldLabel htmlFor="first-name">First name</FieldLabel>
33                  <Input
34                    autoComplete="given-name"
35                    id="first-name"
36                    name="first-name"
37                    placeholder="Emma"
38                    type="text"
39                  />
40                </Field>
41              </div>
42              <div className="col-span-full sm:col-span-3">
43                <Field className="gap-2">
44                  <FieldLabel htmlFor="last-name">Last name</FieldLabel>
45                  <Input
46                    autoComplete="family-name"
47                    id="last-name"
48                    name="last-name"
49                    placeholder="Crown"
50                    type="text"
51                  />
52                </Field>
53              </div>
54              <div className="col-span-full">
55                <Field className="gap-2">
56                  <FieldLabel htmlFor="email">Email</FieldLabel>
57                  <Input
58                    autoComplete="email"
59                    id="email"
60                    name="email"
61                    placeholder="emma@company.com"
62                    type="email"
63                  />
64                </Field>
65// … truncated