A fieldset groups related fields under one
legend. No class name needed. The fields inside
stack, and their labels step down a level so the legend reads as
the heading.
Works with
Field- The labelled fields it groups
Standalone
<link rel="stylesheet" href="https://esm.sh/@erikt/ui/fieldset.css" />Default
<fieldset>
<legend>Shipping address</legend>
<label class="field">
<span>Street</span>
<input type="text" placeholder="12 Main Street" />
</label>
<label class="field">
<span>City</span>
<input type="text" placeholder="Copenhagen" />
</label>
</fieldset>Side by side
erikt/ui leaves layout to you. Set the direction on the fieldset itself. The legend stays on top.
<fieldset style="flex-direction: row">
<legend>Primary color</legend>
<label class="field">
<span>Light</span>
<input type="color" value="#1e90ff" />
</label>
<label class="field">
<span>Dark</span>
<input type="color" value="#5aa8ff" />
</label>
</fieldset>With description
Put a small after the fields for a hint.
<fieldset>
<legend>Password</legend>
<label class="field">
<span>New password</span>
<input type="password" />
</label>
<label class="field">
<span>Repeat password</span>
<input type="password" />
</label>
<small>Use at least 12 characters.</small>
</fieldset>