Fieldset

Fieldset gives related controls one semantic boundary, legend and optional description. Choose it for one form decision made from several fields; use a plain layout container when the content is not a single form concept.

Examples

Related contact fields

legend names the group for both sighted and assistive-technology users. Put the supporting context in description, then use FormRow only where fields genuinely belong side by side.

Contact details

How we can reach you about this order.

First name

Last name

Work email

An explicit column count

FormRow normally counts its children. Pass columns when a row needs a fixed equal-width grid, and it still collapses to one column on small screens.

Address

City

State

Postal code

When to use

Use Fieldset when several controls answer one named form question, such as contact details, an address or delivery preferences.

Reach for something else when:

The controls do not form one semantic question — use Stack or Grid for visual layout without implying a relationship to assistive technology.
One value needs a label and help text — use the individual field component rather than adding a fieldset just for spacing.
One choice is made from visible alternatives — use RadioGroup or CheckboxGroup, which supplies the option controls and shared field treatment.

Accessibility

Renders a native <fieldset> and, when supplied, a native <legend>. That is the semantic group name announced with its descendant controls.
description is a visible paragraph below the legend. It is not connected with aria-describedby by the component, so add that relationship yourself when it is required for a particular control.
FormRow is only a responsive div grid. It adds no landmark or group semantics; Fieldset provides the semantic boundary in these examples.

API and code

Name	Type	Required	Description
`legend`	`ReactNode`	—	Legend rendered for the semantic fieldset.
`description`	`ReactNode`	—	Description rendered beneath the legend.
`children`	`ReactNode`	Required	Fields grouped by this fieldset.

FormRow

FormRow places related form fields in equal-width columns and uses the number of children when columns is omitted.

Name	Type	Required	Description
`columns`	`number`	—	Number of equal-width columns. Defaults to the number of children.
`children`	`ReactNode`	Required	Fields arranged in the row.

Without React, retain the native fieldset and set --lyra-formrow-columns for each equal-width row:

html

<fieldset class="lyra-fieldset">
  <legend class="lyra-fieldset__legend">Contact details</legend>
  <p class="lyra-fieldset__desc">How we can reach you about this order.</p>
  <div class="lyra-fieldset__fields">
    <div class="lyra-formrow" style="--lyra-formrow-columns: repeat(2, minmax(0, 1fr));">
      <div class="lyra-field">
        <label class="lyra-label" for="first-name">First name</label>
        <input class="lyra-input" id="first-name" />
      </div>
      <div class="lyra-field">
        <label class="lyra-label" for="last-name">Last name</label>
        <input class="lyra-input" id="last-name" />
      </div>
    </div>
  </div>
</fieldset>

<lyra:fieldset> Generated from lyra-ds/blade v0.10.0.

This component takes no props — drop the tag in.

blade

<lyra:fieldset>
    <x-slot:legend>Billing address</x-slot:legend>
    <x-slot:description>We use this address on every invoice.</x-slot:description>
    <lyra:input name="street" label="Street" />
    <lyra:input name="city" label="City" />
</lyra:fieldset>