FormLayout
FormLayout arranges fields in spaced form sections.
Source
LLM docs
Package
Examples
2
Properties
31
Basics
FormLayout arranges fields in spaced form sections.
Loading demo…
import { FormLayout, FormSection, Input } from '@plocks/ui';
export function Demo() {
return (
<FormLayout variant="card">
<FormSection title="Profile">
<Input label="Name" placeholder="Your name" />
<Input label="Email" placeholder="you@example.com" />
</FormSection>
</FormLayout>
);
}Variants
Compare plain form spacing, the bordered card, and the raised modal surface.
Loading demo…
import { Column, FormLayout, FormSection, Input, Text } from '@plocks/ui';
const variants = ['default', 'card', 'modal'] as const;
export function Demo() {
return (
<Column gap="lg" fullWidth>
{variants.map(variant => (
<Column key={variant} gap="xs" fullWidth>
<Text fw="semibold">{variant}</Text>
<FormLayout variant={variant}>
<FormSection title="Profile"><Input label="Name" placeholder="Your name" /></FormSection>
</FormLayout>
</Column>
))}
</Column>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources