Disabled

Unified disabled state with data-disabled and aria-disabled on any element.

Why use this atom?

• Single source of truth for disabled state instead of scattering data-disabled, aria-disabled, and disabled across components
• CSS-friendly data-disabled attribute for styling without :disabled pseudo-class limitations
• Works on non-form elements where the native disabled attribute has no effect
• Two-way binding via model input

Import

import {AtomDisabled} from '@terse-ui/atoms/disabled';

Usage

<button atomDisabled>Enabled by default</button>

<button [atomDisabled]="true">Disabled button</button>

When atomDisabled is true, the element gets data-disabled and aria-disabled="true".

Two-Way Binding

<button [(atomDisabled)]="isDisabled">Toggle me</button>

As a Host Directive

@Directive({
  selector: '[myMenuItem]',
  hostDirectives: [{directive: AtomDisabled, inputs: ['atomDisabled']}],
})
export class MyMenuItem {
  readonly #disabled = inject(AtomDisabled);
}

Styling

[data-disabled] {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

Native disabled attribute

For native <button> and <input> elements, you may still want to bind the HTML disabled attribute in addition to AtomDisabled. The native attribute prevents form submission and removes the element from the tab order, which aria-disabled alone does not do.

API Reference

AtomDisabled

Selector	[atomDisabled]
Exported as	atomDisabled
Data attributes	data-disabled
ARIA bindings	aria-disabled

Inputs

Input	Type	Default	Description
atomDisabled	boolean		Whether the element is disabled.

Outputs

Output	Type	Description
atomDisabledChange	boolean	Whether the element is disabled.