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

Teacher

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

NameValue
$fieldset-shadow$box-shadow
$fieldset-border-radius$radius-large
$fieldset-border1px solid $border
$fieldset-padding1.25em
$fieldset-legend-color$grey-darker
$fieldset-legend-weight$weight-bold