<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.

<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>
package:
  name: null
  version: 1.0.0
uswds:
  path: ../../dist
  • Handle: @multi-column-checkboxes
  • Preview:
  • Filesystem Path: src/components/test/multi-column-checkboxes.njk