Form Layout
Full-form layout patterns — labels on left, simple stacked, per-section cards, and sidebar navigation.
Block
Field · Input · Textarea · Select · Switch · Button
When To Use
- Use Form Layout when you need a composed screen-level pattern and want the structural decisions made before you tune the visuals.
- Start from the example whose layout and information hierarchy already match the workflow you are building.
- Review the examples below to compare density, framing, and emphasis before copying one into production code.
When Not To Use
- Do not use Form Layout when the page structure is still exploratory; start with smaller primitives if the workflow is not stable yet.
- Do not copy a full-screen pattern unchanged when only one fragment of the layout is relevant to the task.
Accessibility Notes
- Maintain heading order and region labels so the surrounding layout stays understandable when styles are stripped away.
- Avoid using visual grouping alone to explain hierarchy; expose the structure semantically as well.
- Make sure drag, resize, and reorder interactions have keyboard alternatives when they are part of the core task.
Key Props / API
Included examples
3-column grid: sidebar label + controls, Single-column vertical stack, Each section in its own card, Sidebar nav + main form area
Variation points
Compare layout, content density, and emphasis across the included examples before copying an implementation.
Example Code
import { Field } from "@hilum/ui";
import { Input } from "@hilum/ui";
import { Textarea } from "@hilum/ui";
import { Button } from "@hilum/ui";
import { Switch } from "@hilum/ui";
import { Label } from "@hilum/ui";
export default function LabelsOnLeftForm() {
return (
<form className="flex flex-col divide-y divide-ground-100" onSubmit={(e) => e.preventDefault()}>
<div className="grid grid-cols-3 gap-8 py-8">
<div>
<p className="body font-semibold text-ground-900">Profile</p>
<p className="mt-1 caption text-ground-400">
This information will be displayed publicly.
</p>
</div>
<div className="col-span-2 flex flex-col gap-4">
// ...trimmed for docsForm Layout · Labels on left
Form Layout · Simple stacked
Single-column vertical stack
Address / personal info form
Form Layout · Cards with separate submits
Each section in its own card
Independent save/cancel per section