@patternfly/patternfly 5.0.0-alpha.10 → 5.0.0-alpha.12

package/docs/components/Table/examples/Table.md

@@ -515,11 +515,14 @@ These classes can be used to ensure that the table changes between the tabular a
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-checkboxes-and-actions-checkrowthead"
-            aria-label="Select all rows"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-checkboxes-and-actions-checkrowthead"
+              aria-label="Select all rows"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" scope="col">Repositories</th>
@@ -535,11 +538,14 @@ These classes can be used to ensure that the table changes between the tabular a
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-checkboxes-and-actions-checkrow1"
-            aria-labelledby="table-checkboxes-and-actions-node1"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-checkboxes-and-actions-checkrow1"
+              aria-labelledby="table-checkboxes-and-actions-node1"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -598,11 +604,14 @@ These classes can be used to ensure that the table changes between the tabular a
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-checkboxes-and-actions-checkrow2"
-            aria-labelledby="table-checkboxes-and-actions-node2"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-checkboxes-and-actions-checkrow2"
+              aria-labelledby="table-checkboxes-and-actions-node2"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -662,11 +671,14 @@ These classes can be used to ensure that the table changes between the tabular a
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-checkboxes-and-actions-checkrow3"
-            aria-labelledby="table-checkboxes-and-actions-node3"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-checkboxes-and-actions-checkrow3"
+              aria-labelledby="table-checkboxes-and-actions-node3"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -726,11 +738,14 @@ These classes can be used to ensure that the table changes between the tabular a
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-checkboxes-and-actions-checkrow4"
-            aria-labelledby="table-checkboxes-and-actions-node4"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-checkboxes-and-actions-checkrow4"
+              aria-labelledby="table-checkboxes-and-actions-node4"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -816,11 +831,14 @@ These classes can be used to ensure that the table changes between the tabular a
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="radio"
-            name="table-single-select-radio-radio"
-            aria-labelledby="table-single-select-radio-node1"
-          />
+          <div class="pf-c-radio pf-m-standalone">
+            <input
+              class="pf-c-radio__input"
+              type="radio"
+              name="table-single-select-radio-radio"
+              aria-labelledby="table-single-select-radio-node1"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -879,11 +897,14 @@ These classes can be used to ensure that the table changes between the tabular a
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="radio"
-            name="table-single-select-radio-radio"
-            aria-labelledby="table-single-select-radio-node2"
-          />
+          <div class="pf-c-radio pf-m-standalone">
+            <input
+              class="pf-c-radio__input"
+              type="radio"
+              name="table-single-select-radio-radio"
+              aria-labelledby="table-single-select-radio-node2"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -943,11 +964,14 @@ These classes can be used to ensure that the table changes between the tabular a
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="radio"
-            name="table-single-select-radio-radio"
-            aria-labelledby="table-single-select-radio-node3"
-          />
+          <div class="pf-c-radio pf-m-standalone">
+            <input
+              class="pf-c-radio__input"
+              type="radio"
+              name="table-single-select-radio-radio"
+              aria-labelledby="table-single-select-radio-node3"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -1007,11 +1031,14 @@ These classes can be used to ensure that the table changes between the tabular a
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="radio"
-            name="table-single-select-radio-radio"
-            aria-labelledby="table-single-select-radio-node4"
-          />
+          <div class="pf-c-radio pf-m-standalone">
+            <input
+              class="pf-c-radio__input"
+              type="radio"
+              name="table-single-select-radio-radio"
+              aria-labelledby="table-single-select-radio-node4"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -1120,11 +1147,14 @@ Note: Table column widths will respond automatically when toggling expanded rows
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-expandable-checkrowthead"
-            aria-label="Select all rows"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-expandable-checkrowthead"
+              aria-label="Select all rows"
+            />
+          </div>
         </label>
       </td>
       <th
@@ -1196,11 +1226,14 @@ Note: Table column widths will respond automatically when toggling expanded rows
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-expandable-checkrow1"
-            aria-labelledby="table-expandable-node1"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-expandable-checkrow1"
+              aria-labelledby="table-expandable-node1"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -1288,11 +1321,14 @@ Note: Table column widths will respond automatically when toggling expanded rows
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-expandable-checkrow2"
-            aria-labelledby="table-expandable-node2"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-expandable-checkrow2"
+              aria-labelledby="table-expandable-node2"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -1378,11 +1414,14 @@ Note: Table column widths will respond automatically when toggling expanded rows
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-expandable-checkrow3"
-            aria-labelledby="table-expandable-node3"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-expandable-checkrow3"
+              aria-labelledby="table-expandable-node3"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -1468,11 +1507,14 @@ Note: Table column widths will respond automatically when toggling expanded rows
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-expandable-checkrow4"
-            aria-labelledby="table-expandable-node4"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-expandable-checkrow4"
+              aria-labelledby="table-expandable-node4"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -1573,11 +1615,14 @@ Note: Table column widths will respond automatically when toggling expanded rows
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="expandable-set-width-columns-example-checkrowthead"
-            aria-label="Select all rows"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="expandable-set-width-columns-example-checkrowthead"
+              aria-label="Select all rows"
+            />
+          </div>
         </label>
       </td>
       <th
@@ -1649,11 +1694,14 @@ Note: Table column widths will respond automatically when toggling expanded rows
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="expandable-set-width-columns-example-checkrow1"
-            aria-labelledby="expandable-set-width-columns-example-node1"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="expandable-set-width-columns-example-checkrow1"
+              aria-labelledby="expandable-set-width-columns-example-node1"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -1746,11 +1794,14 @@ Note: Table column widths will respond automatically when toggling expanded rows
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="expandable-set-width-columns-example-checkrow2"
-            aria-labelledby="expandable-set-width-columns-example-node2"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="expandable-set-width-columns-example-checkrow2"
+              aria-labelledby="expandable-set-width-columns-example-node2"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -1844,11 +1895,14 @@ Note: Table column widths will respond automatically when toggling expanded rows
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="expandable-set-width-columns-example-checkrow3"
-            aria-labelledby="expandable-set-width-columns-example-node3"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="expandable-set-width-columns-example-checkrow3"
+              aria-labelledby="expandable-set-width-columns-example-node3"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -1938,11 +1992,14 @@ Note: Table column widths will respond automatically when toggling expanded rows
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="expandable-set-width-columns-example-checkrow4"
-            aria-labelledby="expandable-set-width-columns-example-node4"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="expandable-set-width-columns-example-checkrow4"
+              aria-labelledby="expandable-set-width-columns-example-node4"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -2045,11 +2102,14 @@ Note: Table column widths will respond automatically when toggling expanded rows
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-expandable-nested-table-checkrowthead"
-            aria-label="Select all rows"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-expandable-nested-table-checkrowthead"
+              aria-label="Select all rows"
+            />
+          </div>
         </label>
       </td>
       <th
