Attribute disabled

The disabled attribute can be used to disable interactive elements of forms. As long as this attribute is present, the element cannot be interacted with.

In the example, the attribute is set for a whole group of elements. As a result, none of the fields inside the disabled <fieldset> can be interacted with:

        
          
          <fieldset disabled>  <label>    Name:    <input type="text">  </label>  <label>    Phone:    <input type="tel">  </label></fieldset>
          <fieldset disabled>
  <label>
    Name:
    <input type="text">
  </label>
  <label>
    Phone:
    <input type="tel">
  </label>
</fieldset>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

This is a boolean attribute. Its mere presence tells the browser that the element should be disabled.

It can be applied to the following form elements:

• <button>;
• <fieldset>;
• <optgroup>;
• <option>;
• <select>;
• <textarea>;
• <input>.

In ARIA there is an attribute aria-disabled. It also indicates that the element cannot be changed or interacted with in other ways.

Try to use disabled. aria-disabled will help in complicated situations when creating custom elements.

The disabled attribute makes an element inactive: it cannot be interacted with, clicked on, it cannot be focused, the disabled field will not be submitted along with the other fields of the form.

The attribute affects not only the element itself but also all its children.

The presence of the disabled attribute disables the influence of the required and pattern attributes. Because the value of an inactive field cannot be changed, the browser saves time on their validation.

💡 An element with the disabled attribute can be styled using the pseudo-class :disabled. By default, the browser makes them gray and less contrasty.