Fieldset / Groups
This content is for v4. Click here to see the latest version.
Wraps a list of fields inside of a group with a label on top.
Showcase
Code
<!-- Wrap your field in a fieldset with the class 'fieldset' -->
<fieldset class="fieldset">
    <!-- Use the the legend element to control what text to show at the top of the group -->
    <legend>Teacher</legend>
    <div class="field">
        <label class="label">Name</label>
        <div class="control">
            <input readonly="true" type="text" class="input" placeholder="Teacher name" value="">
        </div>
        <p class="help"></p>
    </div>
    <div class="field"><label class="label">Subject</label>
        <div class="control">
            <input readonly="true" type="text" class="input" placeholder="Taught subject" value="">
        </div>
        <p class="help"></p>
    </div>
</fieldset>See dynamic form example for an interactive example.
Variables
| Name | Value | 
|---|---|
$fieldset-shadow | $box-shadow | 
$fieldset-border-radius | $radius-large | 
$fieldset-border | 1px solid $border | 
$fieldset-padding | 1.25em | 
$fieldset-legend-color | $grey-darker | 
$fieldset-legend-weight | $weight-bold |