@@ -2121,11 +2181,14 @@ Note: Table column widths will respond automatically when toggling expanded rows
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-expandable-nested-table-checkrow1"
-            aria-labelledby="table-expandable-nested-table-node1"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-expandable-nested-table-checkrow1"
+              aria-labelledby="table-expandable-nested-table-node1"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -2264,11 +2327,14 @@ Note: Table column widths will respond automatically when toggling expanded rows
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-expandable-nested-table-checkrow2"
-            aria-labelledby="table-expandable-nested-table-node2"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-expandable-nested-table-checkrow2"
+              aria-labelledby="table-expandable-nested-table-node2"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -2359,11 +2425,14 @@ Note: Table column widths will respond automatically when toggling expanded rows
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-expandable-nested-table-checkrow3"
-            aria-labelledby="table-expandable-nested-table-node3"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-expandable-nested-table-checkrow3"
+              aria-labelledby="table-expandable-nested-table-node3"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -2454,11 +2523,14 @@ Note: Table column widths will respond automatically when toggling expanded rows
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-expandable-nested-table-checkrow4"
-            aria-labelledby="table-expandable-nested-table-node4"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-expandable-nested-table-checkrow4"
+              aria-labelledby="table-expandable-nested-table-node4"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -5897,11 +5969,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-compact-checkrowthead"
-            aria-label="Select all rows"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-compact-checkrowthead"
+              aria-label="Select all rows"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" scope="col">Contributor</th>
@@ -5919,11 +5994,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-compact-checkrow1"
-            aria-labelledby="table-compact-node1"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-compact-checkrow1"
+              aria-labelledby="table-compact-node1"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -5988,11 +6066,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-compact-checkrow2"
-            aria-labelledby="table-compact-node2"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-compact-checkrow2"
+              aria-labelledby="table-compact-node2"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -6057,11 +6138,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-compact-checkrow3"
-            aria-labelledby="table-compact-node3"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-compact-checkrow3"
+              aria-labelledby="table-compact-node3"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -6126,11 +6210,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-compact-checkrow4"
-            aria-labelledby="table-compact-node4"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-compact-checkrow4"
+              aria-labelledby="table-compact-node4"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -6221,11 +6308,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-compact-expandable-checkrowthead"
-            aria-label="Select all rows"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-compact-expandable-checkrowthead"
+              aria-label="Select all rows"
+            />
+          </div>
         </label>
       </td>
       <th class="pf-m-width-30" role="columnheader" scope="col">Repositories</th>
@@ -6255,11 +6345,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-compact-expandable-checkrow1"
-            aria-labelledby="table-compact-expandable-node1"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-compact-expandable-checkrow1"
+              aria-labelledby="table-compact-expandable-node1"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -6346,11 +6439,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-compact-expandable-checkrow2"
-            aria-labelledby="table-compact-expandable-node2"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-compact-expandable-checkrow2"
+              aria-labelledby="table-compact-expandable-node2"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -6440,11 +6536,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-compact-expandable-checkrow3"
-            aria-labelledby="table-compact-expandable-node3"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-compact-expandable-checkrow3"
+              aria-labelledby="table-compact-expandable-node3"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -6529,11 +6628,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-compact-expandable-checkrow4"
-            aria-labelledby="table-compact-expandable-node4"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-compact-expandable-checkrow4"
+              aria-labelledby="table-compact-expandable-node4"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -6622,11 +6724,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-compact-expandable-checkrow5"
-            aria-labelledby="table-compact-expandable-node5"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-compact-expandable-checkrow5"
+              aria-labelledby="table-compact-expandable-node5"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -6711,11 +6816,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-compact-expandable-checkrow6"
-            aria-labelledby="table-compact-expandable-node6"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-compact-expandable-checkrow6"
+              aria-labelledby="table-compact-expandable-node6"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -6812,14 +6920,17 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-compact-expandable-checkrow7"
-            aria-labelledby="table-compact-expandable-node7"
-          />
-        </label>
-      </td>
-      <th role="columnheader" data-label="Data label name">
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-compact-expandable-checkrow7"
+              aria-labelledby="table-compact-expandable-node7"
+            />
+          </div>
+        </label>
+      </td>
+      <th role="columnheader" data-label="Data label name">
         <div id="table-compact-expandable-node7">Node 7</div>
       </th>
       <td role="cell" data-label="Branches">10</td>
@@ -6901,11 +7012,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-compact-expandable-checkrow8"
-            aria-labelledby="table-compact-expandable-node8"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-compact-expandable-checkrow8"
+              aria-labelledby="table-compact-expandable-node8"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -6999,11 +7113,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-compact-expandable-checkrow9"
-            aria-labelledby="table-compact-expandable-node9"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-compact-expandable-checkrow9"
+              aria-labelledby="table-compact-expandable-node9"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -7093,11 +7210,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-hoverable-checkrowthead"
-            aria-label="Select all rows"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-hoverable-checkrowthead"
+              aria-label="Select all rows"
+            />
+          </div>
         </label>
       </td>
       <th
@@ -7121,11 +7241,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
   <tr class="pf-m-hoverable" role="row" tabindex="0">
     <td class="pf-c-table__check" role="cell">
       <label>
-        <input
-          type="checkbox"
-          name="table-hoverable-checkrow1"
-          aria-labelledby="table-hoverable-node1"
-        />
+        <div class="pf-c-check pf-m-standalone">
+          <input
+            class="pf-c-check__input"
+            type="checkbox"
+            name="table-hoverable-checkrow1"
+            aria-labelledby="table-hoverable-node1"
+          />
+        </div>
       </label>
     </td>
     <th role="columnheader" data-label="Repository name">
@@ -7179,11 +7302,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
   <tr class="pf-m-hoverable pf-m-selected" role="row" tabindex="0">
     <td class="pf-c-table__check" role="cell">
       <label>
-        <input
-          type="checkbox"
-          name="table-hoverable-checkrow2"
-          aria-labelledby="table-hoverable-node2"
-        />
+        <div class="pf-c-check pf-m-standalone">
+          <input
+            class="pf-c-check__input"
+            type="checkbox"
+            name="table-hoverable-checkrow2"
+            aria-labelledby="table-hoverable-node2"
+          />
+        </div>
       </label>
     </td>
     <th role="columnheader" data-label="Repository name">
@@ -7239,11 +7365,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
   <tr class="pf-m-hoverable" role="row" tabindex="0">
     <td class="pf-c-table__check" role="cell">
       <label>
