Documentation

Vue

Source & Credits

Upgrade Guide

Change Log

Disable-Forms

Add the disabled boolean attribute on an input to prevent user interactions and make it appear lighter.

Examples

Disabled fieldset example 
<form>
<fieldset disabled="">
    <legend>Disabled fieldset example</legend>
    <div class="mb-3">
        <label for="disabledTextInput" class="form-label">Disabled input</label>
        <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="mb-3">
        <label for="disabledSelect" class="form-label">Disabled select menu</label>
        <select id="disabledSelect" class="form-select">
            <option>Disabled select</option>
        </select>
    </div>
    <div class="mb-3">
        <div class="form-check">
            <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled="">
            <label class="form-check-label" for="disabledFieldsetCheck">
                Can't check this
            </label>
        </div>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>

Disabled

Add the disabled attribute and the associated <label>s are automatically styled to match with a lighter color to help indicate the input’s state.

<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioDisabled" disabled="">
<label class="form-check-label" for="flexRadioDisabled">
    Disabled radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioCheckedDisabled" checked="" disabled="">
<label class="form-check-label" for="flexRadioCheckedDisabled">
    Disabled checked radio
</label>
</div>

Disable Switches

A switch has the markup of a custom checkbox but uses the .form-switch class to render a toggle switch. Switches also support the disabled attribute.

<div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" id="flexSwitchCheckDisabled" disabled="">
    <label class="form-check-label" for="flexSwitchCheckDisabled">Disabled switch checkbox input</label>
</div>
<div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" id="flexSwitchCheckCheckedDisabled" checked="" disabled="">
    <label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
</div>