Form Structure

Field, FieldRow, FormGroup, Fieldset, FieldControl, and ValidationMessage: the layout and validation layer for Onset forms.

Components in this categoryCopy link

FieldCopy link

Field wraps an input with label, description hint, and validation error in one vertical row. It publishes an error state to the controls below via an internal context: any Control-based input inside reads that state and applies its own invalid styling without a per-control flag.

The error context cascades: every Input, Textarea, and NumberInput inside an errored Field renders with a red border and focus ring. An explicit invalid prop on the control itself still wins.

import { Field, Input } from "@solarius/onset";

<Field label="API Key" hint="Found in Settings → API Keys" required>
  <Input placeholder="sk_live_..." />
</Field>;

FieldRowCopy link

FieldRow places multiple Fields on one line with even widths: the standard pattern for amount/currency, start/end date, or city/zip pairs.

import { FieldRow } from "@solarius/onset";

<FieldRow>
  <Field label="Amount">
    <Input prefix="$" />
  </Field>
  <Field label="Currency">
    <Select options={currencyOptions} />
  </Field>
</FieldRow>;

FormGroupCopy link

FormGroup groups related form rows under one shared validation + disabled state. Anything inside can read that state via useFormGroup(), so a server-side error on "billing address" can mark all fields in the group at once instead of being threaded through each of them.

import { FormGroup, useFormGroup, Field, Input } from "@solarius/onset";

<FormGroup
  disabled={loading}
  tone={serverError ? "error" : undefined}
  message={serverError ? "Billing address is invalid" : undefined}
>
  <Field label="Street">
    <Input placeholder="123 Main St" />
  </Field>
  <Field label="City">
    <Input placeholder="San Francisco" />
  </Field>
  <Field label="ZIP">
    <Input placeholder="94105" />
  </Field>
</FormGroup>;

The useFormGroup() hook returns { tone, message, disabled, required, idPrefix } or null outside a group. Controls can opt into group state without requiring a specific wrapper.

FieldsetCopy link

Semantic <fieldset> with a styled legend, sharing FormGroup's validation context. Use this (not FormGroup) when the grouping is meaningful to assistive tech: radio sets, address blocks, permission matrices.

import { Fieldset } from "@solarius/onset";

<Fieldset
  legend="Notifications"
  description="Manage email preferences"
  action={<Switch />}
>
  <Field label="Email">
    <Input type="email" />
  </Field>
</Fieldset>;

FieldControlCopy link

FieldControl is a form row that inherits the surrounding FormGroup's disabled and validation state, and hands its control a generated id via render prop so label association does not have to be wired by hand.

import { FieldControl } from "@solarius/onset";

<FieldControl label="Team name" required>
  {({ id, invalid }) => (
    <Input id={id} invalid={invalid} placeholder="My team" />
  )}
</FieldControl>;

ValidationMessageCopy link

Single-line validation note with a matching icon: error, warning, or success. Used internally by FormGroup and Fieldset, but exported standalone so a custom form layout can display its own summaries without adopting the full group model.

import { ValidationMessage } from "@solarius/onset";
import type { ValidationTone } from "@solarius/onset";

Putting it togetherCopy link

A realistic form section: Fieldset with a toggle action, validation tone from a server error, and a FieldRow for the city/state pair: