FormLayout

Grid-based layout wrapper for arranging form fields in single or multi-column configurations.

Examples

Fields stacked vertically. The default form layout.

First name

Last name

Labels aligned to the left of inputs for compact vertical space.

Name

Role

Two-column grid layout for denser forms.

First name

Last name

Phone

pnpm add @rokle/components @rokle/tokens

Installs with the default Rokle brand. Generate a custom brand on rokle.app to use your own colours and personality.

import { FormLayout } from "@rokle/components";

import { FormLayout } from "@rokle/components";

export function Example() {
  return <FormLayout />;
}

Prop	Type	Default	Description
columns	1 \| 2 \| 3	1	Number of columns in the field grid.
gap	"sm" \| "md" \| "lg"	"md"	Spacing between fields.
children	ReactNode	-	Field components.