HTML Disabled Attribute

Definition

The disabled Attribute is a boolean that is used to disable form controls, such as buttons, inputs, options and more.

Applicable Elements

The disabled Attribute can be used with the following elements:

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

HTML <button> disabled Attribute

The <button> element creates a clickable button and is often used to submit forms and other button functionality. To add functionality when the button is clicked, you will need to associate it with an activation behavior, such as submit, reset, or button.

The disabled attribute when used with the <button> element will disable the button form control, and greyed out (with default styling).

Syntax

<button type="button" disabled>Log Out</button>

Usage

• The disabled attribute when present will make the button unusable, meaning that you cannot click to activate it.
• The disabled attribute on a button can be used to prevent someone submitting the form until a condition is met. For example, you might use JavaScript to remove the disabled attribute on a button once a checkbox confirming agreement to a website’s terms and conditions.
• If disabled element may not be part of any form validation.

Values

Values can include:

• disabled

Examples

The following example shows a simple disabled button:

<button type="button" disabled>Log Out</button>

HTML <fieldset> disabled Attribute

The <fieldset> tag is used to group a set of form controls and labels within an HTML form, optionally grouped under a common name (legend).

The disabled attribute when used with the <fieldset> element will disable form control descendants, and display them greyed out (with default styling).

Syntax

<fieldset disabled></fieldset>

Usage

• The disabled attribute is a Boolean value that causes all the form control descendants to be disabled. Any controls within a disabled <fieldset> will not be editable, and no contents will be submitted with the rest of the form. Browsers will display <disabled> elements grayed out by default.

Values

Values can include:

• disabled

Examples

The following example shows a disabled <fieldset> element within a form:

<form>
  <fieldset disabled>
    <legend>What is your favorite programming language</legend>
    <input type="radio" id="javascript" name="language">
    <label for="javascript">JavaScript</label><br/>
    <input type="radio" id="python" name="language">
    <label for="python">Python</label><br/>
    <input type="radio" id="golang" name="language">
    <label for="golang">Golang</label>
  </fieldset>
</form>

HTML <input> disabled Attribute

The <input> element is a field used in HTML Forms enabling the user input data.

The disabled attribute when used with the <input> element will disable and grey it out (with default styling).

Syntax

<input disabled>

Usage

• The disabled attribute when present will make the button unusable, meaning that you cannot click to activate it.
• The disabled attribute on a button can be used to prevent someone submitting the form until a condition is met. For example, you might use JavaScript to remove the disabled attribute on a button once a checkbox confirming agreement to a website’s terms and conditions.
• If disabled element may not be part of any form validation.

Values

Values can include:

• disabled

Examples

The following example shows a simple disabled button:

<form action="" method="get" class="form">
    <label for="name">Name: </label>
    <input type="text" name="name" id="name" disabled>
</form>

HTML <optgroup> disabled Attribute

The <optgroup> element is used to group a number of related options within a select element.

The disabled attribute when used with the <optgroup> element will disable the group of <option> elements, and grey them out (with default styling).

Syntax

<optgroup disabled></optgroup>

Usage

• The disabled attribute is a boolean that when present will make the <optgroup> unusable, meaning that you cannot click to activate it.

Values

Values can include:

• disabled

Examples

The following example shows a disabled <optgroup> element:

<label for="song-select">Choose a song:</label>
<select id="song-select">
    <optgroup label="Oasis" disabled>
        <option>Wonderwall</option>
        <option>Don't look back in anger</option>
        <option>Supersonic</option>
    </optgroup>
    <optgroup label="Beetles">
        <option>Here comes the sun</option>
        <option>Hey Jude</option>
        <option>Let it be</option>
    </optgroup>
</select>

HTML <option> disabled Attribute

The <option> tag is used to define an item in a <select>, <optgroup>, or <datalist> element.

The disabled attribute is a boolean that determines whether the <option> element is disabled and greyed out (with default styling).

Syntax

<option disabled>Option Text</option>

Usage

• The disabled attribute is a boolean that when present will make the <option> element unusable, meaning that you cannot click to activate it.

Values

Values can include:

• disabled

Examples

The following example shows a simple disabled button:

<label for="song-select">Choose a song:</label>
<select id="song-select">
    <optgroup label="Oasis">
        <option>Wonderwall</option>
        <option disabled>Don't look back in anger</option>
        <option>Supersonic</option>
    </optgroup>
    <optgroup label="Beetles">
        <option disabled>Here comes the sun</option>
        <option>Hey Jude</option>
        <option>Let it be</option>
    </optgroup>
</select>

HTML <select> disabled Attribute

The <select> tag creates a control that enables you to select from a set of options in the form of a drop-down list.

The disabled attribute when used with the <select> element will disable it, along with all <optgroup> or <option> decendents, and grey them out (with default styling).

Syntax

<select disabled>

Usage

• The disabled attribute is a boolean that when present will make the <select> element unusable, meaning that you cannot click to activate it.

Values

Values can include:

• disabled

Examples

The following example shows a simple disabled button:

<label for="song-select">Choose a song:</label>
<select name="song-select" size=1 id="song-select" disabled>
    <optgroup label="Oasis">
        <option>Wonderwall</option>
        <option>Don't look back in anger</option>
        <option>Supersonic</option>
    </optgroup>
    <optgroup label="Beetles">
        <option>Here comes the sun</option>
        <option>Hey Jude</option>
        <option>Let it be</option>
    </optgroup>
</select>

HTML <textarea> disabled Attribute

The <textarea> element is a multi-line field used in HTML Forms enabling the user input data.

The disabled attribute when used with the <textarea> element will disable the element, and grey it out (with default styling).

Syntax

<textarea disabled></textarea>

Usage

• The disabled attribute is a boolean that when present will make the <textarea> element unusable, meaning that you cannot click to activate it.

Values

Values can include:

• disabled

Examples

The following example shows a simple disabled button:

<label for="message">Leave a message</label>
<textarea id="message" 
  name="message" 
  rows="6" 
  placeholder="Feel free to leave a message and we 
  will get back to you as soon as we can."
  disabled></textarea>

Specification

The disabled HTML specification for the various form elements are as follows:

• HTML Living Standard Specification

Browser Support

The disabled attribute has the following browser support:

Desktop

Mobile