Component

Legend

An optional hint for the fieldset to describe what it is about.

Fieldset

- html

<!-- COMPONENT-START: nc-fieldset -->
<fieldset class="nc-fieldset" aria-describedby="fieldset-standard-description">
    <legend class="nc-legend nc-input-label">Legend</legend>
    <p class="nc-hint" id="fieldset-standard-description">
        An optional hint for the fieldset to describe what it is about.
    </p>
</fieldset>
<!-- COMPONENT-END: nc-fieldset -->

Link to section titled: Examples

Examples

Standard Fieldset

A more practical example with inputs and a box around it for design purposes.

Standard Example

An optional hint for the fieldset to describe what it is about.

Label Hint is an accessible way to provide additional information that might help the user

Label 2 An error is a good indicator of something that went wrong

Standard Fieldset

- html

<div class="nc-box -bordered">
    <fieldset aria-describedby="fieldset-standard-description">
        <legend class="nc-legend nc-input-label">Standard Example</legend>
        <p class="nc-hint" id="fieldset-standard-description">
            An optional hint for the fieldset to describe what it is about.
        </p>
        <div class="nc-stack">
            <div class="nc-input-field">
                <label for="input" class="nc-stack">
                    <span class="nc-input-label">Label</span>
                    <span class="nc-hint"
                    >Hint is an accessible way to provide additional information that might help the user</span>
                </label>
                <input id="input" class="nc-input" />
            </div>
            <div class="nc-input-field">
                <label for="input2" class="nc-stack">
                    <span class="nc-input-label">Label 2</span>
                    <span class="nc-input-error">An error is a good indicator of something that went wrong</span>
                </label>
                <input id="input2" class="nc-input" />
            </div>
        </div>
    </fieldset>
</div>

Fieldset for single question pages

You can nest an h1 in the legend like this.

Legend as H1

this is a hint for this fieldset

Label Hint is an accessible way to provide additional information that might help the user

Fieldset for single question pages

- html

<fieldset>
    <legend class="nc-legend">
        <h1>Legend as H1</h1>
    </legend>
    <p class="nc-hint">this is a hint for this fieldset</p>
    <div class="nc-input-field">
        <label for="input3" class="nc-stack">
            <span class="nc-input-label">Label</span>
            <span class="nc-hint"
            >Hint is an accessible way to provide additional information that might help the user</span>
        </label>
        <input id="input3" class="nc-input" />
    </div>
</fieldset>