Form
AppForm layout wrapper with title, description, error and actions slots. `columns` prop renders fields in a 1 or 2 column grid.
<Form
title="Create project"
description="Fill in the details to create a new project."
onSubmit={handleSubmit}
actions={
<>
<Button variant="outline" type="button" onClick={handleCancel}>Cancel</Button>
<Button variant="primary" type="submit">Save project</Button>
</>
}
>
<Input id="name" label="Project name" required value={name} onChange={...} error={nameError} />
<Input id="email" label="Owner email" type="email" required value={email} onChange={...} />
<Select id="visibility" label="Visibility" value={visibility} onChange={...} options={options} />
<Toggle id="notify" label="Send notifications" checked={notify} onChange={setNotify} />
</Form><Form title="Create project" columns={2} onSubmit={handleSubmit} actions={<Button type="submit">Save</Button>}>
<Input id="name" label="Project name" required value={name} onChange={...} />
<Input id="email" label="Owner email" type="email" value={email} onChange={...} />
<Select id="visibility" label="Visibility" value={visibility} onChange={...} options={options} />
<MultiSelect id="stack" label="Tech stack" value={stack} onChange={setStack} options={options} />
<div className="sm:col-span-2">
<Textarea id="description" label="Description" value={description} onChange={...} />
</div>
</Form>