FormGroup
Form Structure

FormGroup

Groups related form rows under one shared validation + disabled state. Anything inside can read that state via useFormGroup().

Props

FormGroupProps props
PropTypeDefaultDescription
childrenReactNode—Form rows to group together.
disabledboolean—Disabled state inherited by descendants that read the group context.
requiredboolean—Passed through to FieldControls via context.
toneValidationTone—Group-level validation tone: "error" | "warning" | "success".
messageReactNode—Validation summary rendered under the group.
layout"stack" | "row""stack"Stack rows in a column or lay them out side by side.
gap"tight" | "normal" | "loose""normal"Spacing between form rows.

Usage

With validation tone and message

FormGroup with error

Disabled

Disabled FormGroup
ImportTSX
import { FormGroup } from "@solarius/onset";
import type { FormGroupProps } from "@solarius/onset";
import { useFormGroup } from "@solarius/onset";

<FormGroup tone="error" message="Fix the errors below to continue.">
  <Field label="Full name" error="Required">
    <Input placeholder="John Doe" invalid />
  </Field>
</FormGroup>

<FormGroup disabled layout="row" gap="tight">
  <Field label="Start"><Input /></Field>
  <Field label="End"><Input /></Field>
</FormGroup>