-        <input
-          type="checkbox"
-          name="table-hoverable-checkrow3"
-          aria-labelledby="table-hoverable-node3"
-        />
+        <div class="pf-c-check pf-m-standalone">
+          <input
+            class="pf-c-check__input"
+            type="checkbox"
+            name="table-hoverable-checkrow3"
+            aria-labelledby="table-hoverable-node3"
+          />
+        </div>
       </label>
     </td>
     <th role="columnheader" data-label="Repository name">
@@ -7297,11 +7426,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
   <tr class="pf-m-hoverable" role="row" tabindex="0">
     <td class="pf-c-table__check" role="cell">
       <label>
-        <input
-          type="checkbox"
-          name="table-hoverable-checkrow4"
-          aria-labelledby="table-hoverable-node4"
-        />
+        <div class="pf-c-check pf-m-standalone">
+          <input
+            class="pf-c-check__input"
+            type="checkbox"
+            name="table-hoverable-checkrow4"
+            aria-labelledby="table-hoverable-node4"
+          />
+        </div>
       </label>
     </td>
     <th role="columnheader" data-label="Repository name">
@@ -7355,11 +7487,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
   <tr class="pf-m-hoverable pf-m-selected" role="row" tabindex="0">
     <td class="pf-c-table__check" role="cell">
       <label>
-        <input
-          type="checkbox"
-          name="table-hoverable-checkrow5"
-          aria-labelledby="table-hoverable-node5"
-        />
+        <div class="pf-c-check pf-m-standalone">
+          <input
+            class="pf-c-check__input"
+            type="checkbox"
+            name="table-hoverable-checkrow5"
+            aria-labelledby="table-hoverable-node5"
+          />
+        </div>
       </label>
     </td>
     <th role="columnheader" data-label="Repository name">
@@ -7415,11 +7550,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
   <tr class="pf-m-hoverable pf-m-selected" role="row" tabindex="0">
     <td class="pf-c-table__check" role="cell">
       <label>
-        <input
-          type="checkbox"
-          name="table-hoverable-checkrow6"
-          aria-labelledby="table-hoverable-node6"
-        />
+        <div class="pf-c-check pf-m-standalone">
+          <input
+            class="pf-c-check__input"
+            type="checkbox"
+            name="table-hoverable-checkrow6"
+            aria-labelledby="table-hoverable-node6"
+          />
+        </div>
       </label>
     </td>
     <th role="columnheader" data-label="Repository name">
@@ -7475,11 +7613,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
   <tr class="pf-m-hoverable pf-m-selected" role="row" tabindex="0">
     <td class="pf-c-table__check" role="cell">
       <label>
-        <input
-          type="checkbox"
-          name="table-hoverable-checkrow7"
-          aria-labelledby="table-hoverable-node7"
-        />
+        <div class="pf-c-check pf-m-standalone">
+          <input
+            class="pf-c-check__input"
+            type="checkbox"
+            name="table-hoverable-checkrow7"
+            aria-labelledby="table-hoverable-node7"
+          />
+        </div>
       </label>
     </td>
     <th role="columnheader" data-label="Repository name">
@@ -7535,11 +7676,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
   <tr class="pf-m-hoverable" role="row" tabindex="0">
     <td class="pf-c-table__check" role="cell">
       <label>
-        <input
-          type="checkbox"
-          name="table-hoverable-checkrow8"
-          aria-labelledby="table-hoverable-node8"
-        />
+        <div class="pf-c-check pf-m-standalone">
+          <input
+            class="pf-c-check__input"
+            type="checkbox"
+            name="table-hoverable-checkrow8"
+            aria-labelledby="table-hoverable-node8"
+          />
+        </div>
       </label>
     </td>
     <th role="columnheader" data-label="Repository name">
@@ -7593,11 +7737,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
   <tr class="pf-m-hoverable" role="row" tabindex="0">
     <td class="pf-c-table__check" role="cell">
       <label>
-        <input
-          type="checkbox"
-          name="table-hoverable-checkrow9"
-          aria-labelledby="table-hoverable-node9"
-        />
+        <div class="pf-c-check pf-m-standalone">
+          <input
+            class="pf-c-check__input"
+            type="checkbox"
+            name="table-hoverable-checkrow9"
+            aria-labelledby="table-hoverable-node9"
+          />
+        </div>
       </label>
     </td>
     <th role="columnheader" data-label="Repository name">
@@ -7651,11 +7798,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
   <tr class="pf-m-hoverable pf-m-selected" role="row" tabindex="0">
     <td class="pf-c-table__check" role="cell">
       <label>
-        <input
-          type="checkbox"
-          name="table-hoverable-checkrow10"
-          aria-labelledby="table-hoverable-node10"
-        />
+        <div class="pf-c-check pf-m-standalone">
+          <input
+            class="pf-c-check__input"
+            type="checkbox"
+            name="table-hoverable-checkrow10"
+            aria-labelledby="table-hoverable-node10"
+          />
+        </div>
       </label>
     </td>
     <th role="columnheader" data-label="Repository name">
@@ -7711,11 +7861,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
   <tr class="pf-m-hoverable" role="row" tabindex="0">
     <td class="pf-c-table__check" role="cell">
       <label>
-        <input
-          type="checkbox"
-          name="table-hoverable-checkrow11"
-          aria-labelledby="table-hoverable-node11"
-        />
+        <div class="pf-c-check pf-m-standalone">
+          <input
+            class="pf-c-check__input"
+            type="checkbox"
+            name="table-hoverable-checkrow11"
+            aria-labelledby="table-hoverable-node11"
+          />
+        </div>
       </label>
     </td>
     <th role="columnheader" data-label="Repository name">
@@ -7784,11 +7937,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <td></td>
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-expandable-hoverable-checkrowthead"
-            aria-label="Select all rows"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-expandable-hoverable-checkrowthead"
+              aria-label="Select all rows"
+            />
+          </div>
         </label>
       </td>
       <th
