Components
Loading preview...
Here is Form Layout component
@ephraimduncan
npx shadcn@latest add https://21st.dev/r/ephraimduncan/form-layoutimport { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { Separator } from "@/components/ui/separator";
import { Textarea } from "@/components/ui/textarea";
export default function Example() {
return (
<div className="flex items-center justify-center p-10">
<form>
<div className="grid grid-cols-1 gap-10 md:grid-cols-3">
<div>
<h2 className="font-semibold text-foreground dark:text-foreground">
Personal information
</h2>
<p className="mt-1 text-sm leading-6 text-muted-foreground dark:text-muted-foreground">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
</p>
</div>
<div className="sm:max-w-3xl md:col-span-2">
<div className="grid grid-cols-1 gap-4 sm:grid-cols-6">
<div className="col-span-full sm:col-span-3">
<Label
htmlFor="first-name"
className="text-sm font-medium text-foreground dark:text-foreground"
>
First name
</Label>
<Input
type="text"
id="first-name"
name="first-name"
autoComplete="given-name"
placeholder="Emma"
className="mt-2"
/>
</div>
<div className="col-span-full sm:col-span-3">
<Label
htmlFor="last-name"
className="text-sm font-medium text-foreground dark:text-foreground"
>
Last name
</Label>
<Input
type="text"
id="last-name"
name="last-name"
autoComplete="family-name"
placeholder="Crown"
className="mt-2"
/>
</div>
<div className="col-span-full">
<Label
htmlFor="email"
className="text-sm font-medium text-foreground dark:text-foreground"
>
Email
</Label>
<Input
type="email"
id="email"
name="email"
autoComplete="email"
placeholder="emma@company.com"
className="mt-2"
/>
</div>
<div className="col-span-full sm:col-span-3">
<Label
htmlFor="birthyear"
className="text-sm font-medium text-foreground dark:text-foreground"
>
Birth year
</Label>
<Input
type="number"
id="birthyear"
name="year"
placeholder="1990"
className="mt-2"
/>
</div>
<div className="col-span-full sm:col-span-3">
<Label
htmlFor="role"
className="text-sm font-medium text-foreground dark:text-foreground"
>
Role
</Label>
<Input
type="text"
id="role"
name="role"
placeholder="Senior Manager"
disabled
className="mt-2"
/>
<p className="mt-2 text-xs text-muted-foreground dark:text-muted-foreground">
Roles can only be changed by system admin.
</p>
</div>
</div>
</div>
</div>
<Separator className="my-8" />
<div className="grid grid-cols-1 gap-10 md:grid-cols-3">
<div>
<h2 className="font-semibold text-foreground dark:text-foreground">
Workspace settings
</h2>
<p className="mt-1 text-sm leading-6 text-muted-foreground dark:text-muted-foreground">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
</p>
</div>
<div className="sm:max-w-3xl md:col-span-2">
<div className="grid grid-cols-1 gap-4 sm:grid-cols-6">
<div className="col-span-full sm:col-span-3">
<Label
htmlFor="workspace-name"
className="text-sm font-medium text-foreground dark:text-foreground"
>
Workspace name
</Label>
<Input
type="text"
id="workspace-name"
name="workspace-name"
placeholder="Test workspace"
className="mt-2"
/>
</div>
<div className="col-span-full sm:col-span-3">
<Label
htmlFor="visibility"
className="text-sm font-medium text-foreground dark:text-foreground"
>
Visibility
</Label>
<Select name="visibility" defaultValue="private">
<SelectTrigger id="visibility" className="mt-2">
<SelectValue placeholder="Select visibility" />
</SelectTrigger>
<SelectContent>
<SelectItem value="public">Public</SelectItem>
<SelectItem value="private">Private</SelectItem>
</SelectContent>
</Select>
</div>
<div className="col-span-full">
<Label
htmlFor="workspace-description"
className="text-sm font-medium text-foreground dark:text-foreground"
>
Workspace description
</Label>
<Textarea
id="workspace-description"
name="workspace-description"
className="mt-2"
rows={4}
/>
<p className="mt-2 text-xs text-muted-foreground dark:text-muted-foreground">
Note: description provided will not be displayed externally.
</p>
</div>
</div>
</div>
</div>
<Separator className="my-8" />
<div className="grid grid-cols-1 gap-10 md:grid-cols-3">
<div>
<h2 className="font-semibold text-foreground dark:text-foreground">
Notification settings
</h2>
<p className="mt-1 text-sm leading-6 text-muted-foreground dark:text-muted-foreground">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
</p>
</div>
<div className="sm:max-w-3xl md:col-span-2">
<fieldset>
<legend className="text-sm font-medium text-foreground dark:text-foreground">
Team
</legend>
<p className="mt-1 text-sm leading-6 text-muted-foreground dark:text-muted-foreground">
Configure the types of team alerts you want to receive.
</p>
<div className="mt-2">
<div className="flex items-center gap-x-3 py-1">
<Checkbox
id="team-requests"
name="team-requests"
defaultChecked
/>
<Label
htmlFor="team-requests"
className="text-sm font-medium text-foreground dark:text-foreground"
>
Team join requests
</Label>
</div>
<div className="flex items-center gap-x-3 py-1">
<Checkbox
id="team-activity-digest"
name="team-activity-digest"
/>
<Label
htmlFor="team-activity-digest"
className="text-sm font-medium text-foreground dark:text-foreground"
>
Weekly team activity digest
</Label>
</div>
</div>
</fieldset>
<fieldset className="mt-6">
<legend className="text-sm font-medium text-foreground dark:text-foreground">
Usage
</legend>
<p className="mt-1 text-sm leading-6 text-muted-foreground dark:text-muted-foreground">
Configure the types of usage alerts you want to receive.
</p>
<div className="mt-2">
<div className="flex items-center gap-x-3 py-1">
<Checkbox id="api-requests" name="api-requests" />
<Label
htmlFor="api-requests"
className="text-sm font-medium text-foreground dark:text-foreground"
>
API requests
</Label>
</div>
<div className="flex items-center gap-x-3 py-1">
<Checkbox
id="workspace-execution"
name="workspace-execution"
/>
<Label
htmlFor="workspace-execution"
className="text-sm font-medium text-foreground dark:text-foreground"
>
Workspace loading times
</Label>
</div>
<div className="flex items-center gap-x-3 py-1">
<Checkbox
id="query-caching"
name="query-caching"
defaultChecked
/>
<Label
htmlFor="query-caching"
className="text-sm font-medium text-foreground dark:text-foreground"
>
Query caching
</Label>
</div>
<div className="flex items-center gap-x-3 py-1">
<Checkbox id="storage" name="storage" defaultChecked />
<Label
htmlFor="storage"
className="text-sm font-medium text-foreground dark:text-foreground"
>
Storage
</Label>
</div>
</div>
</fieldset>
</div>
</div>
<Separator className="my-8" />
<div className="flex items-center justify-end space-x-4">
<Button type="button" variant="outline" className="whitespace-nowrap">
Go back
</Button>
<Button type="submit" className="whitespace-nowrap">
Save settings
</Button>
</div>
</form>
</div>
);
}