Skip to content

[disabled]

The disabled attribute prevents interaction with a form element and removes it from the keyboard tab order, communicated to assistive technologies as unavailable.

Basic Usage

live preview
editable html
<button disabled="disabled" aria-label="Disabled button">
  Button
</button>

Input

live preview
editable html
<input type="text" disabled="disabled" aria-label="Disabled input" placeholder="Type your text" />

Range

live preview
editable html
<label>
  Range slider
  <input disabled="disabled" aria-label="Disabled range slider" type="range" />
</label>

Select

live preview
editable html
<select disabled="disabled" aria-label="Disabled select">
  <option selected disabled value="">
  Select your favorite cuisine...
  </option>
  <option>Italian</option>
  <option>Japanese</option>
  <option>Indian</option>
  <option>Thai</option>
  <option>French</option>
</select>

Switch

live preview
editable html
<label>
  <input disabled="disabled" aria-label="Disabled switch" type="checkbox" checked="checked" role="switch" />
  Switch
</label>

Textarea

live preview
editable html
<textarea name="disabled" disabled>
  Disabled
</textarea>