Fieldset
Form Structure

Fieldset

Semantic fieldset with a styled legend, sharing FormGroup's validation context. Use when the grouping is meaningful to assistive tech.

Props

FieldsetProps props
PropTypeDefaultDescription
legendReactNode—Fieldset legend text.
descriptionReactNode—Dim explanatory line under the legend.
actionReactNode—Right-aligned control in the legend row (a Switch that enables the section, typically).
childrenReactNode—Form content inside the fieldset.
toneValidationTone—Validation tone: "error" | "warning" | "success".
messageReactNode—Validation summary rendered under the group.
requiredboolean—Appends a red asterisk to the legend.
borderedbooleantrueDraws the bordered box. Off gives a plain labeled block.

Fieldset extends FieldsetHTMLAttributes<HTMLFieldSetElement>.

Usage

Bordered

Bordered Fieldset

Unbordered

Unbordered Fieldset

With action toggle

Fieldset with toggle

With validation

Fieldset with validation
ImportTSX
import { Fieldset } from "@solarius/onset";
import type { FieldsetProps } from "@solarius/onset";

<Fieldset legend="Billing address" description="Used for invoices.">
  <Field label="Street"><Input placeholder="123 Main St" /></Field>
</Fieldset>

<Fieldset legend="Notifications" action={<Switch checked />}>
  <Field label="Email"><Input /></Field>
</Fieldset>