Form

Accessible form container with integrated validation state management and submission handling.

Examples

A simple contact form with name, email, and message.

Form with inline validation states and error messages.

Label and input side by side in a two-column layout.

Compact inline form on a single row.

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 { Form } from "@rokle/components";

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

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

Prop	Type	Default	Description
onSubmit	(values: Record<string, unknown>) => void	-	Called with form values on valid submission.
defaultValues	Record<string, unknown>	{}	Initial field values.
children	ReactNode	-	Form field elements.