Components

Fieldsets

The fieldset element is used to group several controls as well as labels within a web form. A fieldset includes each of the following:

Types

Fieldset with checkboxes

Basic legend Use block helper text for instructions

HTML code snippet

<form class="o-form">
<legend class="a-legend">
Basic legend
    <small class="a-label__helper a-label__helper--block">Use block helper text for instructions</small>
</legend>
    <div class="o-form__group">
        <fieldset class="o-form__fieldset">
            <div class="m-form-field m-form-field--checkbox">
                <input class="a-checkbox" type="checkbox" id="test_checkbox_1" name="test_checkbox">
                <label class="a-label" for="test_checkbox_1">Inline label</label>
            </div>
            <div class="m-form-field m-form-field--checkbox">
                <input class="a-checkbox" type="checkbox" id="test_checkbox_2" name="test_checkbox">
                <label class="a-label" for="test_checkbox_2">Inline label</label>
            </div>
        </fieldset>
    </div>
</form>

Fieldset with radio buttons

Basic legend Use block helper text for instructions

HTML code snippet

<form class="o-form">
<legend class="a-legend">
Basic legend
    <small class="a-label__helper a-label__helper--block">Use block helper text for instructions</small>
</legend>
    <div class="o-form__group">
        <fieldset class="o-form__fieldset">
            <div class="m-form-field m-form-field--radio">
                <input class="a-radio" type="radio" id="test_radio_1" name="test_radio">
                <label class="a-label" for="test_radio_1">Inline label</label>
            </div>
            <div class="m-form-field m-form-field--radio">
                <input class="a-radio" type="radio" id="test_radio_2" name="test_radio">
                <label class="a-label" for="test_radio_2">Inline label</label>
            </div>
        </fieldset>
    </div>
</form>

Sizes

Large target fieldset with checkboxes

Basic legend Use block helper text for instructions

HTML code snippet

<form class="o-form">
<legend class="a-legend">
Basic legend
    <small class="a-label__helper a-label__helper--block">Use block helper text for instructions</small>
</legend>
    <div class="o-form__group">
        <fieldset class="o-form__fieldset">
            <div class="m-form-field
                        m-form-field--checkbox
                        m-form-field--lg-target">
                <input class="a-checkbox" type="checkbox" id="test_checkbox_lg_default_1">
                <label class="a-label" for="test_checkbox_lg_default_1">Inline label</label>
            </div>
            <div class="m-form-field
                        m-form-field--checkbox
                        m-form-field--lg-target">
                <input class="a-checkbox" type="checkbox" id="test_checkbox_lg_default_2">
                <label class="a-label" for="test_checkbox_lg_default_2">Inline label</label>
            </div>
            <div class="m-form-field
                        m-form-field--checkbox
                        m-form-field--lg-target">
                <input class="a-checkbox" type="checkbox" id="test_checkbox_lg_default_3">
                <label class="a-label" for="test_checkbox_lg_default_3">Inline label</label>
            </div>
            <div class="m-form-field
                        m-form-field--checkbox
                        m-form-field--lg-target">
                <input class="a-checkbox" type="checkbox" id="test_checkbox_lg_default_4">
                <label class="a-label" for="test_checkbox_lg_default_4">Inline label</label>
            </div>
        </fieldset>
    </div>
</form>

Large target fieldset with radio buttons

Basic legend Use block helper text for instructions

HTML code snippet

<fieldset class="o-form__fieldset">
<legend class="a-legend">
Basic legend
    <small class="a-label__helper a-label__helper--block">Use block helper text for instructions</small>
</legend>

                <div class="m-form-field
                            m-form-field--radio m-form-field--lg-target">
                    <input class="a-radio" id="is_helpful_1" type="radio" name="is_helpful" value="1">
                        <label class="a-label" for="is_helpful_1">Inline label
                        </label>
                </div>

                <div class="m-form-field
                            m-form-field--radio m-form-field--lg-target">
                    <input class="a-radio" id="is_helpful_2" type="radio" name="is_helpful" value="0">
                        <label class="a-label" for="is_helpful_2">Inline label
                        </label>
                </div>

                <div class="m-form-field
                            m-form-field--radio m-form-field--lg-target">
                    <input class="a-radio" id="is_helpful_3" type="radio" name="is_helpful" value="0">
                        <label class="a-label" for="is_helpful_3">Inline label
                        </label>
                </div>

                <div class="m-form-field
                            m-form-field--radio m-form-field--lg-target">
                    <input class="a-radio" id="is_helpful_4" type="radio" name="is_helpful" value="0">
                        <label class="a-label" for="is_helpful_4">Inline label
                        </label>
                </div>
    </fieldset>

Latest Updates

Page last edited:
Show all details
Edit page