Form field group

wu-field-group is a <fieldset> of fields with a legend. Fields stack by default.

Class or variable	Effect
`wu-field-group`	Root, on `<fieldset>`. Column of fields, no border
`wu-field-group-legend`	Part, on `<legend>`. Semibold group title
`horizontal`	Fields side by side, wrapping
`sm`, `lg`	One control size for the whole group, passed to inputs, selects, segmented controls, checkboxes, radios and buttons
`--wu-field-group--MinWidth`	Width under which a field wraps in `horizontal`, 12rem by default

Stacked

Contact

Phone

<fieldset class="wu-field-group">
  <legend class="wu-field-group-legend">Contact</legend>
  <div class="wu-field">
    <label class="wu-field-label" for="group-email">Email</label>
    <input class="wu-input" id="group-email" type="email">
  </div>
  <div class="wu-field">
    <label class="wu-field-label" for="group-phone">Phone</label>
    <input class="wu-input" id="group-phone" type="tel">
  </div>
</fieldset>

Horizontal

Address

City

Postal code

<fieldset class="wu-field-group horizontal">
  <legend class="wu-field-group-legend">Address</legend>
  <div class="wu-field">
    <label class="wu-field-label" for="group-city">City</label>
    <input class="wu-input" id="group-city" type="text">
  </div>
  <div class="wu-field">
    <label class="wu-field-label" for="group-zip">Postal code</label>
    <input class="wu-input" id="group-zip" type="text">
  </div>
</fieldset>

One size for the form

sm or lg on the group sets the height and type size of every input, select, segmented control, checkbox and radio inside it, and of every button. A control with its own sm or lg keeps it.

Compact form

Name

Country

<fieldset class="wu-field-group sm">
  <legend class="wu-field-group-legend">Compact form</legend>
  <div class="wu-field">
    <label class="wu-field-label" for="size-name">Name</label>
    <input class="wu-input" id="size-name" type="text">
  </div>
  <div class="wu-field">
    <label class="wu-field-label" for="size-country">Country</label>
    <select class="wu-select" id="size-country">
      <option>Canada</option>
      <option>Germany</option>
    </select>
  </div>
  <label class="wu-checkbox"><input class="wu-checkbox-input" type="checkbox"> <span class="wu-checkbox-label">Subscribe</span></label>
</fieldset>

Right to left

التواصل

البريد الإلكتروني

الهاتف

<fieldset class="wu-field-group">
  <legend class="wu-field-group-legend">التواصل</legend>
  <div class="wu-field">
    <label class="wu-field-label" for="group-rtl-email">البريد الإلكتروني</label>
    <input class="wu-input" id="group-rtl-email" type="email">
  </div>
  <div class="wu-field">
    <label class="wu-field-label" for="group-rtl-phone">الهاتف</label>
    <input class="wu-input" id="group-rtl-phone" type="tel">
  </div>
</fieldset>

Load only the field group

@use "@wovenui/components/field-group";

The field group needs no other component. The examples above also use the field and the input.