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 |