Fieldset
A group of related form fields.
Basic Usage
You can use a fieldset element with a corresponding legend to
define a group of related input fields.
To style a Fieldset, give the fieldset element the class cd-fieldset.
Inside this element should be a legend element that describes it.
After the legend, create a div with the class cd-fieldset-content and
place all of the fields inside it.
<fieldset class="cd-fieldset">
<legend>Home Address</legend>
<div class="cd-fieldset-content">
<label class="cd-field">
Street Address
<input type="text" />
</label>
<label class="cd-field">
City
<input type="text" />
</label>
<label class="cd-field">
State
<input type="text" />
</label>
<label class="cd-field">
ZIP Code
<input type="text" />
</label>
</div>
</fieldset>Horizontal Layout
The fields will be stacked vertically by default. To display them in a
single row, add the class cd-orientation-horizontal to the fieldset element.
<fieldset class="cd-fieldset cd-orientation-horizontal">
<legend>Deposit Amount</legend>
<div class="cd-fieldset-content">
<label class="cd-field">
Amount
<input type="number" step="0.01" />
</label>
<label class="cd-field">
Currency
<select>
<option>USD</option>
<option>EUR</option>
<option>CHF</option>
</select>
</label>
</div>
</fieldset>Subtle
You can remove the border and background from a Fieldset by adding the class cd-variant-subtle to the fieldset element.
<fieldset class="cd-fieldset cd-variant-subtle">
<legend>Deposit Amount</legend>
<div
class="cd-fieldset-content cd-orientation-horizontal"
>
<label class="cd-field">
Amount
<input type="number" step="0.01" />
</label>
<label class="cd-field">
Currency
<select>
<option>USD</option>
<option>EUR</option>
<option>CHF</option>
</select>
</label>
</div>
</fieldset>