@@ -7858,11 +8014,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-expandable-hoverable-checkrow1"
-            aria-labelledby="table-expandable-hoverable-node1"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-expandable-hoverable-checkrow1"
+              aria-labelledby="table-expandable-hoverable-node1"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Repository name">
@@ -7953,11 +8112,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-expandable-hoverable-checkrow2"
-            aria-labelledby="table-expandable-hoverable-node2"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-expandable-hoverable-checkrow2"
+              aria-labelledby="table-expandable-hoverable-node2"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Repository name">
@@ -8050,11 +8212,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-expandable-hoverable-checkrow3"
-            aria-labelledby="table-expandable-hoverable-node3"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-expandable-hoverable-checkrow3"
+              aria-labelledby="table-expandable-hoverable-node3"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Repository name">
@@ -8145,11 +8310,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-expandable-hoverable-checkrow4"
-            aria-labelledby="table-expandable-hoverable-node4"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-expandable-hoverable-checkrow4"
+              aria-labelledby="table-expandable-hoverable-node4"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Repository name">
@@ -8240,11 +8408,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-expandable-hoverable-checkrow5"
-            aria-labelledby="table-expandable-hoverable-node5"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-expandable-hoverable-checkrow5"
+              aria-labelledby="table-expandable-hoverable-node5"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Repository name">
@@ -8337,11 +8508,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-expandable-hoverable-checkrow6"
-            aria-labelledby="table-expandable-hoverable-node6"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-expandable-hoverable-checkrow6"
+              aria-labelledby="table-expandable-hoverable-node6"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Repository name">
@@ -8434,11 +8608,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-expandable-hoverable-checkrow7"
-            aria-labelledby="table-expandable-hoverable-node7"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-expandable-hoverable-checkrow7"
+              aria-labelledby="table-expandable-hoverable-node7"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Repository name">
@@ -8531,11 +8708,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-expandable-hoverable-checkrow8"
-            aria-labelledby="table-expandable-hoverable-node8"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-expandable-hoverable-checkrow8"
+              aria-labelledby="table-expandable-hoverable-node8"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Repository name">
@@ -8626,11 +8806,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-expandable-hoverable-checkrow9"
-            aria-labelledby="table-expandable-hoverable-node9"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-expandable-hoverable-checkrow9"
+              aria-labelledby="table-expandable-hoverable-node9"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Repository name">
@@ -8721,11 +8904,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-expandable-hoverable-checkrow10"
-            aria-labelledby="table-expandable-hoverable-node10"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-expandable-hoverable-checkrow10"
+              aria-labelledby="table-expandable-hoverable-node10"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Repository name">
@@ -8821,11 +9007,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-expandable-hoverable-checkrow11"
-            aria-labelledby="table-expandable-hoverable-node11"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-expandable-hoverable-checkrow11"
+              aria-labelledby="table-expandable-hoverable-node11"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Repository name">
@@ -8918,11 +9107,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-expandable-hoverable-checkrow12"
-            aria-labelledby="table-expandable-hoverable-node12"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-expandable-hoverable-checkrow12"
+              aria-labelledby="table-expandable-hoverable-node12"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Repository name">
@@ -9018,11 +9210,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-expandable-hoverable-checkrow13"
-            aria-labelledby="table-expandable-hoverable-node13"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-expandable-hoverable-checkrow13"
+              aria-labelledby="table-expandable-hoverable-node13"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Repository name">
@@ -9120,11 +9315,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-expandable-hoverable-checkrow15"
-            aria-labelledby="table-expandable-hoverable-node15"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-expandable-hoverable-checkrow15"
+              aria-labelledby="table-expandable-hoverable-node15"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Repository name">
@@ -9218,11 +9416,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-expandable-hoverable-checkrow14"
-            aria-labelledby="table-expandable-hoverable-node14"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-expandable-hoverable-checkrow14"
+              aria-labelledby="table-expandable-hoverable-node14"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Repository name">
@@ -9313,11 +9514,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-expandable-hoverable-checkrow16"
-            aria-labelledby="table-expandable-hoverable-node16"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-expandable-hoverable-checkrow16"
+              aria-labelledby="table-expandable-hoverable-node16"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Repository name">
@@ -9409,11 +9613,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-expandable-hoverable-checkrow17"
-            aria-labelledby="table-expandable-hoverable-node17"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-expandable-hoverable-checkrow17"
+              aria-labelledby="table-expandable-hoverable-node17"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Repository name">
@@ -9504,11 +9711,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-expandable-hoverable-checkrow18"
-            aria-labelledby="table-expandable-hoverable-node18"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-expandable-hoverable-checkrow18"
+              aria-labelledby="table-expandable-hoverable-node18"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Repository name">
@@ -9599,11 +9809,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-expandable-hoverable-checkrow19"
-            aria-labelledby="table-expandable-hoverable-node19"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-expandable-hoverable-checkrow19"
+              aria-labelledby="table-expandable-hoverable-node19"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Repository name">
@@ -11167,11 +11380,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
           </span>
           <span class="pf-c-table__check">
             <label>
-              <input
-                type="checkbox"
-                name="tree-table-with-checkboxes-example-checkrow-1"
-                aria-labelledby="tree-table-with-checkboxes-example-node-1"
-              />
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  name="tree-table-with-checkboxes-example-checkrow-1"
+                  aria-labelledby="tree-table-with-checkboxes-example-node-1"
+                />
+              </div>
             </label>
           </span>
           <div class="pf-c-table__tree-view-text">
@@ -11267,11 +11483,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
           </span>
           <span class="pf-c-table__check">
             <label>
-              <input
-                type="checkbox"
-                name="tree-table-with-checkboxes-example-checkrow-2"
-                aria-labelledby="tree-table-with-checkboxes-example-node-2"
-              />
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  name="tree-table-with-checkboxes-example-checkrow-2"
+                  aria-labelledby="tree-table-with-checkboxes-example-node-2"
+                />
+              </div>
             </label>
           </span>
           <div class="pf-c-table__tree-view-text">
@@ -11355,11 +11574,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <div class="pf-c-table__tree-view-main">
           <span class="pf-c-table__check">
             <label>
-              <input
-                type="checkbox"
-                name="tree-table-with-checkboxes-example-checkrow-3"
-                aria-labelledby="tree-table-with-checkboxes-example-node-3"
-              />
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  name="tree-table-with-checkboxes-example-checkrow-3"
+                  aria-labelledby="tree-table-with-checkboxes-example-node-3"
+                />
+              </div>
             </label>
           </span>
           <div class="pf-c-table__tree-view-text">
@@ -11442,11 +11664,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <div class="pf-c-table__tree-view-main">
           <span class="pf-c-table__check">
             <label>
-              <input
-                type="checkbox"
-                name="tree-table-with-checkboxes-example-checkrow-4"
-                aria-labelledby="tree-table-with-checkboxes-example-node-4"
-              />
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  name="tree-table-with-checkboxes-example-checkrow-4"
+                  aria-labelledby="tree-table-with-checkboxes-example-node-4"
+                />
+              </div>
             </label>
           </span>
           <div class="pf-c-table__tree-view-text">
@@ -11529,11 +11754,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <div class="pf-c-table__tree-view-main">
           <span class="pf-c-table__check">
             <label>
-              <input
-                type="checkbox"
-                name="tree-table-with-checkboxes-example-checkrow-5"
-                aria-labelledby="tree-table-with-checkboxes-example-node-5"
-              />
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  name="tree-table-with-checkboxes-example-checkrow-5"
+                  aria-labelledby="tree-table-with-checkboxes-example-node-5"
+                />
+              </div>
             </label>
           </span>
           <div class="pf-c-table__tree-view-text">
@@ -11615,11 +11843,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <div class="pf-c-table__tree-view-main">
           <span class="pf-c-table__check">
             <label>
