CSS Components and Styleguide

Fieldsets

Example

Default

Super Powers Info

With the fieldset and fieldset__legend classes.

Super Powers Info
Markup: forms/forms-fieldset.html
                    <p>Default </p>
<fieldset>
    <legend>Super Powers Info</legend>
    <label class="label" for="fieldset-alias-default">Super Power Alias</label>
    <input class="input" type="text" id="fieldset-alias-default" />
</fieldset>

<p>
    With the <strong>fieldset</strong> and <strong>fieldset__legend</strong> classes.
</p>
<fieldset class="fieldset">
    <legend class="fieldset__legend">Super Powers Info</legend>
    <label class="label" for="fieldset-alias">Super Power Alias</label>
    <input class="input" type="text" id="fieldset-alias" />
</fieldset>

                  
Source: forms/_forms.scss, line 156