Fieldset

Groups related controls under a legend.

<mm-fieldset label="Connection" description="Marmot connects with a read-only service account.">
  <mm-text-field name="host" label="Host" mono></mm-text-field>
  <mm-number-field name="port" label="Port" value="443"></mm-number-field>
</mm-fieldset>

Guidance

Fieldsets group related controls under one legend: "Schedule", "Notifications", "Connection". The legend uses the label style, an optional description sits under it, and controls stack space-4 apart (space-2 for a list of checkboxes or switches). There is no box by default, because structure should be felt and not seen; bordered adds a single hairline when a group must stand apart inside a long form.

disabled disables every control inside, native and Marmot alike, and restores exactly the controls it disabled when cleared. The legend and description name and describe the group for assistive technology through a native fieldset in the shadow root.

Properties

Property	Attribute	Type	Default	Description
label	label	string	''	The legend.
description	description	string	''	A sentence under the legend explaining the group.
error	error	string	''	Error text for the group as a whole, such as "Choose at least one channel."
disabled	disabled	boolean	false	Disables every control inside.
bordered	bordered	boolean	false	Adds a hairline border. Off by default.
required	required	boolean	false	Shows "Required" or "Optional" beside the legend.
optional	optional	boolean	false

Slots

Slot	Description
Default	The controls.
label	A rich legend, in place of the label attribute.

CSS parts

Part	Description
fieldset	The native fieldset.
legend	The legend.
description	The description line.
controls	The wrapper that spaces the controls.
error	The error line.

Examples

Every state of mm-fieldset in Storybook, with keyboard and screen reader tests.