-              <input
-                type="checkbox"
-                name="tree-table-with-checkboxes-example-checkrow-6"
-                aria-labelledby="tree-table-with-checkboxes-example-node-6"
-              />
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  name="tree-table-with-checkboxes-example-checkrow-6"
+                  aria-labelledby="tree-table-with-checkboxes-example-node-6"
+                />
+              </div>
             </label>
           </span>
           <div class="pf-c-table__tree-view-text">
@@ -11716,11 +11947,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
           </span>
           <span class="pf-c-table__check">
             <label>
-              <input
-                type="checkbox"
-                name="tree-table-with-checkboxes-example-checkrow-7"
-                aria-labelledby="tree-table-with-checkboxes-example-node-7"
-              />
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  name="tree-table-with-checkboxes-example-checkrow-7"
+                  aria-labelledby="tree-table-with-checkboxes-example-node-7"
+                />
+              </div>
             </label>
           </span>
           <div class="pf-c-table__tree-view-text">
@@ -11802,11 +12036,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <div class="pf-c-table__tree-view-main">
           <span class="pf-c-table__check">
             <label>
-              <input
-                type="checkbox"
-                name="tree-table-with-checkboxes-example-checkrow-8"
-                aria-labelledby="tree-table-with-checkboxes-example-node-8"
-              />
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  name="tree-table-with-checkboxes-example-checkrow-8"
+                  aria-labelledby="tree-table-with-checkboxes-example-node-8"
+                />
+              </div>
             </label>
           </span>
           <div class="pf-c-table__tree-view-text">
@@ -11902,11 +12139,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
           </span>
           <span class="pf-c-table__check">
             <label>
-              <input
-                type="checkbox"
-                name="tree-table-with-checkboxes-example-checkrow-9"
-                aria-labelledby="tree-table-with-checkboxes-example-node-9"
-              />
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  name="tree-table-with-checkboxes-example-checkrow-9"
+                  aria-labelledby="tree-table-with-checkboxes-example-node-9"
+                />
+              </div>
             </label>
           </span>
           <div class="pf-c-table__tree-view-text">
@@ -11988,11 +12228,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <div class="pf-c-table__tree-view-main">
           <span class="pf-c-table__check">
             <label>
-              <input
-                type="checkbox"
-                name="tree-table-with-checkboxes-example-checkrow-10"
-                aria-labelledby="tree-table-with-checkboxes-example-node-10"
-              />
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  name="tree-table-with-checkboxes-example-checkrow-10"
+                  aria-labelledby="tree-table-with-checkboxes-example-node-10"
+                />
+              </div>
             </label>
           </span>
           <div class="pf-c-table__tree-view-text">
@@ -12075,11 +12318,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <div class="pf-c-table__tree-view-main">
           <span class="pf-c-table__check">
             <label>
-              <input
-                type="checkbox"
-                name="tree-table-with-checkboxes-example-checkrow-11"
-                aria-labelledby="tree-table-with-checkboxes-example-node-11"
-              />
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  name="tree-table-with-checkboxes-example-checkrow-11"
+                  aria-labelledby="tree-table-with-checkboxes-example-node-11"
+                />
+              </div>
             </label>
           </span>
           <div class="pf-c-table__tree-view-text">
@@ -12176,11 +12422,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
           </span>
           <span class="pf-c-table__check">
             <label>
-              <input
-                type="checkbox"
-                name="tree-table-with-checkboxes-example-checkrow-12"
-                aria-labelledby="tree-table-with-checkboxes-example-node-12"
-              />
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  name="tree-table-with-checkboxes-example-checkrow-12"
+                  aria-labelledby="tree-table-with-checkboxes-example-node-12"
+                />
+              </div>
             </label>
           </span>
           <div class="pf-c-table__tree-view-text">
@@ -12262,11 +12511,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <div class="pf-c-table__tree-view-main">
           <span class="pf-c-table__check">
             <label>
-              <input
-                type="checkbox"
-                name="tree-table-with-checkboxes-example-checkrow-13"
-                aria-labelledby="tree-table-with-checkboxes-example-node-13"
-              />
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  name="tree-table-with-checkboxes-example-checkrow-13"
+                  aria-labelledby="tree-table-with-checkboxes-example-node-13"
+                />
+              </div>
             </label>
           </span>
           <div class="pf-c-table__tree-view-text">
@@ -12348,11 +12600,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <div class="pf-c-table__tree-view-main">
           <span class="pf-c-table__check">
             <label>
-              <input
-                type="checkbox"
-                name="tree-table-with-checkboxes-example-checkrow-14"
-                aria-labelledby="tree-table-with-checkboxes-example-node-14"
-              />
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  name="tree-table-with-checkboxes-example-checkrow-14"
+                  aria-labelledby="tree-table-with-checkboxes-example-node-14"
+                />
+              </div>
             </label>
           </span>
           <div class="pf-c-table__tree-view-text">
@@ -12448,11 +12703,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
           </span>
           <span class="pf-c-table__check">
             <label>
-              <input
-                type="checkbox"
-                name="tree-table-with-checkboxes-example-checkrow-15"
-                aria-labelledby="tree-table-with-checkboxes-example-node-15"
-              />
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  name="tree-table-with-checkboxes-example-checkrow-15"
+                  aria-labelledby="tree-table-with-checkboxes-example-node-15"
+                />
+              </div>
             </label>
           </span>
           <div class="pf-c-table__tree-view-text">
@@ -12535,11 +12793,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <div class="pf-c-table__tree-view-main">
           <span class="pf-c-table__check">
             <label>
-              <input
-                type="checkbox"
-                name="tree-table-with-checkboxes-example-checkrow-16"
-                aria-labelledby="tree-table-with-checkboxes-example-node-16"
-              />
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  name="tree-table-with-checkboxes-example-checkrow-16"
+                  aria-labelledby="tree-table-with-checkboxes-example-node-16"
+                />
+              </div>
             </label>
           </span>
           <div class="pf-c-table__tree-view-text">
@@ -12622,11 +12883,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <div class="pf-c-table__tree-view-main">
           <span class="pf-c-table__check">
             <label>
-              <input
-                type="checkbox"
-                name="tree-table-with-checkboxes-example-checkrow-17"
-                aria-labelledby="tree-table-with-checkboxes-example-node-17"
-              />
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  name="tree-table-with-checkboxes-example-checkrow-17"
+                  aria-labelledby="tree-table-with-checkboxes-example-node-17"
+                />
+              </div>
             </label>
           </span>
           <div class="pf-c-table__tree-view-text">
@@ -12746,11 +13010,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
           </span>
           <span class="pf-c-table__check">
             <label>
