Base

Class	Description
.ui-fieldset	Base class

Compact

Class	Description
.ui-fieldset--compact	compact

Bordered

Class	Description
.ui-fieldset--bordered	bordered

Override these CSS custom properties to customize the component.

Token	Default	Description
--ui-fieldset-spacing	var(--ui-space-2)	Spacing
--ui-fieldset-border-color	var(--ui-color-border)	Border color
--ui-fieldset-border-width	var(--ui-border-width-sm)	Border thickness
--ui-fieldset-border-radius	var(--ui-radius-md)	Border radius
--ui-fieldset-padding	var(--ui-space-2)	Padding on all sides
--ui-fieldset-legend-size	var(--ui-font-size-sm)	Legend size
--ui-fieldset-legend-weight	var(--ui-font-weight-medium)	Legend weight
--ui-fieldset-legend-color	var(--ui-color-text)	Legend color
--ui-fieldset-spacing-compact	var(--ui-space-1)	Spacing compact
--ui-fieldset-padding-compact	var(--ui-space-1)	Padding compact

<!-- Visible border wrapping the field group -->
<fieldset class="ui-fieldset ui-fieldset--bordered">
  <legend class="ui-fieldset__legend">Shipping Address</legend>
  <div class="ui-field">
    <label class="ui-label" for="street">Street</label>
    <div class="ui-field__control">
      <input class="ui-input" type="text" id="street" placeholder="123 Example St"></input>
    </div>
  </div>
  <div class="ui-field">
    <label class="ui-label" for="city">City</label>
    <div class="ui-field__control">
      <input class="ui-input" type="text" id="city" placeholder="Springfield"></input>
    </div>
  </div>
</fieldset>

<!-- Reduced spacing for dense forms -->
<fieldset class="ui-fieldset ui-fieldset--compact">
  <legend class="ui-fieldset__legend">Preferences</legend>
  <div class="ui-field">
    <label class="ui-label" for="lang">Language</label>
    <div class="ui-field__control">
      <select class="ui-select" id="lang">
        <option>English</option>
        <option>Spanish</option>
      </select>
    </div>
  </div>
  <div class="ui-field">
    <label class="ui-label" for="tz">Timezone</label>
    <div class="ui-field__control">
      <select class="ui-select" id="tz">
        <option>UTC-5 Eastern</option>
        <option>UTC-8 Pacific</option>
      </select>
    </div>
  </div>
</fieldset>

<!-- Bordered with reduced spacing -->
<fieldset class="ui-fieldset ui-fieldset--bordered ui-fieldset--compact">
  <legend class="ui-fieldset__legend">Payment</legend>
  <div class="ui-field">
    <label class="ui-label" for="card">Card Number</label>
    <div class="ui-field__control">
      <input class="ui-input" type="text" id="card" placeholder="4242 4242 4242 4242"></input>
    </div>
  </div>
  <div class="ui-field">
    <label class="ui-label" for="exp">Expiry</label>
    <div class="ui-field__control">
      <input class="ui-input" type="text" id="exp" placeholder="MM/YY"></input>
    </div>
  </div>
</fieldset>

<!-- Native disabled attribute disables all child controls -->
<fieldset class="ui-fieldset ui-fieldset--bordered" disabled>
  <legend class="ui-fieldset__legend">Account (locked)</legend>
  <div class="ui-field">
    <label class="ui-label" for="uname">Username</label>
    <div class="ui-field__control">
      <input class="ui-input" type="text" id="uname" value="janedoe"></input>
    </div>
  </div>
  <div class="ui-field">
    <label class="ui-label" for="role">Role</label>
    <div class="ui-field__control">
      <input class="ui-input" type="text" id="role" value="Editor"></input>
    </div>
  </div>
</fieldset>

<!-- Fieldset as a spacing container without visible legend -->
<fieldset class="ui-fieldset">
  <div class="ui-field">
    <label class="ui-label" for="search">Search</label>
    <div class="ui-field__control">
      <input class="ui-input" type="search" id="search" placeholder="Search..."></input>
    </div>
  </div>
  <div class="ui-field">
    <label class="ui-label" for="cat">Category</label>
    <div class="ui-field__control">
      <select class="ui-select" id="cat">
        <option>All</option>
        <option>Articles</option>
      </select>
    </div>
  </div>
</fieldset>