@patternfly/patternfly/docs/components/FormControl/examples/FormControl.md

Assets, source, tooling, and content for PatternFly 4

---
id: Form control
section: components
cssPrefix: pf-c-form-control
---
## Examples

### Input

```html
<input class="pf-c-form-control" type="text" value="Standard" id="input-standard" aria-label="Standard input example" />
<br />
<br />
<input class="pf-c-form-control" readonly type="text" value="Readonly" id="input-readonly" aria-label="Readonly input example" />
<br />
<br />
<input class="pf-c-form-control pf-m-success" type="text" value="Success" id="input-success" aria-label="Success state input example" />
<br />
<br />
<input class="pf-c-form-control pf-m-warning" type="text" value="Warning" id="input-warning" aria-label="Warning state input example" />
<br />
<br />
<input class="pf-c-form-control" required type="text" value="Error" id="input-error" aria-invalid="true" aria-label="Error state input example" />
<br />
<br />
<input class="pf-c-form-control" disabled type="text" value="Disabled" id="input-disabled" aria-label="Disabled input example" />
<br />
<br />
<input class="pf-c-form-control pf-m-search" type="search" id="input-search" name="search-input" aria-label="Search input example" />
```

### Select

```html
<select class="pf-c-form-control" id="select-standard" name="select-standard" aria-label="Standard select example">
  <option 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>
<br />
<br />
<select class="pf-c-form-control" id="select-group" name="select-group" 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>
<br />
<br />
<select class="pf-c-form-control pf-m-success" id="select-group-success" name="select-group-success" aria-label="Success state select group example">
  <option>Valid option</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>
<br />
<br />
<select class="pf-c-form-control pf-m-warning" id="select-group-warning" name="select-group-warning" aria-label="Warning state select group example">
  <option>Warning option</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>
<br />
<br />
<select class="pf-c-form-control" required aria-invalid="true" id="select-group-error" name="select-group-error" aria-label="Error state select group example">
  <option>Invalid option</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>
<br />
<br />
```

### Textarea

```html
<textarea class="pf-c-form-control" name="textarea-standard" id="textarea-standard" aria-label="Standard textarea example">Standard</textarea>
<br />
<br />
<textarea class="pf-c-form-control" readonly name="textarea-readonly" id="textarea-readonly" aria-label="Readonly textarea example">Readonly</textarea>
<br />
<br />
<textarea class="pf-c-form-control pf-m-success" name="textarea-success" id="textarea-success" aria-label="Success state textarea example">Success</textarea>
<br />
<br />
<textarea class="pf-c-form-control pf-m-warning" name="textarea-warning" id="textarea-warning" aria-label="Warning state textarea example">Warning</textarea>
<br />
<br />
<textarea class="pf-c-form-control" required name="textarea-error" id="textarea-error" aria-label="Error state textarea example" aria-invalid="true">Error</textarea>
<br />
<br />
<textarea class="pf-c-form-control pf-m-resize-vertical" name="textarea-resize-vertical" id="textarea-resize-vertical" aria-label="Resize vertical textarea example">Resizes&nbsp;vertically</textarea>
<br />
<br />
<textarea class="pf-c-form-control pf-m-resize-horizontal" name="textarea-resize-horizontal" id="textarea-resize-horizontal" aria-label="Resize horizontal textarea example">Resizes&nbsp;horizontally</textarea>
```

## Documentation

### Accessibility

| Attribute                       | Applied to           | Outcome                                                                                                                                                          |
| ------------------------------- | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `id`                            | `.pf-c-form-control` | Provides an `id` value that can be used with the `for` attribute on an associated `<label>` element to provide an accessible label for the form control element. |
| `aria-invalid="true"`           | `.pf-c-form-control` | Indicates that the form control is in the error state and applies error state styling.                                                                           |
| `aria-label="descriptive text"` | `.pf-c-form-control` | Provides an accessible label for assistive technology.                                                                                                           |

### 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](/documentation/core/components/check). **Required** |
| `.pf-m-resize-vertical`   | `textarea.pf-m-form-control`       | Modifies a `textarea.pf-c-form-control` element so it can only be resized vertically along the y-axis.                                                    |
| `.pf-m-resize-horizontal` | `textarea.pf-m-form-control`       | Modifies a `textarea.pf-c-form-control` element so it can only be resized horizontally along the x-axis.                                                  |
| `.pf-m-success`           | `.pf-c-form-control`               | Modifies a form control for the success state.                                                                                                            |
| `.pf-m-warning`           | `.pf-c-form-control`               | Modifies a form control for the warning state.                                                                                                            |
| `.pf-m-search`            | `.pf-c-form-control`               | Modifies a form control for the search input.                                                                                                             |