-              <input
-                type="checkbox"
-                name="tree-table-with-checkboxes-icons-example-checkrow-1"
-                aria-labelledby="tree-table-with-checkboxes-icons-example-node-1"
-              />
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  name="tree-table-with-checkboxes-icons-example-checkrow-1"
+                  aria-labelledby="tree-table-with-checkboxes-icons-example-node-1"
+                />
+              </div>
             </label>
           </span>
           <div class="pf-c-table__tree-view-text">
@@ -12849,11 +13116,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
           </span>
           <span class="pf-c-table__check">
             <label>
-              <input
-                type="checkbox"
-                name="tree-table-with-checkboxes-icons-example-checkrow-2"
-                aria-labelledby="tree-table-with-checkboxes-icons-example-node-2"
-              />
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  name="tree-table-with-checkboxes-icons-example-checkrow-2"
+                  aria-labelledby="tree-table-with-checkboxes-icons-example-node-2"
+                />
+              </div>
             </label>
           </span>
           <div class="pf-c-table__tree-view-text">
@@ -12940,11 +13210,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <div class="pf-c-table__tree-view-main">
           <span class="pf-c-table__check">
             <label>
-              <input
-                type="checkbox"
-                name="tree-table-with-checkboxes-icons-example-checkrow-3"
-                aria-labelledby="tree-table-with-checkboxes-icons-example-node-3"
-              />
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  name="tree-table-with-checkboxes-icons-example-checkrow-3"
+                  aria-labelledby="tree-table-with-checkboxes-icons-example-node-3"
+                />
+              </div>
             </label>
           </span>
           <div class="pf-c-table__tree-view-text">
@@ -13030,11 +13303,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <div class="pf-c-table__tree-view-main">
           <span class="pf-c-table__check">
             <label>
-              <input
-                type="checkbox"
-                name="tree-table-with-checkboxes-icons-example-checkrow-4"
-                aria-labelledby="tree-table-with-checkboxes-icons-example-node-4"
-              />
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  name="tree-table-with-checkboxes-icons-example-checkrow-4"
+                  aria-labelledby="tree-table-with-checkboxes-icons-example-node-4"
+                />
+              </div>
             </label>
           </span>
           <div class="pf-c-table__tree-view-text">
@@ -13120,11 +13396,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <div class="pf-c-table__tree-view-main">
           <span class="pf-c-table__check">
             <label>
-              <input
-                type="checkbox"
-                name="tree-table-with-checkboxes-icons-example-checkrow-5"
-                aria-labelledby="tree-table-with-checkboxes-icons-example-node-5"
-              />
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  name="tree-table-with-checkboxes-icons-example-checkrow-5"
+                  aria-labelledby="tree-table-with-checkboxes-icons-example-node-5"
+                />
+              </div>
             </label>
           </span>
           <div class="pf-c-table__tree-view-text">
@@ -13209,11 +13488,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <div class="pf-c-table__tree-view-main">
           <span class="pf-c-table__check">
             <label>
-              <input
-                type="checkbox"
-                name="tree-table-with-checkboxes-icons-example-checkrow-6"
-                aria-labelledby="tree-table-with-checkboxes-icons-example-node-6"
-              />
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  name="tree-table-with-checkboxes-icons-example-checkrow-6"
+                  aria-labelledby="tree-table-with-checkboxes-icons-example-node-6"
+                />
+              </div>
             </label>
           </span>
           <div class="pf-c-table__tree-view-text">
@@ -13313,11 +13595,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
           </span>
           <span class="pf-c-table__check">
             <label>
-              <input
-                type="checkbox"
-                name="tree-table-with-checkboxes-icons-example-checkrow-7"
-                aria-labelledby="tree-table-with-checkboxes-icons-example-node-7"
-              />
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  name="tree-table-with-checkboxes-icons-example-checkrow-7"
+                  aria-labelledby="tree-table-with-checkboxes-icons-example-node-7"
+                />
+              </div>
             </label>
           </span>
           <div class="pf-c-table__tree-view-text">
@@ -13402,11 +13687,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <div class="pf-c-table__tree-view-main">
           <span class="pf-c-table__check">
             <label>
-              <input
-                type="checkbox"
-                name="tree-table-with-checkboxes-icons-example-checkrow-8"
-                aria-labelledby="tree-table-with-checkboxes-icons-example-node-8"
-              />
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  name="tree-table-with-checkboxes-icons-example-checkrow-8"
+                  aria-labelledby="tree-table-with-checkboxes-icons-example-node-8"
+                />
+              </div>
             </label>
           </span>
           <div class="pf-c-table__tree-view-text">
@@ -13505,11 +13793,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
           </span>
           <span class="pf-c-table__check">
             <label>
-              <input
-                type="checkbox"
-                name="tree-table-with-checkboxes-icons-example-checkrow-9"
-                aria-labelledby="tree-table-with-checkboxes-icons-example-node-9"
-              />
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  name="tree-table-with-checkboxes-icons-example-checkrow-9"
+                  aria-labelledby="tree-table-with-checkboxes-icons-example-node-9"
+                />
+              </div>
             </label>
           </span>
           <div class="pf-c-table__tree-view-text">
@@ -13594,11 +13885,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <div class="pf-c-table__tree-view-main">
           <span class="pf-c-table__check">
             <label>
-              <input
-                type="checkbox"
-                name="tree-table-with-checkboxes-icons-example-checkrow-10"
-                aria-labelledby="tree-table-with-checkboxes-icons-example-node-10"
-              />
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  name="tree-table-with-checkboxes-icons-example-checkrow-10"
+                  aria-labelledby="tree-table-with-checkboxes-icons-example-node-10"
+                />
+              </div>
             </label>
           </span>
           <div class="pf-c-table__tree-view-text">
@@ -13684,11 +13978,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <div class="pf-c-table__tree-view-main">
           <span class="pf-c-table__check">
             <label>
-              <input
-                type="checkbox"
-                name="tree-table-with-checkboxes-icons-example-checkrow-11"
-                aria-labelledby="tree-table-with-checkboxes-icons-example-node-11"
-              />
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  name="tree-table-with-checkboxes-icons-example-checkrow-11"
+                  aria-labelledby="tree-table-with-checkboxes-icons-example-node-11"
+                />
+              </div>
             </label>
           </span>
           <div class="pf-c-table__tree-view-text">
@@ -13788,11 +14085,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
           </span>
           <span class="pf-c-table__check">
             <label>
-              <input
-                type="checkbox"
-                name="tree-table-with-checkboxes-icons-example-checkrow-12"
-                aria-labelledby="tree-table-with-checkboxes-icons-example-node-12"
-              />
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  name="tree-table-with-checkboxes-icons-example-checkrow-12"
+                  aria-labelledby="tree-table-with-checkboxes-icons-example-node-12"
+                />
+              </div>
             </label>
           </span>
           <div class="pf-c-table__tree-view-text">
