When to group
Brio resets fieldsets to a bare container, so the vertical spacing comes from
compositions, such as .stack. You can nest stacks together to create
different views, add dividers, and adjust the text as needed.
<fieldset class="stack is-snug" style="max-inline-size: 24rem">
<legend class="text-bold">Shipping address</legend>
<hr class="divider is-tight" />
<div class="stack is-tight">
<label for="ship-street">Street</label>
<input id="ship-street" type="text" class="input" required />
</div>
<div class="stack is-tight">
<label for="ship-city">City</label>
<input id="ship-city" type="text" class="input" required />
</div>
<div class="stack is-tight">
<label for="ship-postal">Postal code</label>
<input id="ship-postal" type="text" class="input" required />
</div>
</fieldset>
Choice groups
Radio buttons and checkboxes are often grouped together. So, a fieldset can be helpful as the top label, describing what the choice is.
<fieldset class="stack is-snug" style="max-inline-size: 24rem">
<legend class="text--1 text-bold">Visibility</legend>
<div class="cluster is-snug">
<label class="cluster is-tight">
<input type="radio" name="visibility" value="public" class="input" checked />
Public
</label>
<label class="cluster is-tight">
<input type="radio" name="visibility" value="team" class="input" />
Team only
</label>
</div>
</fieldset>
Disabling a group
Setting disabled on the fieldset disables every control inside it at once.
<fieldset class="stack" disabled style="max-inline-size: 24rem">
<legend class="text-bold">Billing address</legend>
<hr class="divider is-tight" />
<div class="stack is-tight">
<label for="bill-street">Street</label>
<input id="bill-street" type="text" class="input" required />
</div>
<div class="stack is-tight">
<label for="bill-city">City</label>
<input id="bill-city" type="text" class="input" required />
</div>
</fieldset>