Getting StartedInstall and bootstrap headless foundations 4
LayoutHeadless structural primitives for expandable and container patterns 6
OverlayHeadless modal and floating layer behavior 3
FeedbackHeadless notification and status communication patterns 5
FormHeadless input and selection contracts 17
UtilityReusable action, identity, and clipboard behavior 6
NavigationHeadless trails, trees, menus, and command surfaces 7
Overview API Styling Examples

API reference

Headless radio is a directive attached to input[tngRadio]. It preserves native radio semantics while exposing a stable state contract for readonly, invalid, and focus styling.

Directive attachment

html
<label class="radio-row">
  <input tngRadio name="plan" value="starter" />
  <span>Starter</span>
</label>

Grouped radio pattern

html
<fieldset class="radio-group">
  <legend>Billing plan</legend>
  <label class="radio-row">
    <input tngRadio name="billing-plan" value="starter" />
    <span>Starter</span>
  </label>
  <label class="radio-row">
    <input tngRadio name="billing-plan" value="pro" [checked]="true" />
    <span>Pro</span>
  </label>
</fieldset>
InputTypeDefaultNotes
checkedboolean | '' | stringfalseControlled checked state for the individual radio.
disabledboolean | '' | stringfalseDisables interaction and reflects native disabled semantics.
readonlyboolean | '' | stringfalseKeeps the radio focusable, but reverts user changes after interaction.
requiredboolean | '' | stringfalseReflects to the native required attribute.
invalid, ariaInvalidboolean | null | '' | 'true' | 'false'nullMarks the control invalid and exposes the styling hooks.
name, valuestring | nullnullUse shared name values for a single-select radio group.
ariaDescribedBystring | nullnullAssociates helper or error text with the radio.

Reflected attributes

The directive reflects native and data attributes so your CSS can style state without relying on JavaScript-managed wrapper nodes.

AttributeWhen presentPurpose
aria-checkedAlwaysMirrors the checked state.
aria-disabled, aria-readonlyWhen applicableCommunicates non-editable interaction state.
data-stateAlwayschecked or unchecked hook for styling.
data-checked, data-uncheckedMutually exclusiveConvenience hooks for checked or unchecked visuals.
data-invalid, data-disabled, data-readonlyWhen applicableState hooks for validation and non-editable styling.
data-focused, data-focus-visibleOn focusDifferentiate generic focus from keyboard focus-visible treatment.

Change handling

Headless radio does not emit a custom output. Listen to the native change event on the input, then update your selected value only when the browser reports the radio as checked.

Helper text association

html
<p id="billing-plan-help">Choose the plan that should ship with this environment.</p>
<label class="radio-row">
  <input tngRadio name="billing-plan" ariaDescribedBy="billing-plan-help" />
  <span>Starter</span>
</label>

In Angular examples, the common pattern is (change) plus a small guard: check event.target instanceof HTMLInputElement and then branch only when target.checked is true.