Evo

Form Disabled

Form elements with a disabled class for labels, or a disabled attributes for elements.

input disabled

<label class="display-block margin-bottom-8 text-uppercase text-size-3 text-tracking-10 disabled">Input Label</label>
<input name="input" placeholder="Evo Input Placeholder" class="evo-form evo-form-padding evo-form-box" disabled />

For disabled styles, apply the disabled attribute to a form element, and a disabled class to any form label.

input inverse disabled

Demonstration of inverse disabled style.

select disabled

<label for="select" class="display-block margin-bottom-8 text-uppercase text-size-3 text-tracking-10 disabled">Choose one</label>
<select name="select" disabled>
<option value="option1">option 1</option>
<option value="option2">option 2</option>
<option value="option3">option 3</option>
</select>

For disabled styles, apply the disabled attribute to a form element, and a disabled class to any form label.

Demonstration of disabled select with attribute of multiple.

select inverse disabled

For disabled styles, apply the disabled attribute to a form element, and a disabled class to any form label.

Demonstration of inverse disabled style.

textarea disabled

<label class="display-block margin-bottom-8 text-uppercase text-size-3 text-tracking-10 disabled">Input Label</label>
<textarea type="text" name="message" required rows="8" spellcheck="true" placeholder="Textarea Placeholder" class="evo-form evo-form-padding evo-form-box" disabled></textarea>

For disabled styles, apply the disabled attribute to a form element, and a disabled class to any form label.

textarea inverse disabled

Demonstration of inverse disabled style.

File

<label class="disabled">File Label</label>
<div class="evo-space-1"></div>
<input type="file" name="file" placeholder="File Placeholder" disbled />

Apply the disabled class and the disabled attribute.

<input type="file" name="file" class="evo-form evo-form-padding evo-form-box" disabled />

Apply the disabled attribute.

<label class="evo-button ghost-color-to-ghost width-auto button-box-thin button-padding-medium box-dashed evo-icon-button button-upload cursor-pointer disabled">
<input type="file" disabled multiple />
<span>Upload File</span>
</label>

Apply the disabled class and the disabled attribute.

File inverse

<label class="text-inverse disabled">File Label</label>
<div class="evo-space-1"></div>
<input type="file" name="file" placeholder="File Placeholder" class="text-inverse" disabled />

Apply the disabled class and the disabled attribute.

<input type="file" name="file" class="evo-form evo-form-padding evo-form-box" disabled />

Apply the disabled attribute.

<label class="evo-button ghost-color-to-ghost-inverse width-auto button-box-thin button-padding-medium box-dashed evo-icon-button button-upload cursor-pointer disabled">
<input type="file" disabled multiple />
<span>Upload File</span>
</label>

Apply the disabled class and the disabled attribute.

form-checkbox disabled

<fieldset>
<label class="form-checkbox disabled"><input type="checkbox" id="checkbox1disabled" disabled checked /> checkbox 1</label>
<label class="form-checkbox disabled"><input type="checkbox" id="checkbox2disabled" disabled /> checkbox 2</label>
<label class="form-checkbox disabled"><input type="checkbox" id="checkbox3disabled" disabled /> checkbox 3</label>
</div>

Apply the disabled class and the disabled attribute.

form-checkbox inverse disabled

<fieldset class="overflow-hidden">
<label class="form-checkbox text-inverse disabled"><input type="checkbox" id="checkbox1inverse" disabled checked /> checkbox 1</label>
<label class="form-checkbox text-inverse disabled"><input type="checkbox" id="checkbox2inverse" disabled /> checkbox 2</label>
<label class="form-checkbox text-inverse disabled"><input type="checkbox" id="checkbox3inverse" disabled /> checkbox 3</label>
</div>

Apply the disabled class and the disabled attribute.

form-radio disabled

<fieldset>
<label class="form-radio disabled"><input type="radio" id="radio1" name="radio" value="value" disabled checked /> radio 1</label>
<label class="form-radio disabled"><input type="radio" id="radio2" name="radio" value="value" disabled /> radio 2</label>
<label class="form-radio disabled"><input type="radio" id="radio3" name="radio" value="value" disabled /> radio 3</label>
</div>
</fieldset>

Apply the disabled class and the disabled attribute.

form-radio inverse disabled

<fieldset class="overflow-hidden">
<label class="form-radio text-inverse disabled"><input type="radio" id="radio1inverse" name="radioInverse" value="value" disabled checked /> radio 1</label>
<label class="form-radio text-inverse disabled"><input type="radio" id="radio2inverse" name="radioInverse" value="value" disabled /> radio 2</label>
<label class="form-radio text-inverse disabled"><input type="radio" id="radio3inverse" name="radioInverse" value="value" disabled /> radio 3</label>
</div>
</fieldset>

Apply the disabled class and the disabled attribute.

submit disabled

<input type="submit" disabled />

Apply the disabled attribute.

<input type="submit" class="evo-button width-auto" disabled />

Apply the disabled attribute.

<input type="submit" class="evo-button button-box-none ghost-to-ghost-color transparent-bg width-auto" disabled />

Apply the disabled attribute.

submit inverse disabled

<input type="submit" disabled />

Apply the disabled attribute.

<input type="submit" class="evo-button-inverse width-auto" disabled />

Apply the disabled attribute.

<input type="submit" class="evo-button-inverse button-box-none ghost-to-ghost-color-inverse transparent-bg width-auto" disabled />

Apply the disabled attribute.