Disabled States
Every FrontAlign form control supports a disabled state through the HTML disabled attribute. Disabled controls use --form-disabled as the background and --form-disabled-text for the text — both are separate tokens from the normal form control colors so they adapt correctly in dark mode.
Disabled controls are non-interactive (cursor: not-allowed, pointer-events: none) and do not trigger focus rings or validation styles.
Disabled Input
<div class="group">
<label class="form-label" for="dis-email">Email address</label>
<input class="form-input" id="dis-email" type="email" value="locked@example.com" disabled>
</div>
Readonly Input
A readonly input is not disabled — it can be focused and its value can be selected and copied. It uses the same disabled visual treatment to communicate that the value cannot be edited.
<div class="group">
<label class="form-label" for="ro-id">Account ID</label>
<input class="form-input" id="ro-id" type="text" value="USR-00421" readonly>
</div>
Disabled Textarea
<div class="group">
<label class="form-label" for="dis-notes">Internal notes</label>
<textarea class="form-textarea" id="dis-notes" disabled>Readonly content from the system.</textarea>
</div>
Disabled Select
<div class="group">
<label class="form-label" for="dis-plan">Current plan</label>
<select class="form-select" id="dis-plan" disabled>
<option>Pro — $29/month</option>
</select>
</div>
Disabled Checkbox and Radio
<div class="group-checkbox">
<input class="form-input-checkbox" id="dis-chk" type="checkbox" disabled>
<label class="form-label" for="dis-chk">Disabled checkbox</label>
</div>
<div class="group-checkbox">
<input class="form-input-checkbox" id="dis-chk-on" type="checkbox" checked disabled>
<label class="form-label" for="dis-chk-on">Disabled checkbox (checked)</label>
</div>
<div class="group-radio">
<input class="form-input-radio" id="dis-radio" name="dis-group" type="radio" disabled>
<label class="form-label" for="dis-radio">Disabled radio</label>
</div>
Disabled Switch
<div class="group-switch">
<input class="form-input-checkbox" id="dis-sw-off" type="checkbox" disabled>
<label class="form-label" for="dis-sw-off">Disabled (off)</label>
</div>
<div class="group-switch">
<input class="form-input-checkbox" id="dis-sw-on" type="checkbox" checked disabled>
<label class="form-label" for="dis-sw-on">Disabled (on)</label>
</div>
Disabling a Fieldset
Applying disabled to a <fieldset> disables all form controls inside it at once — no need to add disabled to each control individually. Useful for multi-step forms where earlier steps should be locked after progression.
<fieldset disabled>
<legend>Billing information (locked)</legend>
<div class="group">
<label class="form-label" for="fs-card">Card number</label>
<input class="form-input" id="fs-card" type="text" value="**** **** **** 4242">
</div>
<div class="group">
<label class="form-label" for="fs-expiry">Expiry</label>
<input class="form-input" id="fs-expiry" type="text" value="08 / 26">
</div>
<div class="group-checkbox">
<input class="form-input-checkbox" id="fs-save" type="checkbox" checked>
<label class="form-label" for="fs-save">Save card for future payments</label>
</div>
</fieldset>