PF Next

Check

Checkbox Example

Preview

<div class="pf-c-check">
  <input class="pf-c-check__input" type="checkbox" id="check1" name="examplecheck1">
  <label class="pf-c-check__label" for="check1">
    check 1</label>
</div>
<div class="pf-c-check">
  <input class="pf-c-check__input" type="checkbox" id="check2" name="examplecheck2" checked>
  <label class="pf-c-check__label" for="check2">
    check 2 checked</label>
</div>
<div class="pf-c-check">
  <input class="pf-c-check__input" type="checkbox" id="check3" name="examplecheck3" aria-disabled="true" disabled>
  <label class="pf-c-check__label pf-m-disabled" for="check3">
    check 3 disabled</label>
</div>

Radio button Example

Preview

<div class="pf-c-check">
  <input class="pf-c-check__input" type="radio" id="radio1" name="exampleRadios">
  <label class="pf-c-check__label" for="radio1">
    Radio 1</label>
</div>
<div class="pf-c-check">
  <input class="pf-c-check__input" type="radio" id="radio2" name="exampleRadios" checked>
  <label class="pf-c-check__label" for="radio2">
    Radio 2 checked</label>
</div>
<div class="pf-c-check">
  <input class="pf-c-check__input" type="radio" id="radio3" name="exampleRadios" aria-disabled="true" disabled>
  <label class="pf-c-check__label pf-m-disabled" for="radio3">
    Radio 3 disabled</label>
</div>

Documentation

Overview

Checkbox and Radio are provided in the check component for use cases outside of forms. If they are used without label text ensure some sort of label for assistive technologies. (for example: aria-label)

Usage

Class Applied To Outcome
.pf-c-check <input type="checkbox">,<input type="radio"> Initiates a checkbox or radio. required
.pf-c-check__label <label> Initiates a label. required
.pf-m-disabled .pf-c-check__label Initiates a disabled style for labels.