Block

Form Card

Profile or settings form inside a card with label–input pairs and a save action.

Uses:CardInputLabelButton

Playground

Preview
Profile
Manage your account information.

Configure

Yes

Code

<Card className="w-full max-w-md shadow-xl">
  <CardHeader>
    <CardTitle>Profile</CardTitle>
    <CardDescription>Manage your account information.</CardDescription>
  </CardHeader>
  <CardContent className="grid gap-4">
    <div className="grid gap-1.5">
      <Label htmlFor="name">Name</Label>
      <Input id="name" defaultValue="Sarah Chen" />
    </div>
  </CardContent>
  <CardFooter className="justify-between">
    <Button variant="outline">Cancel</Button>
    <Button>Save changes</Button>
  </CardFooter>
</Card>