Disable-Forms
Add the disabled boolean attribute on an input to prevent user interactions and make it appear lighter.
Disabled fieldset example
<form>
<div class="mb-3">
<label class="inline-block mb-2 text-gray-500">Disabled input</label>
<input type="text" class="block w-full px-4 py-2 placeholder-gray-600 bg-gray-200 rounded-md" disabled
placeholder="Disabled input">
</div>
<div class="mb-3">
<label class="inline-block mb-2 text-gray-500">Disabled select menu</label>
<select class="w-full py-2 pl-4 pr-12 text-gray-700 bg-gray-200 rounded-md shadow-inner" disabled>
<option value="disabled select">Disabled select</option>
</select>
</div>
<div class="mb-3">
<div class="flex items-center form-check">
<input class="w-4 h-4 mr-2" type="checkbox" disabled>
<label class="text-gray-400 form-check-label">
Can't check this
</label>
</div>
</div>
<button class="inline-block px-6 py-2 mb-4 mr-4 text-center text-white bg-blue-300 border border-blue-300 rounded shadow-md "disabled>
Submit
</button>
</form>
Add the disabled attribute and the associated <label> are automatically styled to match with a lighter color to
help indicate the input's state.
<fieldset class="mb-3">
<div class="flex items-center">
<input type="radio" name="radios" class="w-4 h-4 mr-2" id="disabledRadio1" disabled>
<label class="text-gray-400" for="disabledRadio1">Disabled radio</label>
</div>
<div class="flex items-center mb-3">
<input type="radio" name="radios" class="w-4 h-4 mr-2" id="disabledRadio2" disabled checked>
<label class="text-gray-400" for="disabledRadio2">Disabled checked radio</label>
</div>
</fieldset>
Add the disabled attribute and the associated <label> are automatically styled to match with a lighter color to
help indicate the input's state.
<div class="flex items-center mb-1">
<button class="flex items-center h-5 mr-2 transition duration-300 bg-blue-100 border shadow top-5 right-5 w-9 rounded-2xl focus:outline-none"
type="checkbox" disabled>
<div class="w-1 h-1 p-2 text-white transition duration-500 bg-white border rounded-full md:w-2 md:h-2"></div>
</button>
<label class="text-gray-400 form-check-label" for="disabledSwitchCheckChecked2"> Disabled switch checkbox input</label>
</div>
<div class="flex items-center mb-4">
<button class="flex items-center h-5 mr-2 transition duration-300 bg-blue-100 border shadow top-5 right-5 w-9 rounded-2xl focus:outline-none"
type="checkbox" disabled>
<div class="w-1 h-1 p-2 ml-6 text-white transition duration-500 transform -translate-x-2 bg-white border border-blue-400 rounded-full md:w-2 md:h-2"></div>
</button>
<label class="text-gray-400 form-check-label" for="disabledSwitchCheckChecked2"> Disabled Checked switch checkbox input</label>
</div>