Skip to main content
Component Pad – Experimental – output can be wrong
GOV.UK Frontend

Password input

Component guide

Example

<div class="govuk-form-group govuk-password-input" data-module="govuk-password-input">
  <label class="govuk-label" for="password-input">
    Password
  </label>


  <div class="govuk-input__wrapper govuk-password-input__wrapper">
    
    
    <input
    
        
      
    
        
      
    
        
      
    
        
      
    
        
      
    
    
    
    
        
      
    
        
      
    
    
    
   class="govuk-input govuk-password-input__input govuk-js-password-input-input" id="password-input" name="password" type="password" spellcheck="false" autocomplete="current-password" autocapitalize="none">
    
        <button type="button" class="govuk-button govuk-button--secondary govuk-password-input__toggle govuk-js-password-input-toggle" data-module="govuk-button"
        
            
          
        
            
          
        
            
        
       aria-controls="password-input" aria-label="Show password" hidden>
      Show
    </button>
    
  </div>

</div>

{{ govukPasswordInput({
  "label": {
    "text": "Password"
  },
  "id": "password-input",
  "name": "password"
}) }}