Fieldset

#Example

<fieldset class="fieldset max-w-sm">
  <legend class="legend">Shipping</legend>
  <div class="field">
    <label class="label" for="fs-street">Street</label>
    <input id="fs-street" class="input" autocomplete="street-address">
  </div>
  <label class="label"><input type="checkbox" class="checkbox" checked> Same as billing</label>
</fieldset>

#Classes

2 classes. Click a name to copy it. Utilities on the same element always win over component defaults, so any of them can be adjusted with plain utility classes.

.fieldset:disabled {
  opacity: var(--m-disabled-opacity);
}

:is(.label, .form-control, .checkbox-card, .radio-card, .switch-group-item):has(:disabled) :disabled, .fieldset:disabled :disabled {
  opacity: 1;
}

.legend {
  padding-inline: .375rem;
  margin-inline-start: -.375rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--foreground);
}

#Usage

Components ship inside the same stylesheet as the utilities. There is nothing else to install and no script to load: link Monsoon and write the markup.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">

<!-- Fieldset: start from the base class, then add modifiers -->
<fieldset class="fieldset max-w-sm">
  <legend class="legend">Shipping</legend>
  <div class="field">
    <label class="label" for="fs-street">Street</label>
    <input id="fs-street" class="input" autocomplete="street-address">
  </div>
  <label class="label"><input type="checkbox" class="checkbox" checked> Same as billing</label>
</fieldset>

#Accessibility

• Give every control a visible label linked with for, or an aria-label when the purpose is obvious from context. Link help and error text with aria-describedby; invalid styles use :user-invalid, so they appear only after the user interacts.
• Checkboxes and radios stay real inputs, so they keep native keyboard behavior (Space toggles, arrow keys move within a radio group) and form submission.
• Every interactive part shows a visible focus ring with :focus-visible, and tone colors pair with -foreground tokens that keep text at 4.5:1 or better in light and dark mode.

#Related components