# Form layout 01

> Simple single-section personal information form with two-column responsive grid layout featuring first name, last name, mobile, pincode, address, landmark, city, and state inputs with save button

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

- Page, with a live preview: https://shadcn.exchange/r/shadcn-studio/form-layout-01
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcn-studio/form-layout-01-light-c2fe238e7b246b0d.png
- Registry item: https://shadcnstudio.com/r/new-york-v4/form-layout-01.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcnstudio.com/r/new-york-v4/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`, `input`, `field`

## Files

### `src/registry/new-york/blocks/dashboard-and-application/form-layout/form-layout-01/page.tsx`

```tsx
import FormLayout from '@/registry/new-york/components/blocks/form-layout-01/form-layout-01'

const FormLayoutPage = () => {
  return (
    <div className='py-8 sm:py-16 lg:py-24'>
      <div className='mx-auto max-w-3xl px-4 sm:px-6 lg:px-8'>
        <FormLayout />
      </div>
    </div>
  )
}

export default FormLayoutPage
```

### `src/registry/new-york/components/blocks/form-layout-01/form-layout-01.tsx`

```tsx
import { Button } from '@/registry/new-york/ui/button'
import { Field, FieldGroup, FieldLabel } from '@/registry/new-york/ui/field'
import { Input } from '@/registry/new-york/ui/input'

const FormLayout = () => {
  return (
    <form>
      <div className='mb-8 space-y-2'>
        <h2 className='text-xl font-semibold'>Personal Information</h2>
        <p className='text-muted-foreground'>
          Please provide your personal information to complete your profile. This will help us tailor our services to
          your needs.
        </p>
      </div>

      <FieldGroup className='grid grid-cols-1 gap-6 sm:grid-cols-2'>
        <Field className='gap-2'>
          <FieldLabel htmlFor='multi-step-personal-info-first-name'>First Name</FieldLabel>
          <Input id='multi-step-personal-info-first-name' placeholder='John' />
        </Field>

        <Field className='gap-2'>
          <FieldLabel htmlFor='multi-step-personal-info-last-name'>Last Name</FieldLabel>
          <Input id='multi-step-personal-info-last-name' placeholder='Doe' />
        </Field>

        <Field className='gap-2'>
          <FieldLabel htmlFor='multi-step-personal-info-mobile'>Mobile</FieldLabel>
          <Input id='multi-step-personal-info-mobile' placeholder='+1 (555) 123-4567' />
        </Field>

        <Field className='gap-2'>
          <FieldLabel htmlFor='multi-step-personal-info-pincode'>Pincode</FieldLabel>
          <Input id='multi-step-personal-info-pincode' placeholder='Postal Code' />
        </Field>

        <Field className='gap-2 sm:col-span-2'>
          <FieldLabel htmlFor='multi-step-personal-info-address'>Address</FieldLabel>
          <Input id='multi-step-personal-info-address' placeholder='123 Main St' />
        </Field>

        <Field className='gap-2 sm:col-span-2'>
          <FieldLabel htmlFor='multi-step-personal-info-landmark'>Landmark</FieldLabel>
          <Input id='multi-step-personal-info-landmark' placeholder='Near Central Park, New York' />
        </Field>

        <Field className='gap-2'>
          <FieldLabel htmlFor='multi-step-personal-info-city'>City</FieldLabel>
          <Input id='multi-step-personal-info-city' placeholder='New York' />
        </Field>

        <Field className='gap-2'>
          <FieldLabel htmlFor='multi-step-personal-info-state'>State</FieldLabel>
          <Input id='multi-step-personal-info-state' placeholder='NY' />
        </Field>
      </FieldGroup>

      <div className='mt-8 flex justify-end'>
        <Button type='submit'>Save Information</Button>
      </div>
    </form>
  )
}

export default FormLayout
```