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 (

Personal Information

{/* Profile section */}

Name

About

</div>
              </div>

{/* 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="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>
  );
}
</article></body></html>

Form Layouts

Stacked

Complex FormPreview

Two ColumnPreview