package.docs.components.FormControl.examples.FormControl.md Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of patternfly Show documentation
Assets, source, tooling, and content for PatternFly 4
The newest version!
---
id: Form control
section: components
subsection: forms
cssPrefix: pf-v6-c-form-control
---## Examples

### Input

**Note:** In webkit browsers, inputs with status icons that are autocompleted will have their icons removed by the user agent stylesheet. If the field does not need to use autocomplete, turn it off with `autocomplete="off"` to avoid the problem. Otherwise, use [helper text](/components/helper-text/html-demos)  instead to ensure that the status will remain visible if the field is autocompleted.

```html

  




  




  




  




  




  
  
    
      
    
  




  
  
    
      
    
  




  
  
    
      
    
  




  




  
  
    
      
    
  




  
  
    
      
    
    
      
    
  




  
  
    
      
    
  


```

### Select

```html

  
  
    
      
    
  




  
  
    
      
    
  




  
  
    
      
    
  




  
  
    
      
    
    
      
    
  




  
  
    
      
    
    
      
    
  




  
  
    
      
    
    
      
    
  




  
  
    
      
    
  


```

### Textarea

```html

  Standard





  Readonly





  Readonly plain





  Disabled





  Success

  
    
      
    
  




  Warning

  
    
      
    
  




  Error

  
    
      
    
  




  Resizes vertically





  Resizes horizontally





  Resizes in both directions



```

## Documentation

### Accessibility

| Attribute | Applied to | Outcome |
| -- | -- | -- |
| `id` | `.pf-v6-c-form-control > input`,`.pf-v6-c-form-control > select`, or `.pf-v6-c-form-control > textarea` | Provides an `id` value that can be used with the `for` attribute on an associated `` element to provide an accessible label for the form control element.
| `aria-invalid="true"` | `.pf-v6-c-form-control > input`,`.pf-v6-c-form-control > select`, or `.pf-v6-c-form-control > textarea` | Indicates that the form control is in the error state and applies error state styling. Use with `.pf-m-error` on the `.pf-v6-c-form-control` to ensure correct styling. |
| `aria-label="descriptive text"` | `.pf-v6-c-form-control > input`,`.pf-v6-c-form-control > select`, or `.pf-v6-c-form-control > textarea` | Provides an accessible label for assistive technology. |
| `aria-expanded="true"` | `.pf-v6-c-form-control > input` | Indicates that clicking in the form control has toggled something else to be expanded. Use with `.pf-m-expanded` on the `.pf-v6-c-form-control` to ensure correct styling. |

### Usage

| Class | Applied to | Outcome |
| -- | -- | -- |
| `.pf-v6-c-form-control` | `` |  Initiates a container for an input, text area or select. For styling of checkboxes or radios see the [checkbox component](/components/forms/checkbox) or [radio component](/components/forms/radio). **Required**  |
| `.pf-v6-c-form-control__utilities` | `` |  Initiates a container for elements like icons to be associated with the form control.  |
| `.pf-v6-c-form-control__icon` | `` |  Creates a container for an icon associated with a form control.  |
| `.pf-v6-c-form-control__toggle-icon` | `` |  Initiates a toggle icon for a form select.  |
| `.pf-m-resize-vertical` | `.pf-v6-c-form-control` | Modifies a form control element containing a text area so it can only be resized vertically. |
| `.pf-m-resize-horizontal` | `.pf-v6-c-form-control` | Modifies a form control element containing a text area so it can only be resized horizontally. |
| `.pf-m-resize-both` | `.pf-v6-c-form-control` | Modifies a `.pf-v6-c-form-control` element containing a text area so it resizes in both directions. |
| `.pf-m-icon` | `.pf-v6-c-form-control` | Modifies a form control to allow for an icon. |
| `.pf-m-readonly` | `.pf-v6-c-form-control` | Modifies a form control for a readonly input, text area, or select.|
| `.pf-m-disabled` | `.pf-v6-c-form-control` | Modifies a form control for a disabled input, text area, or select.|
| `.pf-m-success` | `.pf-v6-c-form-control` | Modifies a form control for the success state. |
| `.pf-m-warning` | `.pf-v6-c-form-control` | Modifies a form control for the warning state. |
| `.pf-m-error` | `.pf-v6-c-form-control` | Modifies a form control for the error (invalid) state. |
| `.pf-m-expanded` | `.pf-v6-c-form-control` | Modifies a form control for the expanded state. This is used when clicking in the text input toggles something open/closed. |
| `.pf-m-placeholder` | `.pf-v6-c-form-control` | Modifies a form select for placeholder styles. This modifier is set programatically based on the chosen option. |
| `.pf-m-plain` | `.pf-v6-c-form-control` | Modifies a form control containing an `` or `` with a `readonly` attribute to be presented as normal text. |
| `.pf-m-status`| `.pf-v6-c-form-control__icon` | Modifies a form control icon to show status. |
</code></pre>    <br/>
    <br/>
<div class='clear'></div>
</main>
</div>
<br/><br/>
    <div class="align-center">© 2015 - 2025 <a href="/legal-notice.php">Weber Informatics LLC</a> | <a href="/data-protection.php">Privacy Policy</a></div>
<br/><br/><br/><br/><br/><br/>
</body>
</html>