# Form with Workspace Fields

> A form with workspace fields block.

A shadcn/ui block from the [@blocks-so](https://blocks.so) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/blocks-so/form-layout-01).

- Page, with a live preview: https://shadcn.exchange/r/blocks-so/form-layout-01
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/blocks-so/form-layout-01-light-370fa4d3de73b51b.png
- Registry item: https://blocks.so/r/form-layout-01.json
- Categories: form-layout
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://blocks.so/r/form-layout-01.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `button`, `field`, `input`, `separator`

## Files

### `content/components/form-layout/form-layout-01.tsx`

```tsx
import { Button } from '@/components/ui/button';
import { Field, FieldLabel } from '@/components/ui/field';
import { Input } from '@/components/ui/input';
import { Separator } from '@/components/ui/separator';

export default function FormLayout01() {
  return (
    <div className="flex items-center justify-center p-10">
      <div className="sm:mx-auto sm:max-w-2xl">
        <h3 className="text-balance font-semibold text-2xl text-foreground dark:text-foreground">
          Register to workspace
        </h3>
        <p className="mt-1 text-pretty text-muted-foreground text-sm dark:text-muted-foreground">
          Take a few moments to register for your company&apos;s workspace
        </p>
        <form action="#" className="mt-8" method="post">
          <div className="grid grid-cols-1 gap-x-4 gap-y-6 sm:grid-cols-6">
            <div className="col-span-full sm:col-span-3">
              <Field className="gap-2">
                <FieldLabel htmlFor="first-name">
                  First name
                  <span className="text-red-500">*</span>
                </FieldLabel>
                <Input
                  autoComplete="first-name"
                  id="first-name"
                  name="first-name"
                  placeholder="First name"
                  required
                  type="text"
                />
              </Field>
            </div>
            <div className="col-span-full sm:col-span-3">
              <Field className="gap-2">
                <FieldLabel htmlFor="last-name">
                  Last name
                  <span className="text-red-500">*</span>
                </FieldLabel>
                <Input
                  autoComplete="last-name"
                  id="last-name"
                  name="last-name"
                  placeholder="Last name"
                  required
                  type="text"
                />
              </Field>
            </div>
            <div className="col-span-full">
              <Field className="gap-2">
                <FieldLabel htmlFor="email">
                  Email
                  <span className="text-red-500">*</span>
                </FieldLabel>
                <Input
                  autoComplete="email"
                  id="email"
                  name="email"
                  placeholder="Email"
                  required
                  type="email"
                />
              </Field>
            </div>
            <div className="col-span-full">
              <Field className="gap-2">
                <FieldLabel htmlFor="address">Address</FieldLabel>
                <Input
                  autoComplete="street-address"
                  id="address"
                  name="address"
                  placeholder="Address"
                  type="text"
                />
              </Field>
            </div>
            <div className="col-span-full sm:col-span-2">
              <Field className="gap-2">
                <FieldLabel htmlFor="city">City</FieldLabel>
                <Input
                  autoComplete="address-level2"
                  id="city"
                  name="city"
                  placeholder="City"
                  type="text"
                />
              </Field>
            </div>
            <div className="col-span-full sm:col-span-2">
              <Field className="gap-2">
                <FieldLabel htmlFor="state">State</FieldLabel>
                <Input
                  autoComplete="address-level1"
                  id="state"
                  name="state"
                  placeholder="State"
                  type="text"
                />
              </Field>
            </div>
            <div className="col-span-full sm:col-span-2">
              <Field className="gap-2">
                <FieldLabel htmlFor="postal-code">Postal code</FieldLabel>
                <Input
                  autoComplete="postal-code"
                  id="postal-code"
                  name="postal-code"
                  placeholder="Postal code"
                />
              </Field>
            </div>
          </div>
          <Separator className="my-6" />
          <div className="flex items-center justify-end space-x-4">
            <Button
              className="whitespace-nowrap"
              type="button"
              variant="outline"
            >
              Cancel
            </Button>
            <Button className="whitespace-nowrap" type="submit">
              Submit
            </Button>
          </div>
        </form>
      </div>
    </div>
  );
}
```