18F/web-design-standards

<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
        {% if disabled_state == "disabled" %}disabled{% endif %} 
        {% if disabled_state == "aria-disabled" %}aria-disabled="true"{% endif %}
      >
      <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"
        {% if indeterminate_state %}data-indeterminate{% endif %}
        {% if disabled_state == "disabled" %}disabled{% endif %} 
        {% if disabled_state == "aria-disabled" %}aria-disabled="true"{% endif %}
      >
      <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"
        {% if disabled_state == "disabled" %}disabled{% endif %} 
        {% if disabled_state == "aria-disabled" %}aria-disabled="true"{% endif %}
      >
      <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>