@@ -13877,11 +14177,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <div class="pf-c-table__tree-view-main">
           <span class="pf-c-table__check">
             <label>
-              <input
-                type="checkbox"
-                name="tree-table-with-checkboxes-icons-example-checkrow-13"
-                aria-labelledby="tree-table-with-checkboxes-icons-example-node-13"
-              />
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  name="tree-table-with-checkboxes-icons-example-checkrow-13"
+                  aria-labelledby="tree-table-with-checkboxes-icons-example-node-13"
+                />
+              </div>
             </label>
           </span>
           <div class="pf-c-table__tree-view-text">
@@ -13966,11 +14269,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <div class="pf-c-table__tree-view-main">
           <span class="pf-c-table__check">
             <label>
-              <input
-                type="checkbox"
-                name="tree-table-with-checkboxes-icons-example-checkrow-14"
-                aria-labelledby="tree-table-with-checkboxes-icons-example-node-14"
-              />
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  name="tree-table-with-checkboxes-icons-example-checkrow-14"
+                  aria-labelledby="tree-table-with-checkboxes-icons-example-node-14"
+                />
+              </div>
             </label>
           </span>
           <div class="pf-c-table__tree-view-text">
@@ -14067,13 +14373,16 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
               </div>
             </button>
           </span>
-          <span class="pf-c-table__check">
-            <label>
-              <input
-                type="checkbox"
-                name="tree-table-with-checkboxes-icons-example-checkrow-15"
-                aria-labelledby="tree-table-with-checkboxes-icons-example-node-15"
-              />
+          <span class="pf-c-table__check">
+            <label>
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  name="tree-table-with-checkboxes-icons-example-checkrow-15"
+                  aria-labelledby="tree-table-with-checkboxes-icons-example-node-15"
+                />
+              </div>
             </label>
           </span>
           <div class="pf-c-table__tree-view-text">
@@ -14159,11 +14468,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <div class="pf-c-table__tree-view-main">
           <span class="pf-c-table__check">
             <label>
-              <input
-                type="checkbox"
-                name="tree-table-with-checkboxes-icons-example-checkrow-16"
-                aria-labelledby="tree-table-with-checkboxes-icons-example-node-16"
-              />
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  name="tree-table-with-checkboxes-icons-example-checkrow-16"
+                  aria-labelledby="tree-table-with-checkboxes-icons-example-node-16"
+                />
+              </div>
             </label>
           </span>
           <div class="pf-c-table__tree-view-text">
@@ -14249,11 +14561,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <div class="pf-c-table__tree-view-main">
           <span class="pf-c-table__check">
             <label>
-              <input
-                type="checkbox"
-                name="tree-table-with-checkboxes-icons-example-checkrow-17"
-                aria-labelledby="tree-table-with-checkboxes-icons-example-node-17"
-              />
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  name="tree-table-with-checkboxes-icons-example-checkrow-17"
+                  aria-labelledby="tree-table-with-checkboxes-icons-example-node-17"
+                />
+              </div>
             </label>
           </span>
           <div class="pf-c-table__tree-view-text">
@@ -14373,11 +14688,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="borderless-table-checkrowthead"
-            aria-label="Select all rows"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="borderless-table-checkrowthead"
+              aria-label="Select all rows"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" scope="col">Contributor</th>
@@ -14395,11 +14713,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="borderless-table-checkrow1"
-            aria-labelledby="borderless-table-node1"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="borderless-table-checkrow1"
+              aria-labelledby="borderless-table-node1"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -14464,11 +14785,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="borderless-table-checkrow2"
-            aria-labelledby="borderless-table-node2"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="borderless-table-checkrow2"
+              aria-labelledby="borderless-table-node2"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -14533,11 +14857,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="borderless-table-checkrow3"
-            aria-labelledby="borderless-table-node3"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="borderless-table-checkrow3"
+              aria-labelledby="borderless-table-node3"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -14602,11 +14929,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="borderless-table-checkrow4"
-            aria-labelledby="borderless-table-node4"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="borderless-table-checkrow4"
+              aria-labelledby="borderless-table-node4"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -14685,11 +15015,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="borderless-compact-table-checkrowthead"
-            aria-label="Select all rows"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="borderless-compact-table-checkrowthead"
+              aria-label="Select all rows"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" scope="col">Contributor</th>
@@ -14707,11 +15040,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="borderless-compact-table-checkrow1"
-            aria-labelledby="borderless-compact-table-node1"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="borderless-compact-table-checkrow1"
+              aria-labelledby="borderless-compact-table-node1"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -14776,11 +15112,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="borderless-compact-table-checkrow2"
-            aria-labelledby="borderless-compact-table-node2"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="borderless-compact-table-checkrow2"
+              aria-labelledby="borderless-compact-table-node2"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -14845,11 +15184,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="borderless-compact-table-checkrow3"
-            aria-labelledby="borderless-compact-table-node3"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="borderless-compact-table-checkrow3"
+              aria-labelledby="borderless-compact-table-node3"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -14914,11 +15256,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="borderless-compact-table-checkrow4"
-            aria-labelledby="borderless-compact-table-node4"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="borderless-compact-table-checkrow4"
+              aria-labelledby="borderless-compact-table-node4"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -14998,11 +15343,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <td></td>
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="borderless-table-expandable-checkrowthead"
-            aria-label="Select all rows"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="borderless-table-expandable-checkrowthead"
+              aria-label="Select all rows"
+            />
+          </div>
         </label>
       </td>
       <th
@@ -15074,11 +15422,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="borderless-table-expandable-checkrow1"
-            aria-labelledby="borderless-table-expandable-node1"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="borderless-table-expandable-checkrow1"
+              aria-labelledby="borderless-table-expandable-node1"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -15171,11 +15522,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="borderless-table-expandable-checkrow2"
-            aria-labelledby="borderless-table-expandable-node2"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="borderless-table-expandable-checkrow2"
+              aria-labelledby="borderless-table-expandable-node2"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -15266,11 +15620,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="borderless-table-expandable-checkrow3"
-            aria-labelledby="borderless-table-expandable-node3"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="borderless-table-expandable-checkrow3"
+              aria-labelledby="borderless-table-expandable-node3"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -15361,11 +15718,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="borderless-table-expandable-checkrow4"
-            aria-labelledby="borderless-table-expandable-node4"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="borderless-table-expandable-checkrow4"
+              aria-labelledby="borderless-table-expandable-node4"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -19848,11 +20208,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-width-modifiers-checkrowthead"
-            aria-label="Select all rows"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-width-modifiers-checkrowthead"
+              aria-label="Select all rows"
+            />
+          </div>
         </label>
       </td>
       <th
