Fieldset

A native fieldset element with an easily stylable legend. Use it to group related Field parts under one name. color sets the legend ink. The legend is Light.

Usage guidelines

• Group related controls: Put Fields that belong together inside Root, and name the group with Legend.
• Accessible name: Legend is associated with the fieldset automatically. Prefer it over a separate heading when the controls submit as a group.
• Disabled: disabled on Root ignores the whole group. Nested Field and Checkbox parts pick that up.

Anatomy

<UiFieldsetRoot>
  <UiFieldsetLegend />
</UiFieldsetRoot>

<UiFieldsetRoot>
  <UiFieldsetLegend>Billing details</UiFieldsetLegend>
  <UiFieldRoot>
    <UiFieldLabel>Company</UiFieldLabel>
    <UiFieldControl placeholder="Enter company name" />
  </UiFieldRoot>
  <UiFieldRoot>
    <UiFieldLabel>Tax ID</UiFieldLabel>
    <UiFieldControl placeholder="Enter fiscal number" />
  </UiFieldRoot>
</UiFieldsetRoot>

Examples

Disabled

disabled on Root sets data-disabled on Root and Legend, and nested Fields ignore interaction.

<UiFieldsetRoot disabled>
  <UiFieldsetLegend>Billing details</UiFieldsetLegend>
  …
</UiFieldsetRoot>

Grouping checkboxes

Use Fieldset when a Checkbox Group needs a shared name. Legend labels the group; each checkbox keeps its own label.

<UiFieldsetRoot>
  <UiFieldsetLegend>Allowed network protocols</UiFieldsetLegend>
  <UiCheckboxGroup>
    <label>
      <UiCheckboxRoot name="allowedNetworkProtocols" value="https">
        <UiCheckboxIndicator />
      </UiCheckboxRoot>
      HTTPS
    </label>
  </UiCheckboxGroup>
</UiFieldsetRoot>

API reference

Root

Groups a shared legend with related controls. Renders a <fieldset>.

Root state: { disabled: boolean }.

Legend

An accessible label associated with the fieldset. Renders a <legend>.

Legend state: { disabled: boolean }.