package.docs.demos.PasswordStrength.examples.PasswordStrength.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: 'Password strength'
section: components
---## Examples

### Initial state

```html

  
    
      
          Password *
      
      
    
    
      
        
          
            
          
        
        
          
        
      
      
        
          
            
              
            
            Must be at least 14 characters
          
          
            
              
            
            Cannot contain the word "redhat"
          
          
            
              
            
            Must include at least 3 of the following: lowercase letters, uppercase letters, numbers, symbols
          
        
      
    
  


```

### Invalid password

```html

  
    
      
          Password *
      
      
    
    
      
        
          
            
          
        
        
          
        
      
      
        
          
            
              
            
            Must be at least 14 characters
          
          
            
              
            
            Cannot contain the word "redhat"
          
          
            
              
            
            Must include at least 3 of the following: lowercase letters, uppercase letters, numbers, symbols
          
        
      
    
  


```

### Valid, weak password

```html

  
    
      
          Password *
      
      
        
          
            
              
            
            Weak
          
        
      
    
    
      
        
          
            
          
        
        
          
        
      
      
        
          
            
              
            
            Must be at least 14 characters
          
          
            
              
            
            Cannot contain the word "redhat"
          
          
            
              
            
            Must include at least 3 of the following: lowercase letters, uppercase letters, numbers, symbols
          
        
      
    
  


```

### Valid, strong password

```html

  
    
      
          Password *
      
      
        
          
            
              
            
            Strong
          
        
      
    
    
      
        
          
            
          
        
        
          
        
      
      
        
          
            
              
            
            Must be at least 14 characters
          
          
            
              
            
            Cannot contain the word "redhat"
          
          
            
              
            
            Must include at least 3 of the following: lowercase letters, uppercase letters, numbers, symbols
          
        
      
    
  


```

## Documentation

This demo implements a password strength meter. It uses multiple helper text items in the form helper text area below the input field to indicate whether the password meets validity criteria. Once the validity criteria are met, it also places helper text in the info area above the input field to indicate the strength of the password.