Stacked

A single column form with labels stacked above each input and a clear submit action. Ideal for short flows like sign in, contact, or quick profile edits.

import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Separator } from "@/components/ui/separator";
import { Textarea } from "@/components/ui/textarea";

export default function StackedForm() {
  return (
    <div className="container mx-auto px-4 md:px-6 2xl:max-w-[1400px] py-10">
      <Card>
        <CardHeader>
          <CardTitle>Personal Information</CardTitle>
        </CardHeader>
        <CardContent>
          <form>
            <div className="space-y-8">
              {/* Profile section */}
              <div className="space-y-6">
                <div className="space-y-2">
                  <Label htmlFor="name">Name</Label>
                  <Input id="name" placeholder="Enter your name" />
                </div>

                <div className="space-y-2">
                  <Label htmlFor="email">Email</Label>
                  <Input
                    id="email"
                    type="email"
                    placeholder="Enter your email"
                  />
                </div>

                <div className="space-y-2">
                  <Label htmlFor="about">About</Label>
                  <Textarea
                    id="about"
                    placeholder="Write a few sentences about yourself"
                  />
                </div>
              </div>

              <Separator />

              {/* Additional Details */}
              <div className="space-y-6">
                <div>
                  <h3 className="text-lg font-medium">Additional Details</h3>
                  <p className="text-sm text-muted-foreground">
                    Please provide any additional information.
                  </p>
                </div>

                <div className="space-y-2">
                  <Label htmlFor="company">Company</Label>
                  <Input id="company" placeholder="Your company name" />
                </div>

                <div className="space-y-2">
                  <Label htmlFor="role">Role</Label>
                  <Input id="role" placeholder="Your role" />
                </div>

                <div className="space-y-2">
                  <Label htmlFor="country">Country</Label>
                  <Input id="country" placeholder="Your country" />
                </div>
              </div>

              <div className="flex justify-end">
                <Button>Save Changes</Button>
              </div>
            </div>
          </form>
        </CardContent>
      </Card>
    </div>
  );
}

About this block

Stacked Form is a single column profile editor wrapped in a card. A "Personal Information" card title sits at the top, followed by three fields stacked in order: Name, Email, and a free text About textarea. A separator divides that section from a second group titled "Additional Details", which carries a short subtitle and three more fields: Company, Role, and Country. A Save Changes button anchors the bottom right corner of the card.

Each section is independent, so you can add fields, swap the textarea for a different input type, or remove the Additional Details group entirely without touching the surrounding structure. The copy in each label and placeholder, the section titles, and the button label are all straightforward to update.

When to use

Reach for this layout when you need a focused, linear form that a user can complete in one pass without scanning across columns. It suits candidate profile pages, employee onboarding wizards, or quick account settings screens on an HR and hiring platform where clarity matters more than density. Compared to the two column variant it is easier to read on narrow viewports, and compared to the complex form it imposes less cognitive load when the field count is small.

A natural flow around it on an Application page:

Before

A Page Heading to name the screen and provide breadcrumbs before the user reaches the form
A User Profile summary card so candidates can review their current data before editing

After

The Complex Form if the user needs to progress to a more detailed settings step
An Application Stats panel to show progress metrics once the profile is saved

What you can customize

The two sections and six fields cover a common profile shape, but the frame adapts to many short data entry tasks:

Section count. Add a third group below the separator, or remove Additional Details entirely, to match the depth of your actual flow.
Field types. Swap any text input for a select, date picker, or file upload; the stacked label layout accommodates them without layout changes.
Button placement and label. Move the action to the left, add a secondary Cancel button beside it, or rename it to reflect the specific action such as Submit Application or Update Profile.

Tip: keep the total field count under eight so the form stays completable in one scroll without feeling like a long survey.

About this block

When to use

A natural flow around it on an Application page:

Before

A Page Heading to name the screen and provide breadcrumbs before the user reaches the form
A User Profile summary card so candidates can review their current data before editing

After

The Complex Form if the user needs to progress to a more detailed settings step
An Application Stats panel to show progress metrics once the profile is saved

What you can customize

The two sections and six fields cover a common profile shape, but the frame adapts to many short data entry tasks:

Section count. Add a third group below the separator, or remove Additional Details entirely, to match the depth of your actual flow.
Field types. Swap any text input for a select, date picker, or file upload; the stacked label layout accommodates them without layout changes.
Button placement and label. Move the action to the left, add a secondary Cancel button beside it, or rename it to reflect the specific action such as Submit Application or Update Profile.

Tip: keep the total field count under eight so the form stays completable in one scroll without feeling like a long survey.

Stacked

About this block

When to use

What you can customize

Search Shadcn UI Blocks

About this block

When to use

What you can customize