HTML disabled Attribute

The HTML disabled attribute is a Boolean attribute that makes supported form controls or options unavailable for interaction. Disabled form controls generally cannot receive focus, are not editable or clickable, and are not included in submitted form data.

Syntax

The disabled attribute is added to a supported form element when the control or option should be unavailable.

<input type="text" name="username" disabled>

Browsers normally display disabled controls differently to indicate that they cannot currently be used.

Boolean Attribute

The disabled attribute is a Boolean attribute. Its presence represents true, and its absence represents false.

<button type="button" disabled>Unavailable</button>

Writing disabled="false" does not enable the control. Because the attribute is present, the control is still disabled.

<!-- This button is still disabled -->
<button type="button" disabled="false">Unavailable</button>

To enable the control, remove the disabled attribute.

Elements That Use the disabled Attribute

The disabled attribute can be used with several form-related elements.

Element	Description
`<button>`	Prevents the button from being activated.
`<fieldset>`	Disables its descendant form controls, with an exception for controls inside its first `<legend>` element.
`<input>`	Disables supported input controls.
`<optgroup>`	Makes the options within the option group unavailable for selection.
`<option>`	Makes an individual option unavailable for selection.
`<select>`	Disables the selection control.
`<textarea>`	Disables the text area.

Form Submission

A disabled form control is not included in the form data when the form is submitted.

<form action="result.php" method="post">
  <input type="text" name="first-name" value="Alex">
  <input type="text" name="account-id" value="12345" disabled>
  <button type="submit">Submit</button>
</form>

In this example, first-name can be submitted, but the disabled account-id control is not included in the submitted form data.

Disabling a <fieldset>

Adding disabled to a <fieldset> disables the form controls contained within it, except for controls that are descendants of the fieldset's first <legend> element.

<fieldset disabled>
  <legend>Contact Information</legend>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">

  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
</fieldset>

This provides a convenient way to disable a related group of controls without placing disabled on each control individually.

Disabling an <optgroup>

The disabled attribute can be applied to an <optgroup> to make all of its options unavailable while leaving the <select> element itself enabled.

<select name="location">
  <optgroup label="Available">
    <option value="north">North</option>
    <option value="south">South</option>
  </optgroup>
  <optgroup label="Unavailable" disabled>
    <option value="east">East</option>
    <option value="west">West</option>
  </optgroup>
</select>

The options in the disabled group cannot be selected.

disabled and readonly

The disabled and readonly attributes both restrict interaction with form controls, but they behave differently.

Attribute	User Can Edit	Can Receive Focus	Submitted with Form
`disabled`	No	No	No
`readonly`	No	Yes	Yes

Use disabled when a control should be unavailable. Use readonly on supported controls when the value should remain available and be submitted but should not be editable by the user.

Styling Disabled Controls

CSS provides the :disabled pseudo-class for selecting elements that are in a disabled state.

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

Browsers provide default styling for disabled controls, but CSS can be used to customize their appearance.

Common Mistakes

Do not use disabled="false" to enable a control. Because disabled is a Boolean attribute, the control remains disabled whenever the attribute is present.

Do not expect the value of a disabled form control to be submitted. If a value needs to be submitted while preventing the user from editing it, consider readonly when that attribute is supported by the control.

Do not use disabled merely to make an element look inactive. The attribute changes the behavior of supported form elements as well as their appearance.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

The disabled attribute and its established uses are widely supported in current core browsers. Its exact behavior depends on the form control or related element where it is used.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the disabled Attribute

The example compares enabled and disabled form controls so you can see how the disabled attribute prevents interaction.

Play in Editor

Summary

The HTML disabled attribute is a Boolean attribute that makes supported form controls or options unavailable for interaction. Disabled controls generally cannot receive focus and are not included in submitted form data. The attribute can also disable groups of controls through <fieldset> and groups of options through <optgroup>.