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

Date input

Component guide

Example

When was your passport issued?

For example, 27 3 2007





  
<div class="govuk-form-group">

  <fieldset class="govuk-fieldset" role="group" aria-describedby="passport-issued-hint">
    
    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
    
      <h1 class="govuk-fieldset__heading">
        When was your passport issued?
      </h1>
    
    </legend>
    
  
    <div id="passport-issued-hint" class="govuk-hint">
      For example, 27 3 2007
    </div>
  
  
    <div class="govuk-date-input" id="passport-issued">
      
      
      <div class="govuk-date-input__item">
        <div class="govuk-form-group">
          <label class="govuk-label govuk-date-input__label" for="passport-issued-day">
            Day
          </label>
        
        
          <input
            
                
              
            
                
              
            
                
              
            
                
              
            
            
            
            
            
            
            
            
                
              
            
           class="govuk-input govuk-date-input__input govuk-input--width-2" id="passport-issued-day" name="passport-issued-day" type="text" inputmode="numeric">
        
        </div>
      </div>
      
      <div class="govuk-date-input__item">
        <div class="govuk-form-group">
          <label class="govuk-label govuk-date-input__label" for="passport-issued-month">
            Month
          </label>
        
        
          <input
            
                
              
            
                
              
            
                
              
            
                
              
            
            
            
            
            
            
            
            
                
              
            
           class="govuk-input govuk-date-input__input govuk-input--width-2" id="passport-issued-month" name="passport-issued-month" type="text" inputmode="numeric">
        
        </div>
      </div>
      
      <div class="govuk-date-input__item">
        <div class="govuk-form-group">
          <label class="govuk-label govuk-date-input__label" for="passport-issued-year">
            Year
          </label>
        
        
          <input
            
                
              
            
                
              
            
                
              
            
                
              
            
            
            
            
            
            
            
            
                
              
            
           class="govuk-input govuk-date-input__input govuk-input--width-4" id="passport-issued-year" name="passport-issued-year" type="text" inputmode="numeric">
        
        </div>
      </div>
      
      
    </div>
  
  </fieldset>

</div>

{{ govukDateInput({
  "id": "passport-issued",
  "namePrefix": "passport-issued",
  "fieldset": {
    "legend": {
      "text": "When was your passport issued?",
      "isPageHeading": true,
      "classes": "govuk-fieldset__legend--l"
    }
  },
  "hint": {
    "text": "For example, 27 3 2007"
  }
}) }}