@@ -19909,11 +20272,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-width-modifiers-checkrow1"
-            aria-labelledby="table-width-modifiers-node1"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-width-modifiers-checkrow1"
+              aria-labelledby="table-width-modifiers-node1"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -19928,11 +20294,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-width-modifiers-checkrow2"
-            aria-labelledby="table-width-modifiers-node2"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-width-modifiers-checkrow2"
+              aria-labelledby="table-width-modifiers-node2"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -19948,11 +20317,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-width-modifiers-checkrow3"
-            aria-labelledby="table-width-modifiers-node3"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-width-modifiers-checkrow3"
+              aria-labelledby="table-width-modifiers-node3"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -19968,11 +20340,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-width-modifiers-checkrow4"
-            aria-labelledby="table-width-modifiers-node4"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-width-modifiers-checkrow4"
+              aria-labelledby="table-width-modifiers-node4"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -22238,11 +22613,14 @@ For sticky columns to function correctly, the parent table's width must be contr
         <td rowspan="2"></td>
         <td class="pf-c-table__check" role="cell" rowspan="2">
           <label>
-            <input
-              type="checkbox"
-              name="nested-columns-expandable-example-checkrow"
-              aria-label="Select all rows"
-            />
+            <div class="pf-c-check pf-m-standalone">
+              <input
+                class="pf-c-check__input"
+                type="checkbox"
+                name="nested-columns-expandable-example-checkrow"
+                aria-label="Select all rows"
+              />
+            </div>
           </label>
         </td>
         <th
@@ -22312,11 +22690,14 @@ For sticky columns to function correctly, the parent table's width must be contr
 
         <td class="pf-c-table__check" role="cell">
           <label>
-            <input
-              type="checkbox"
-              name="nested-columns-expandable-example-checkrow1"
-              aria-labelledby="nested-columns-expandable-example-node1"
-            />
+            <div class="pf-c-check pf-m-standalone">
+              <input
+                class="pf-c-check__input"
+                type="checkbox"
+                name="nested-columns-expandable-example-checkrow1"
+                aria-labelledby="nested-columns-expandable-example-node1"
+              />
+            </div>
           </label>
         </td>
         <th
@@ -22414,11 +22795,14 @@ For sticky columns to function correctly, the parent table's width must be contr
 
         <td class="pf-c-table__check" role="cell">
           <label>
-            <input
-              type="checkbox"
-              name="nested-columns-expandable-example-checkrow2"
-              aria-labelledby="nested-columns-expandable-example-node2"
-            />
+            <div class="pf-c-check pf-m-standalone">
+              <input
+                class="pf-c-check__input"
+                type="checkbox"
+                name="nested-columns-expandable-example-checkrow2"
+                aria-labelledby="nested-columns-expandable-example-node2"
+              />
+            </div>
           </label>
         </td>
         <th
@@ -22516,11 +22900,14 @@ For sticky columns to function correctly, the parent table's width must be contr
 
         <td class="pf-c-table__check" role="cell">
           <label>
-            <input
-              type="checkbox"
-              name="nested-columns-expandable-example-checkrow3"
-              aria-labelledby="nested-columns-expandable-example-node3"
-            />
+            <div class="pf-c-check pf-m-standalone">
+              <input
+                class="pf-c-check__input"
+                type="checkbox"
+                name="nested-columns-expandable-example-checkrow3"
+                aria-labelledby="nested-columns-expandable-example-node3"
+              />
+            </div>
           </label>
         </td>
         <th
@@ -24029,11 +24416,14 @@ For sticky columns to function correctly, the parent table's width must be contr
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-favorites-checkrowthead"
-            aria-label="Select all rows"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-favorites-checkrowthead"
+              aria-label="Select all rows"
+            />
+          </div>
         </label>
       </td>
       <td></td>
@@ -24050,11 +24440,14 @@ For sticky columns to function correctly, the parent table's width must be contr
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-favorites-checkrow1"
-            aria-labelledby="table-favorites-node1"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-favorites-checkrow1"
+              aria-labelledby="table-favorites-node1"
+            />
+          </div>
         </label>
       </td>
       <td class="pf-c-table__favorite pf-m-favorited" role="cell">
@@ -24126,11 +24519,14 @@ For sticky columns to function correctly, the parent table's width must be contr
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-favorites-checkrow2"
-            aria-labelledby="table-favorites-node2"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-favorites-checkrow2"
+              aria-labelledby="table-favorites-node2"
+            />
+          </div>
         </label>
       </td>
       <td class="pf-c-table__favorite" role="cell">
@@ -24200,11 +24596,14 @@ For sticky columns to function correctly, the parent table's width must be contr
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-favorites-checkrow3"
-            aria-labelledby="table-favorites-node3"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-favorites-checkrow3"
+              aria-labelledby="table-favorites-node3"
+            />
+          </div>
         </label>
       </td>
       <td class="pf-c-table__favorite pf-m-favorited" role="cell">
@@ -24274,11 +24673,14 @@ For sticky columns to function correctly, the parent table's width must be contr
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-favorites-checkrow4"
-            aria-labelledby="table-favorites-node4"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-favorites-checkrow4"
+              aria-labelledby="table-favorites-node4"
+            />
+          </div>
         </label>
       </td>
       <td class="pf-c-table__favorite" role="cell">
@@ -24734,11 +25136,14 @@ Basic striped table rows are supported on tables with a single `<tbody>` element
       <td></td>
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-striped-expandable-checkrowthead"
-            aria-label="Select all rows"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-striped-expandable-checkrowthead"
+              aria-label="Select all rows"
+            />
+          </div>
         </label>
       </td>
       <th
@@ -24810,11 +25215,14 @@ Basic striped table rows are supported on tables with a single `<tbody>` element
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-striped-expandable-checkrow1"
-            aria-labelledby="table-striped-expandable-node1"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-striped-expandable-checkrow1"
+              aria-labelledby="table-striped-expandable-node1"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -24902,11 +25310,14 @@ Basic striped table rows are supported on tables with a single `<tbody>` element
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-striped-expandable-checkrow2"
-            aria-labelledby="table-striped-expandable-node2"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-striped-expandable-checkrow2"
+              aria-labelledby="table-striped-expandable-node2"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -24992,11 +25403,14 @@ Basic striped table rows are supported on tables with a single `<tbody>` element
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-striped-expandable-checkrow3"
-            aria-labelledby="table-striped-expandable-node3"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-striped-expandable-checkrow3"
+              aria-labelledby="table-striped-expandable-node3"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -25082,11 +25496,14 @@ Basic striped table rows are supported on tables with a single `<tbody>` element
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-striped-expandable-checkrow4"
-            aria-labelledby="table-striped-expandable-node4"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-striped-expandable-checkrow4"
+              aria-labelledby="table-striped-expandable-node4"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">