NJ Web Design System (v2.1.0)

Checkbox: Tile 

<form class="usa-form">
    <fieldset class="usa-fieldset">
        <legend class="usa-legend">Select any historical figure</legend>
        <div class="usa-checkbox">
            <input class="usa-checkbox__input usa-checkbox__input--tile" id="check-historical-truth-2" type="checkbox" name="historical-figures-2" value="sojourner-truth" checked>
            <label class="usa-checkbox__label" for="check-historical-truth-2">
                Sojourner Truth
                <span class="usa-checkbox__label-description">
                    This is optional text that can be used to describe the label in more detail.
                </span>
            </label>
        </div>
        <div class="usa-checkbox">
            <input class="usa-checkbox__input usa-checkbox__input--tile" id="check-historical-douglass-2" type="checkbox" name="historical-figures-2" value="frederick-douglass">
            <label class="usa-checkbox__label" for="check-historical-douglass-2">Frederick Douglass</label>
        </div>
        <div class="usa-checkbox">
            <input class="usa-checkbox__input usa-checkbox__input--tile" id="check-historical-washington-2" type="checkbox" name="historical-figures-2" value="booker-t-washington">
            <label class="usa-checkbox__label" for="check-historical-washington-2">Booker T. Washington</label>
        </div>
        <div class="usa-checkbox">
            <input class="usa-checkbox__input usa-checkbox__input--tile" id="check-historical-carver-2" type="checkbox" name="historical-figures-2" value="george-washington-carver" disabled>
            <label class="usa-checkbox__label" for="check-historical-carver-2">George Washington Carver</label>
        </div>
    </fieldset>
</form>

No notes defined.

<form class="usa-form">
  <fieldset class="usa-fieldset">
    <legend class="usa-legend">Select any historical figure</legend>
    <div class="usa-checkbox">
      <input class="usa-checkbox__input usa-checkbox__input--tile" id="check-historical-truth-2" type="checkbox" name="historical-figures-2" value="sojourner-truth" checked>
      <label class="usa-checkbox__label" for="check-historical-truth-2">
        Sojourner Truth
        <span class="usa-checkbox__label-description">
          This is optional text that can be used to describe the label in more detail.
        </span>
      </label>
    </div>
    <div class="usa-checkbox">
      <input class="usa-checkbox__input usa-checkbox__input--tile" id="check-historical-douglass-2" type="checkbox" name="historical-figures-2" value="frederick-douglass">
      <label class="usa-checkbox__label" for="check-historical-douglass-2">Frederick Douglass</label>
    </div>
    <div class="usa-checkbox">
      <input class="usa-checkbox__input usa-checkbox__input--tile" id="check-historical-washington-2" type="checkbox" name="historical-figures-2" value="booker-t-washington">
      <label class="usa-checkbox__label" for="check-historical-washington-2">Booker T. Washington</label>
    </div>
    <div class="usa-checkbox">
      <input class="usa-checkbox__input usa-checkbox__input--tile" id="check-historical-carver-2" type="checkbox" name="historical-figures-2"  value="george-washington-carver" disabled>
      <label class="usa-checkbox__label" for="check-historical-carver-2">George Washington Carver</label>
    </div>
  </fieldset>
</form>
 
package:
  name: null
  version: 2.1.0
uswds:
  path: ../../dist