Fieldset

Fieldset groups related controls such as billing options, notification settings, and permission scopes while preserving native form semantics.

#Default usage

<Fieldset>
  <FieldsetLegend>Billing contact</FieldsetLegend>
  <FieldsetDescription>Used for invoices and payment receipts.</FieldsetDescription>
  <Input aria-label="Billing email" placeholder="billing@example.com" />
</Fieldset>

#Import

import {
  Fieldset,
  FieldsetDescription,
  FieldsetError,
  FieldsetLegend,
} from "@froggdesign/enter-ui-react";

#Patterns

Use Fieldset for settings pages, admin forms, checkout forms, and permission editors where a group label is more accurate than repeating labels per control.

#Accessibility

Fieldset renders native <fieldset> and FieldsetLegend renders native <legend>. disabled disables descendant form controls using browser behavior.

#API

• invalid: marks the group invalid.
• disabled: disables the fieldset.
• Supports native fieldset props and className.

#Styling

Fieldset uses .eui-fieldset classes and FroggDesign tokens for the group surface, legend, description, error text, disabled state, and invalid state.