Fieldset

Semantic group of related fields with an optional legend, the HTML fieldset / legend pair.

A Fieldset semantically groups related fields with an accessible legend, the native HTML <fieldset> / <legend> pair. Screen readers announce the legend when entering any field inside the group, which is particularly valuable for radio/checkbox groupings that share a single question.

For purely visual grouping without the accessibility semantics, use a Section (see Related below).

Properties

PropertyDescription
legend
string
default: Group
Legend text rendered in the native <legend>. Announced by screen readers when focus enters any field inside the group.

Fields are placed inside a Fieldset by nesting them in the designer, there are no per-child props on the container itself.

JavaScript recipes

Require the whole group when one trigger is set

f365.events.onChange((e) => {
  if (e.fieldKey !== 'HasDependants') return;
  for (const key of ['DependantName', 'DependantDob']) {
    f365.field(key).required = Boolean(e.newValue);
  }
});

Show or hide every field in the group together

f365.events.onLoad(() => {
  const show = f365.field('PaymentType').value === 'Card';
  for (const key of ['CardNumber', 'CardExpiry', 'CardCvc']) {
    f365.field(key).visible = show;
  }
});

Related articles

  • Section container

    A grouping block that visually separates related fields with a heading and optional collapse behaviour.

  • Card container

    A grouping block with elevation and rounded corners, visually distinct from the surrounding form.

  • Container

    A generic wrapper with configurable padding, background, and border, a styling shim with no semantic baggage.