PF Next

Form Controls

Input Example

Preview

<input class="pf-c-form-control" disabled type="text" id="textInput1" aria-label="disabled text input">
<input class="pf-c-form-control" type="text" id="textInput2" aria-label="standard input example">
<input class="pf-c-form-control" readonly type="text" id="textInput3" aria-label="readonly input example" value="readonly input example">
<input class="pf-c-form-control" required type="text" id="textInput4" aria-invalid="true" aria-label="Error state input example">
<input class="pf-c-form-control pf-m-form-control-alt" type="text" id="textInput5" aria-label="Alternative input example">
<input class="pf-c-form-control pf-m-form-control-alt" required type="text" id="textInput6" aria-invalid="true" aria-label="Error state alternative input example">

Select Example

Preview

<select class="pf-c-form-control" id="selectExample1" name="selectExample1" aria-label="select example">
  <option value="" selected>Please choose</option>
  <option value="Mr">Mr</option>
  <option value="Miss">Miss</option>
  <option value="Mrs">Mrs</option>
  <option value="Ms">Ms</option>
  <option value="Dr">Dr</option>
  <option value="Other">Other</option>
</select>
<select class="pf-c-form-control" id="selectExample2" name="selectExample2" aria-label="select group example">
  <optgroup label="Group 1">
    <option value="Option 1">The first option</option>
    <option value="Option 2" selected>The second option is selected by default</option>
  </optgroup>
  <optgroup label="Group 2">
    <option value="Option 3">The third option</option>
    <option value="Option 4">The fourth option</option>
  </optgroup>
</select>
<select class="pf-c-form-control" required aria-invalid="true" id="selectExample3" name="selectExample3" aria-label="error state select group example">
  <option value="">make selection</option>
  <optgroup label="Group 1">
    <option value="Option 1">The first option</option>
    <option value="Option 2">The second option</option>
  </optgroup>
  <optgroup label="Group 2">
    <option value="Option 3">The third option</option>
    <option value="Option 4">The fourth option</option>
  </optgroup>
</select>

Textarea Example

Preview

<textarea class="pf-c-form-control" name="textarea" id="textarea1" aria-label="textarea example"></textarea>
<textarea class="pf-c-form-control" required name="textarea" id="textarea2" aria-label="Error state textarea example" aria-invalid="true"></textarea>

Documentation

Overview

Input, Textarea, and select are provided in the form controls 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-form-control <input>,<textarea>, <select> Initiates an input, textarea or select. For styling of checkboxes or Radios see the check component. required
.pf-m-form-control-alt input[type="text"].pf-c-form-control Applies alternative form control styles.