<main class="usa-section">
    <form class="grid-container">
        <fieldset class="usa-fieldset">
            <legend class="usa-sr-only">Historical figures 1</legend>
            <div class="grid-row grid-gap">
                <div class="usa-checkbox tablet:grid-col-3">
                    <input class="usa-checkbox__input" id="washington" type="checkbox" name="historical-figures-1" value="washington">
                    <label class="usa-checkbox__label" for="washington">Booker T. Washington</label>
                </div>
                <div class="usa-checkbox tablet:grid-col-3">
                    <input class="usa-checkbox__input" id="douglass" type="checkbox" name="historical-figures-1" value="douglass">
                    <label class="usa-checkbox__label" for="douglass">Frederick Douglass</label>
                </div>
                <div class="usa-checkbox tablet:grid-col-3">
                    <input class="usa-checkbox__input" id="truth" type="checkbox" name="historical-figures-1" value="truth" checked>
                    <label class="usa-checkbox__label" for="truth">Sojourner Truth</label>
                </div>
                <div class="usa-checkbox tablet:grid-col-3">
                    <input class="usa-checkbox__input" id="tubman" type="checkbox" name="historical-figures-1" value="tubman">
                    <label class="usa-checkbox__label" for="tubman">Harriet Tubman</label>
                </div>
            </div>
        </fieldset>
    </form>
</main>

No notes defined.

package:
  name: metro-digital-design-system-demo
  version: 0.1.0
uswds:
  path: ../../../dist
placeholderLink: javascript:void()
  • Handle: @multi-column-checkboxes
  • Preview:
  • Filesystem Path: src\components\test\multi-column-checkboxes.njk