Forms

Fieldset

Groups related form controls and labels under a shared accessible legend.

idle

Usage

import { Fieldset, FieldsetLegend } from "@mizen-labs/ui";

The parts and how they nest, taken from the preview above.

<Fieldset>
	<FieldsetLegend />
</Fieldset>

Related personal details belong in one fieldset.

Keep unavailable settings visible and explain who can edit them.

Guidance	Practice
Do	Use a legend that describes the shared question. Keep individual control labels inside the group.

Guidance	Boundary
Scope	Use Field for one control. A visual panel alone does not establish a form group.

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

Prop	Type	Default	Description
`disabled`	`boolean`	`false`	Whether the fieldset and its child controls should ignore user interaction.
`render`	`ReactElement \| ((props: HTMLProps, state: FieldsetRootState) => ReactElement)`	`—`	Custom element or component render function for polymorphic composition.
`ref`	`Ref<HTMLFieldSetElement> \| Ref<HTMLDivElement>`	`—`	React ref forwarded to the underlying element.
`Fieldset`	`FieldsetProps`	`"fieldset"`	Root container grouping shared legend and related form controls.
`FieldsetLegend`	`FieldsetLegendProps`	`"div"`	Accessible legend associated with the fieldset; styled with semantic content foreground and semibold weight.
`FieldsetPrimitive`	`typeof FieldsetPrimitive`	`—`	Low-level Base UI fieldset primitive namespace.